Remember logged in user with React

I took the template to start with auth0 and React SPA. It works fine.

After refreshing the page I can’t get the previous logged-in user. (to do so I have to loginWithRedirect() that works fine).

I don’t want the user to force login, but if the user was logged in and refreshes the page I want the user to be logged in automaticly.

How to do so?

Hi @ReneCode

Though the reference app on this Github issue has changed a little bit since then, the code snippet on the issue should be helpful.

After page refresh and the components are mounted, you need to call getTokenSilently(). If there is a valid session for the user, this will return the tokens.

2 Likes

hi @Saltuk,
thanks for your hint - but unfortunately it does not work.
I use it with react, so using @auth0-react package.

after refresh the page it throws an error Login required.
try-catch that error does not help.

How can I check if there is a valid session ?

  const { isLoading, getAccessTokenSilently } = useAuth0();
  useEffect(() => {
    const callAPI = async () => {
        const token = await getAccessTokenSilently();
    };
    if (!isLoading) {
      callAPI();
    }
  }, [isLoading, getAccessTokenSilently]);

Hi @ReneCode

Could you send me a sample HAR file with a direct message showing the issue? Please capture the initial login as well as the silent token renewal request after the page refresh that fails. You may find how to capture the HAR file here.

Hi, @ReneCode I’m sharing a brief note as the issue was resolved by switching the application to support refresh tokens and storing the tokens in the local storage. React SDK is using the auth0-spa-js so the following links were useful.

2 Likes

I think a hint in the “Quick Start” repo would be helpful

may be I will create a PR.

1 Like

Thanks! Please share the link to it once you have it so we can share it with the repo maintainers!

(The circleci checks seems to be “hanging”.)

Thanks for raising this @ReneCode; I have responded on the GitHub PR but will relay my answer here as well so that it’s more widely available.

For posterity, the documentation you would like to the sample reads:

By default the token is stored in memory
If you want to be logged in automaticly after refreshing the web-page
the token has to be stored in “localstorage”

This unfortunately doesn’t tell the whole story about why a user might not be automatically logged in on page refresh, and it only delays the problem. What I mean is that there are a few reasons why you might not be automatically signed in on page refresh, including:

  • Third-party cookies being blocked in the browser (Safari, Brave, etc)
  • Classic login page being used with a social provider (such as Google)
  • Improper configuration in your Auth0 app

Also, when the token you’re storing in local storage expires, you will end up in exactly the same situation as you are now. To properly support automatic login across page refreshes in browsers that block third-party cookies, you will need to use rotating refresh tokens, or use a custom domain (a paid feature).

The point is, that there are many caveats to this problem that is difficult to convey in a code comment and the information would be better boosted elsewhere. For example, we could instead provide a link to more information on the SDK docs for cacheLocation (https://auth0.github.io/auth0-react/interfaces/auth0provideroptions.html#cachelocation).

Today, we cover this information in our auth0-spa-js FAQ which is linked to in the readme for this sample, as well as the FAQ for auth0-react (which we don’t link to currently, but I will raise a PR to change that).

I can appreciate that the documentation could have been missed or confusing, as it’s not obvious that many of the responsibilities of the React library are delegated to the Auth0 SPA SDK under the hood, but that’s an area I’m going to look at now to see how we can clear that up.

1 Like

Thanks for addressing this one @steve.hobbs!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.