The Complete Guide to React Authentication with Auth0

Blog Discussions
#84

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?

#85

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.

#86

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: https://stackoverflow.com/questions/63537913/auth0-does-not-persist-login-on-page-refresh-for-email-password

@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
#87

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.

#88

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

#89

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

#90

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

#91

Are you getting this error from running the starter sample?

#92

Both are Client and Server in npm start

#93

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

#95

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

#96

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

#97

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?

#98

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
#99

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.

#100

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

1 Like
#101

I am having an issue with the ProtectedRoute component that doesn’t exist if I use withAuthenticationRequired directly in the export statement of the component that I am trying to protect. I have a web app that contains routes like the following:

<Router>
 {isAuthenticated && <Header />}
  <Switch>
    <Route exact path='/'>
      {isAuthenticated ? <Redirect to="/home" /> : <LandingPage />}
    </Route>
    <ProtectedRoute path='/home' component={Home}/>
    <ProtectedRoute path='/events' component={Events}/>
    <ProtectedRoute path='/dates' component={Dates}/>
  </Switch>
</Router>

And my Home component contains something like the following:

function Home(){
  return <div className="home-page">
    <Sidebar />
    <ProtectedRoute path={"/home/dogs"} component={Dogs}/>
    <ProtectedRoute path={"/home/cats"} component={Cats}/>
    </div>
}

export default Home;

The bug also happens when the Home component doesn’t use ProtectedRoute like so:

function Home(){
  return <div className="home-page">
    <Sidebar />
    <Route path={"/home/dogs"} component={Dogs}/>
    <Route path={"/home/cats"} component={Cats}/>
    </div>
}

export default Home;

This creates an error that I can’t really explain, but it prevents the state within the Sidebar component from changing the sidebar’s appearance and rendered components.

Here is a link to a codesandbox on how the sidebar should work (no auth0).

When using ProtectedRoute as in the code above, the active class on the navbar links changes, but the rest of the content stays the same.

However, if I instead take the ProtectedRoute off of the Home component, but use withAuthenticationRequired on the export of the Home component, like so:

export default withAuthenticationRequired(Home, {
    onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});

and

    <Route path='/home' component={Home}/> //instead of ProtectedRoute

Then everything works as it should.

My questions are:

  1. Why is the ProtectedRoute component behaving differently from when withAuthenticationRequired is at the export level?
  2. Do I need to protect routes that are nested within a protected route?

Thanks for any help!