I am using the auth0-react SDK’s useAuth0 hook in a Nextjs app. I want to create an API client, which relies on the “isAuthenticated” and “getAccessTokenSilently” variables returned by the hook. For now I’m just trying to get my code to detect changes in isAuthenticated, which it seemingly cannot. Here is code from my login page:
const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
console.log(`external isAuthenticated: ${isAuthenticated}`);
useEffect(
() => console.log(`isAuthenticated: ${isAuthenticated}`,
[isAuthenticated]
);
When my application loads, both of these console statements run and show isAuthenticated as false. After I log in, though, and the user profile, which only renders when isAuthenticated is true, is indeed rendered these console logs run again and still show isAuthenticated as false, although I can see from the React Dev Tools that isAuthenticated is updated to true in the Auth0 provider. That update of isAuthenticated to true somehow is not triggering my code that should react to that change.
Important details: other Nextjs pages in my app that are loaded after login DO read the updated hook values (e.g. isAuthenticated is true). Also, I am not calling getAccessTokenSilently before isAuthenticated becomes true.
Thank you for your help.