Using @auth0/auth-vue (auth0-spa-js) 's loginWithRedirect. After successful authentication click browser back btn shows /callback Page

After successful authentication, auth server redirects user to /callback?code=…&state=… route (where I Am displaying a static message “Auth in progress”) then auth-vue or auth0-spa-js sdk navigates user to /profile page (in my case) or to default / page as mentioned in appState.target in loginWithRedirect() method.

All looks good till here, but at /profile page, if u click browser back btn app navigates to /callback?code=…&state=… page which shows “Auth in progress” and stays there. My tester raised a bug on this.
The guide suggested to have a /callback url and a simple component.

is there any approach to fix this or any suggestion or if it is like this could someone provide a why part of explanation ?

Followed : Vue.js Authentication By Example: Composition API Guide from auth0 developers guide

Hi @brainocorner649

This appears to be a bug regarding redirecting to appState is Auth0-Vue unfortunately.

You can review these Github issues open:

*Redirect to appState.target does not work · Issue #255 · auth0/auth0-vue · GitHub

*Redirect to appState.target does not work even when not using Quasar/router · Issue #414 · auth0/auth0-vue · GitHub

Also, your application might be performing the authentication flow repeatedly, causing a new authorization code each time. You could verify this behavior by checking your Auth0 Logs to see that multiple successful login events generate a new authorization code each time.

This issue appears to be handled when using React or NextJS however.

If you have any other questions feel free to leave a reply!

Kind Regards,
Nik

Actually, app.State.target works for me, what i need to know is
After auth is successful
→ my web app gets redirected to /callback?code=… route which would show a page with text “Authenticating… Please wait”
->then web app navigates to /profile page as given in appState.target

Now , Iam in /profile page, if i click browser back btn, app navigates back to /callback?code=… url and stays there showing “Authenticating… Please wait”.

is this behavior correct ?
why because i saw in some example click back btn somehow makes app to logout

Actually, app.State.target works for me, what i need to know is
After auth is successful
→ my web app gets redirected to /callback?code=… route which would show a page with text “Authenticating… Please wait”
->then web app navigates to /profile page as given in appState.target

Now , Iam in /profile page, if i click browser back btn, app navigates back to /callback?code=… url and stays there showing “Authenticating… Please wait”.

is this behavior correct ? because app stays at /callback page which does nothing in my case or should i check here and do appropriate action by myself?
why because i saw in some example click back btn somehow makes app to logout

Hi again @brainocorner649

Thanks for the update on the matter, I thought from your initial post that app.State.target was not behaving correctly.

When using one of our sample apps, if the user would click on the back button after being redirected to the profile, the application would throw in an error. This behaviour is to be expected and your application should handle this. I would recommend to redirect the user whenever they click on the back button to a specific page or implement a specific action (such as logging them out).

If you have any other questions, let me know.

Kind Regards,
Nik

so i found that after login we have to navigate to some other route then click back button twice then app gets navigates to /callback?code='… page.
If we click browser back btn after login without navigating to any other route then its navigating and showing err page.
followed this sample app mentioned here.
Vue.js Authentication By Example: Composition API by Dan Arias
Staff Developer Advocate

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.