- Which SDK this is regarding: @auth0/auth0-react
- SDK Version: 1.9.0
I feel like I’m missing something very obvious, but I’m creating this topic because I haven’t been able to find anything useful in the Auth0 documentation, and all the issues and SO questions I’ve been able to find are about persisting login/authentication on browser refresh, rather than maintaining app location.
Problem: When the user is logged in and on a page with a dynamic url (eg /products/:productId
), when the browser is refreshed, the url is changed to /
and the user is back on the main menu.
What I think is happening
Based on console logs, HAR analysis, and inspection of the SDK code, here’s my best guess of what’s currently happening.
- User is on
/product/1234
. Auth0 client is setup with aredirectUri
value ofwindow.location.origin
. Theauth0.{clientId}.is.authenticated=true
cookie is present. - Browser refreshes
- A GET request is made to
/product/1234
and page resources are downloaded - Something in the Auth0 client triggers at GET request to
<domain>.auth0.com/authorize
. - Then there’s a 302 redirect from
<domain>.auth0.com/authorize
- Then there’s a GET to
/
. Presumably becauseredirectUri={window.location.origin}
- Then
react-router
does its thing and takes the user to the protected/menu
route.
Other things to note
-
skipRedirectCallback: true
didn’t make any difference - Even if there was a way to dynamically update the
redirectUri
, “Allowed Callback URLs” only allows wildcards for subdomains.
Questions
- What is causing the auth request in step 4 above? (maybe the
useEffect
inauth0-provider.tsx
?). Is there a way to passappstate.returnTo
into it? Or is there a way to set it to authenticate without redirecting at all? - Is there an easy way to maintain the app location? This feels like something Auth0 would have had a simple solution for already. Am I missing something? Or perhaps I’ve accidentally set my app up in a way the prevents it just working ‘out of the box’?