VUE3 SPA with history hash + auth0-vue

Get Help
,
1

Hi

I have being implementing Auth0 for past 2 months in both Nuxt3 SSR and VUE SPA.

Nuxt3 SSR - is complemented using Proof Key for Code Exchange (PKCE) Flow

But for our VUE SPA app we decided to use auth0-vue. The problem I am facing is with callback url.

App is running using history “Hash“ and when I trigger /authorize by passing callback “test-admin.xyz.dk/#/auth/callback“ and after successful login redirect, user gets redirect to test-admin.xyz.dk?code= where as it should redirect to test-admin.xyz.dk/#/auth/callback?code=

Then I found following information

  1. Use redirect_uri without hash fragment

OAuth2/OIDC providers do not support hash fragments in the redirect_uri. The hash is never sent to the server, so Auth0 cannot redirect you back to a hash route.

And after changing history from hash to path-based, redirect works.

And that make me to change out app navigation flow, is there a way to make callback work with hash?

I hope there is a solution for this issue.

3

Hi @danyal.db and welcome to the Auth0 Community!

Unfortunately, as you mentioned, hash fragments (#) are not sent to the server as part of the redirect_uri. The browser, following web standards (RFC 3986), strips the hash fragment (#/auth/callback) before sending the request to the server.

I would suggest an intermediary callback URL (that doesn’t have a hash character) followed by a 2nd redirect (client-side redirect won’t strip the hash) to your URL containing the hash character.

I hope this helps you solve your use case!
Teodor.

1 Like
4

Hi Teodor

Thanks for the reply, I just want to be certain if I’m missing anything in configuration that could support hash in call back. But I will use either root / or an intermediary callback.

Best Regards
Danyal

5

Hi again @danyal.db !

No, I don’t think you are missing anything that would allow it to work, unfortunately.

Best regards,
Teodor

6

Hi @teodor.andrei
Thanks for helping out with callback.

Now I’m facing an other issue, that can be seen in sample Auth0 Vue app.

When using private browser, user gets login successfully, and gots logout immediately also looses the login state & profile page shows noting.

Do you know if this is a known behavior?

app.use(
  createAuth0({
    domain: process.env.VUE_APP_AUTH0_DOMAIN,
    clientId: process.env.VUE_APP_AUTH0_CLIENT_ID,
    clientSecret: process.env.VUE_APP_AUTH0_CLIENT_SECRET, 
    authorizationParams: {
      organization: process.env.VUE_APP_AUTH0_ORG_ID,
      redirect_uri: process.env.VUE_APP_AUTH0_CALLBACK_URL, 
      audience: process.env.VUE_APP_AUTH0_AUDIENCE,
      scope: process.env.VUE_APP_AUTH0_SCOPE,
    },
    cacheLocation: 'localstorage'
    useRefreshTokens: true, 
  }),
)

In order to prevent the problem I have added following settings to the client config.

cacheLocation: 'localstorage', reloads
useRefreshTokens: true,

I hop there is some solution or config that support private browsers as well.

7

Hi again @danyal.db!

Unfortunately, I don’t have any information about this behavior. I would guess it happens because the browser doesn’t store a session in private mode, so perhaps your issue could be solved by making sure your refresh tokens are set up correctly.

Since this is another problem you are facing, I would suggest creating a separate post about this so that it gets more visibility than on a solved case.

I wish you a great day!
Teodor.

1 Like
8

@teodor.andrei Thanks I will make a new post.

1 Like
9

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