Problem statement
Right after users click the magic link, they do not seem to be authenticated, and the interface keeps showing up as if they were not authenticated. Login button showing and no private tabs showing up.
Refreshing the page does not log the user in.
But if you click the Login button again, you get logged in.
Symptoms
I have already tried with Mozilla Firefox, Safari, Google Chrome, and incognito windows (or clearing the cache).
If I reproduce the exact same steps as you and go to my email, copy paste the link without clicking it, then paste it into the exact same tab from which I tried to log in, then yes, I get logged in. This works both in normal and incognito windows, both with Chrome and Mozilla.
But no actual user will behave that way.
If I behave like an actual user and simply click the link I received by email, I do not get logged in.
Steps to reproduce
I reproduced it with this sample starter Vue.js 3 SPA from your GitHub repository:
GitHub - auth0-developer-hub/spa_vue_javascript_hello-world_composition-api.
- I cloned the sample project.
- I installed dependencies.
- I added the environment file and variables.
- I ran the JSON server and the Vue.js 3 application.
- I filled in Callback, Logout, and Web Origins URIs in the Auth0 dashboard.
Cause
By default, our SPA SDKS use sessionStorage for transaction state, which is scoped to a tab. This is why pasting the magic link into the same tab works.
Solution
For cross-tab transaction state, you should use cookies. You can enable this using the useCookiesForTransactions option. Then transactions will work across browser tabs.
Adding the “useCookiesForTransactions” inside the main.js file solves the problem.