Auth0 Home Blog Docs

redirectUrl not working for SPA

not-working
redirecturi

#1

Say I want the user to be redirected to a specific URL of my Single Page Application after login, for example to:

http://localhost:8080/#/inits/7f000101-5d50-174d-815d-50bdaa170002/overview

However, Auth0 adds a ?code parameter before the # symbol and redirects to

http://localhost:8080/?code=viltrCOmIqaxfJqa#/inits/7f000101-5d50-174d-815d-50bdaa170002/overview

My Allowed Callback URL is configured to be http://localhost:8080/

How can I fix this?


#2

For SPA applications, you should use responseType of token id_token. The code response type is for regular webapps with a backend to handle the code exchange flow to obtain an id_token. Response Type of token will return the id_token in the hash fragment directly to your application, which should allow your routing to work as expected.

https://auth0.com/docs/libraries/lock/v10/customization#responsetype-string-


#3

Thanks, that helped, but it didn’t work. I was redirected to http://localhost:8080. What I did was to set the responseType to 'token' and used the state property of auth option to send the desired path and fetched it in the authenticated callback of auth0-lock as (this wasn’t working with responseType = 'code')

lock.on('authenticated', (authResult) => {
    ...
    window.location.href = '/#' + authResult.state
})

And it works. I wonder if state should not be used for this for security reasons.


#4

you might want to update this section in the documentation to highlight that the redirectUrl needs the responseType to be modified for SPA since, to be honest, people don’t read the entire list of parameters but only those they are interested in.


#5