Infinite loop after login
wayne-o opened this issue · 26 comments
Keep getting sent around in circles after logging in: http://127.0.0.1:5173/auth-callback keeps getting called.
In checkAuth client.isAuthenticated() returns false - even though I am logged in?
authcallback is never called - started over with a fresh install of everything too
I'm having the exact same issue. Confirmed that authProvider.handleCallback() is never called, even through Auth0 redirects to /auth-callback correctly.
The [demo-react-admin](https://github.com/marmelab/ra-auth-auth0/tree/main/packages/demo-react-admin) project included in this repo does work out of the box (only the .env is required). I tested it against my own Auth0 SPA application without any issues. However, after switching the dataProvider from demo-fake-api to to my own GraphQL backend (which works fine when no authProvider is set), and the router goes into an infinite loop. The GraphQL backend has an admin password set.
Spent a few hours trying to debug - can't figure it out. Please help!
I've been able to reproduce on the demo locally. However, it seems random. Would love some help on this!
I've also been able to reproduce an issue that seems very similar to this one, although I'm not 100% sure.
In the end the issue I ran into came from a confusion between localhost and 127.0.0.1.
More specifically, I first opened the Admin App at http://localhost:8081/, which then redirected me to the Auth0 sign-in form, which then redirected to http://127.0.0.1:8081/auth-callback.
Since http://127.0.0.1:8081/ never initiated any sign-in attempts, the Auth0 lib threw an Invalid State error.
If I start from http://127.0.0.1:8081/ from the beginning then everything works fine first try.
@wayne-o @just-digital can you make sure you are always using http://127.0.0.1:8081/ and set up all your Auth0 App config URLs to something starting with http://127.0.0.1:8081/ ?
I'm having the exact same issue. Confirmed that
authProvider.handleCallback()is never called, even through Auth0 redirects to/auth-callbackcorrectly.The
[demo-react-admin](https://github.com/marmelab/ra-auth-auth0/tree/main/packages/demo-react-admin)project included in this repo does work out of the box (only the.envis required). I tested it against my own Auth0 SPA application without any issues. However, after switching thedataProviderfromdemo-fake-apito to my own GraphQL backend (which works fine when no authProvider is set), and the router goes into an infinite loop. The GraphQL backend has an admin password set.Spent a few hours trying to debug - can't figure it out. Please help!
Also stuck on this and have been for some hours. It looks like authProvider.handleCallback() should be called by default according to:
https://marmelab.com/react-admin/Admin.html#authcallbackpage
This route renders the AuthCallback component by default, which in turn calls authProvider.handleCallback
I also noticed that in the sentry logs it's only ever recorded as Success Login.
I've also been able to reproduce an issue that seems very similar to this one, although I'm not 100% sure. In the end the issue I ran into came from a confusion between
localhostand127.0.0.1. More specifically, I first opened the Admin App at http://localhost:8081/, which then redirected me to the Auth0 sign-in form, which then redirected to http://127.0.0.1:8081/auth-callback. Since http://127.0.0.1:8081/ never initiated any sign-in attempts, the Auth0 lib threw anInvalid Stateerror.If I start from http://127.0.0.1:8081/ from the beginning then everything works fine first try.
@wayne-o @just-digital can you make sure you are always using http://127.0.0.1:8081/ and set up all your Auth0 App config URLs to something starting with http://127.0.0.1:8081/ ?
Oh for sure - I don't use http://localhost:<port> anywhere - always http://127.0.0.1:<port>/ (which is also set in the Auth0 callback Tenant Application config).
For what it's worth - I was able to workaround the redirect issue by making my own custom route to /authorization-callback (which loads a custom component that manually executes the authProvider.handleCallback()) and then setting the Auth0 tenant callback URL to http://127.0.0.1:<port>/authorization-callback rather than React Admin's special http://127.0.0.1:<port>/auth-callback route.
It's dirty, but it works.
I don't get how this is different. This is what the AuthCallback page does except it uses react-query.
My guess is that there is some silent exception in the stack (specifically when using ra-data-hasura for GraphQL backend). I had to move onto other things at work, otherwise I would have loved to help and dig deeper. Sorry guys!
You've already been very helpful @just-digital so thank you so much for that!
Your workaround provides a new lead for us to investigate what's wrong with the react-admin implementation. Hopefully we'll be able to identify what's going on.
Thank you @just-digital I've been pulling my hair out all day over this. The handleCallback is never called and the state keeps refreshing. This worked.
I did notice you have to remove requireAuth from <Admin /> or you will have an infinite loop in the checkAuth too.
Still trying to find the bug in the callback. (and why the Admin renders the layout before authenticated)
EDIT: useAuthState/checkAuth is setting authenticated to true even though i have not logged in yet and storage is cleared.
A whole set of loops with this change. As you can see in the second image the handleCallback on AuthProvider is never called
Even though I am getting a code back correctly after login, handleCallback is never called. and infinitely loops to authorize and logout.
I removed all custom code and just have this:
const auth0 = new Auth0Client({
domain: '{my domain}.us.auth0.com',
clientId: '{my client id}',
cacheLocation: 'localstorage',
authorizationParams: {
audience: '{my audience}',
organization: '{my org id}'
},
});
const authProvider = Auth0AuthProvider(auth0, {
loginRedirectUri: 'http://127.0.0.1:3000/auth-callback',
logoutRedirectUri: 'http://127.0.0.1:3000'
});
<Admin
authProvider={authProvider}
dataProvider={dataProvider}
i18nProvider={i18nProvider}
requireAuth
disableTelemetry>
<CustomRoutes>
</CustomRoutes>
</Admin>This log is on page load with storage cleared:
How did you try it, we haven't released it yet?
I got it from here instead of npm. I've been trying everything getting Auth0 to work with RA over the past week so following closely.
Did you also update react-admin to at least 4.10.0?
I did. I have 4.10.2 installed. Brand new react-admin app with requireAuth on.
Can you provide a way to reproduce your issue? The example project works fine.
I'm not sure how to repro an Auth0 call without giving some info away. I will work on it today. The requireAuth seemed to be the issue when I left it yesterday. Will report back.
Want to mention out I fixed a lot of these issues by wrapping my admin in BrowserRouter. I was also pulling my hair out trying to get the Auth0 implementation working
@codyavila thanks for your feedback.
Indeed the demo uses a BrowserRouter too, but I can't remember if it's required or not. @djhi Do you remember? If it is indeed required, then we should definitely mention this in the docs!
Regarding the other issues you had with the implementation, I'm sorry to read about them. Could you please elaborate a bit on the pain points you faced? Maybe there are things we can improve in the code or in the docs.
Feel free to open a new issue if you see it fit.
Thanks a lot.
I think adding the BrowserRouter wrapper into your docs would fix all of the pain points I had! I mostly just had to do with the handleCallback() function not firing as mentioned above.
Thanks for the hard work!
Indeed it is, we'll fix the documentation
hi, same here... infinite loop
Let's reopen until the doc is fixed
Awesome. That fixed everything.
Is it not possible to use the HashRouter with Auth0?