Auth0 React SDK "Login with Google" doesn't persist session between routes

[lp22]

Hello,
I am using auth0 SDK with a React App: “@auth0/auth0-react”: “^1.3.0”
My app is based on React sample app
Everything works fine, except when users "Login with Google ", it doesn’t seem to persist session token when users navigate to a different route. When a new route is clicked it redirects to the auth0 login page.
As mentioned above this app is based on auth0-react-samples project, my routes layout looks like this:

<Router>      
        <Auth0ProviderWithHistory>            
            <NavBar></NavBar>
                <div className="app-content">
                    <Switch>
                        
                        <ProtectedRoute path="/home" component={Home}></ProtectedRoute>
                        <ProtectedRoute path="/notes" component={NotesView}></ProtectedRoute>
                        <ProtectedRoute path="/todos" component={ToDosView}></ProtectedRoute>
                        <Route path="/">
                            <Home />
                        </Route>
                    </Switch>                        
                </div>  
                </Auth0ProviderWithHistory>         
          </Router> 

I should also mention that I am using TypeScript where the sample app is Js, that’s the only major difference.

So how come “Login with Google” doesn’t seem to work between routes? Did anyone else experience this issue?

[stephanie.chamblee]

Hi @lp22,

Welcome to the Community!

Have you set up your own credentials with Google? If you happen to be using the default settings with the Auth0 developer keys, authentication will not persist (the developer keys are for temporary testing purposes only).

https://auth0.com/docs/connections/social/google

Related FAQ: Why is authentication lost after refreshing my single page application? - #2