auth0-react: isLoading & isAuthenticated are false & user is undefined after login
Describe the problem
Provide a clear and concise description of the issue
isLoading & isAuthenticated are false & user is undefined after login in useAut0
hook, so loginWithRedirect enter. in a loop with this kind of effect on. routing
const { isAuthenticated, loginWithRedirect, isLoading } = useAuth();
useEffect(() => {
if (isAuthenticated || isLoading) return;
loginWithRedirect({
appState: { targetUrl: url },
});
}, [isAuthenticated, loginWithRedirect, url, isLoading]);
What was the expected behavior?
expect that isAuthenticated return true (user setted) synchronous after loading state in order to avoid this tricky state.
Reproduction
Detail the steps taken to reproduce this error, and whether this issue can be reproduced consistently or if it is intermittent. Note: If clear, reproducable steps or the smallest sample app demonstrating misbehavior cannot be provided, we may not be able to follow up on this bug report.
using this implementation https://auth0.com/blog/complete-guide-to-react-user-authentication/ with custom private route that check authenticated state before redirect
Can the behavior be reproduced using the React SDK Playground?
If so, provide steps:
App is wrapped with
const Auth0ProviderWithHistory = ({ children }) => {
const history = useHistory();
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={AUTH0_DOMAIN}
clientId={AUTH0_CLIENT_ID}
audience={AUTH0_AUDIENCE}
login_hint={AUTH0_DB_CONNECTION}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
};
AuthRoute is like
const AuthRoute = (props) => {
const { url } = useRouteMatch();
const { isAuthenticated, loginWithRedirect, isLoading } = useAuth();
useEffect(() => {
if (isAuthenticated || isLoading) return;
loginWithRedirect({
appState: { targetUrl: url },
});
}, [isAuthenticated, loginWithRedirect, url, isLoading]);
switch (true) {
case isLoading:
return <Loader isCover />;
case isAuthenticated:
return <Route {...props} />;
default:
console.info('You need to log in to access this part');
// TODO: return specific page ?
return <div>Redirecting you to the login...</div>;
}
};
Environment
Please provide the following:
- Version of
auth0-react
used: “@auth0/auth0-react”: “^1.1.0”, - Which browsers have you tested in? all
- Which framework are you using, if applicable (Angular, React, etc): react
- Other modules/plugins/libraries that might be involved: none
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 20 (8 by maintainers)
For anyone else coming here, to fix these issues in my react & react-router-dom app I had to
Follow most of the instructions above including using a redirectUri that was not the root of my app like
/callback
add this to `<Auth0Provider:
Use this as my onRedirectCallback:
Manually set the returnTo on login:
In the Auth0 dashboard the callbackUrl and allowedWebOrigins had to match the root of my react app.
Great, glad you got it working @EddieGr - good catch @frederikprijck!
Gotit,
BrowserRouter
was underAuthProvider
sohistory.push
wasn’t defined and redirection was not fired@EddieGr Doesnt sound related to this issue. But please make sure that
openid
is sent as scope to the /authorize endpoint.