React with Auth0 SPA looses login after refresh

Hello, I’m new to Auth0 but it’s about 3 days that I am struggling with the page reload issue:

  1. create a brand new Auth0 App in a brand new Auth0 account (just to be sure that I don’t have any custom setting into the way)
  2. using the “quick start”, I download the app, check that it has the correct App id, and run it as described (yarn start)
  3. following the “quick start” notes, I apply the http://localhost:3000 setting to Allowed Callbacks, Web Origins and Logout

The behavior is that I can easily login/logout, but when I perform a full page reload the app doesn’t persist the login at all.

I’m reading a lot about the fact that the SDK should handle it automagically, and I expect some form of cookie or secure-cookie to be placed by Auth0, but the only cookie I see “auth0.is.authenticated” contains only a boolean value which seems always to be set to “true”.

At this point, I really don’t understand what I’m doing wrong here.
Can you help me?

2 Likes

Hi @marcopeg Welcome to Auth0 Community

That is correct. I just tested this with a fresh install and page reload keeps the user logged in. Can you tell us what browser and version you are testing this with? If you can post a HAR file (remember to remove all confidential things like user email/pwd) or post a screen shot of your network traffic via chrome devtools network tab? Essentially you should be seeing /authorize call with prompt=none param and subsdquent websocket and /oauth/token calls that refreshes the tokens for logged in user via silent login.

1 Like

Hello and thank you for coming back to this issue.

After quite some time I got to a working demo and I don’t really know whether to feel embarrassed or a bit pissed :slight_smile:. I explain:

Google auth looses the auth status on page refresh because the default Auth0 connection is not correctly setup with a Google app. I need to go through the Google side of the configuration to have it properly working.

With hindsight this seems very obvious, but while I was just trying to follow the Auth0 instructions this caused me struggle and frustration.

Could it be the case that this detail need to be better highlighted in the Auth0 SDK doc?

5 Likes

I agree this should be highlighted in the docs. I ran into the same problem myself.

3 Likes

In reactjs, it will be useful to use the https instead http.

1 Like

Thanks for feedback! I’m gonna relay that to our docs team right away!

same issue, use username/password works, default google connection not work.
After set google connection, add clientId and securate from google, it works

Hi, I faced same issue as you and I have stuck in it for 3 days. May I ask what’s the solution for this? What setting should we make change in order to make it work?

Yep, this just bit me too. Spent an hour looking for the answer and I found it on one of these community posts instead of the official documentation. The solution is wthat @marcopeg mentioned: You have to register your Google App by following these instructions:

https://auth0.com/docs/connections/social/google?_ga=2.126515469.1037018814.1598080903-828646138.1597388276

Otherwise, Auth0 will be using developer keys which won’t persist the session.

This should really be included on the React application quickstart documentation.

5 Likes

Thanks a lot for sharing this with the rest of community!

I’ll make sure to relay that feedback to appropriate team.

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