The Complete Guide to React Authentication with Auth0

I have this same issue. Another person said that the URL should be in “Allowed Web Origin” too, but it already is. So, I don’t know what I’m doing wrong. I tried to run the guide in 3 situations:

Adapting it to my project;
Following what is exactly in the guide (using the same starter project);
Using the main branch of the guide.

All of them the login information is not persisted when reloading the page. Any help?

The Complete Guide to React User Authentication with Auth0

I got Unexpected token j in JSON at position 0
at the Get Protected Message

So I am not sure if something is wrong and where.

Who is having the issue that login isn’t persisted when page is refreshed, you’ll need to activate the “Refresh Token Rotation > Rotation” option and add it to your Auth0Provider props. So it’ll be like that (useRefreshTokens and cacheLocation added):

<Auth0Provider
  domain={domain}
  clientId={clientId}
  redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
  useRefreshTokens={true}
  cacheLocation="localstorage"
>
  {children}
</Auth0Provider>

Where did I got help was in this question on StackOverflow: javascript - Auth0 does not persist login on page refresh for email/password - Stack Overflow

@dan-auth0 I think it would be a great idea to add it to the guide to help out who is having this problem.

1 Like

Are you using a linter addon like Eslint/Prettier? So you could know where the problem is. It’s a syntax problem, maybe you have mistyped a bracket or something like that.

Warning: React version was set to “detect” in eslint-plugin-react settings, but the “react” package is not installed. Assuming latest React version for linting.

code: ‘invalid_token’,
status: 401,
inner: JsonWebTokenError: jwt malformed

cc @gwhitdev Are you using social login or username/password login when you get this persistence issue?

Did you experience this issue locally or in a production deployment?

Are you getting this error from running the starter sample?

Both are Client and Server in npm start

Locally. I’m using only username/password. I didn’t try to use social login.

Did you make any modifications to the code samples? I ran them earlier and they are working error free :thinking:

Gotcha! Thanks. What version of the Auth0 React SDK got installed in your project?

Great tutorial and easy to follow!

I actually got a different message when I click on the “GET PUBLIC MESSAGE AND GET PROTECTED MESSAGE BUTTONS”.

The message from both buttons is NetworkError when attempting to fetch resource.

Please, what could I have done differently?

Sorry for the late response, I completely forgot about this issue. Meanwhile, I was rewriting my React app to TypeScript. I was going to confirm the SDK version that I’m using and I tried to remove useRefreshTokens and cacheLocation props that I mentioned above. Turns out that it is working now… I really didn’t change anything. I’m a inexperienced developer and I’m just doing a hobby project, but I really didn’t change anything from the code I wrote before. I’m literally “copying and pasting” my old JS repository and trying to use TS.
Well… Thank you anyway for being so attentive with me. I really don’t know how to feedback you about what happened so we could try to solve this possible issue. It’s curious that this didn’t happen only with me. Anyway, thank you again.

1 Like

Howdy, Uferekalu! Thanks for reading the tutorial.
If you are getting that error message, please be sure that the API has CORS enabled for the client domain. The API sample provided has that in place :thinking: If you are using the sample, try to refresh the page, please.

You are welcome. I am glad that the code is working for you. :+1:

1 Like

A post was split to a new topic: Auth0 Blog React Auth guide assistance

Thank you for a quite superb and comprehensive tutorial.

2 Likes

Glad you really liked it!

Thank you for reading the blog post :pray: I am glad that you liked it :slight_smile: