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