At this point, you might think we are done. However, if you try refreshing the browser after navigating to the checkout page, you'll probably notice some unexpected behavior, as you'll be asked to log in again. There is also another far less obvious issue in that, after refreshing the page, the default axios headers will be cleared, including the bearer token we attached to the authorization header. Currently, the only way this header is set is after a successful login request—not something that the user should have to do after every page refresh. This also means that any future API requests would fail if those endpoints required authentication.
To fix the axios configuration issue, we need to check if the user is authenticated at the earliest point of the app startup, and set the authorization header if they are...