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?
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-
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.
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.