Auth0 client is null in React Component on page refresh

Hi, I have my a ReactJs App based in the QuickStart that Auth0 recommends here(https://auth0.com/docs/quickstart/spa/react), the problem that I have been facing is that in my react component I have something like this:

import React from "react";
import { useAuth0 } from "../react-auth0-spa";
import authProvider from '../authProvider'
import LoginForm from '../components/LoginForm'


const LoginPage = () => {
  const { isAuthenticated, loginWithRedirect } = useAuth0();

  return (
    <div>
      {!isAuthenticated && (
        <LoginForm/>
      )}

      {isAuthenticated && 
        <div> you are logged in</div>
      }
    </div>
  );
};

export default LoginPage;

so where is the problem?
when I refresh the page it log me out automatically, and I’ve been reading a lot of forums trying to get an answer, I read that using getTokenSilently function will works to solve this problem, the thing is that when I call that function I get an error, saying:

“TypeError: Cannot read property ‘getTokenSilently’ of undefined”

and I don’t know, how can the app knows that I’ve logged in so when I refresh the page it stills having me inside my app.

In advance thank you for your help.

Where in your code do you call the getTokenSilently() and how?

There’s a github issue about the same error message, not sure if you’ve checked that and the comments on there already, maybe they’re relevant for your case as well.

It is suppossed that auth0 manage in it owns the getTokenSilently when the page is refreshed, I’ll describe each step to reproduce the error I’m getting:

  1. First my app gets into this component

     import React from 'react';
     import { useAuth0 } from "../react-auth0-spa";
     import { withStyles, createStyles } from '@material-ui/core/styles';
     import CardActions from '@material-ui/core/CardActions';
     import Button from '@material-ui/core/Button';
     import CircularProgress from '@material-ui/core/CircularProgress';
     import fondo from '../img/fondo.jpg'
    
     const styles = ({ spacing }) =>
         createStyles({
             button: {
                 width: '100%',
             },
             icon: {
                 marginRight: spacing.unit,
             },
         });
    
     const LoginForm = ({ classes, userLogin }) => {
         const { loginWithRedirect, loading, user } = useAuth0();
    
         const handleLogin = () => {
             loginWithRedirect();
             
         };
    
         return (
             <div
             style={{
                 height: '100%',
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
                 background: `url(${fondo})`
             }}>
                 <CardActions>
                     <Button
                         variant="contained"
                         type="submit"
                         color="primary"
                         onClick={handleLogin}
                         disabled={loading}
                     >
                         {loading && (
                             <CircularProgress
                                 size={18}
                                 thickness={2}
                             />
                         )}
                         LogIn
                     </Button>
                 </CardActions>
             </div>
         );
     }
    
     export default LoginForm;
    
  2. then I click the LogIn button

  3. then I login with auth0, then I return to my page and shows me the component that it has to show me, where I have a LogOut Button like this:

     import React, { forwardRef } from 'react';
     import MenuItem from '@material-ui/core/MenuItem';
     import ExitIcon from '@material-ui/icons/PowerSettingsNew';
     import { useAuth0 } from "../react-auth0-spa";
    
     const MyLogoutButton = forwardRef((props, ref) => {
         const { isAuthenticated, logout } = useAuth0();
         const handleClick = () => {
             logout();
         }
         return (
             <MenuItem
                 onClick={handleClick}
                 ref={ref}
             >
                 <ExitIcon /> Logout
             </MenuItem>
         );
     });
    
     export default MyLogoutButton;
    
  4. I refresh the page

  5. after refreshing the page, I click the logout button and show me this error:

my conclusion about this error is that the auth0Client becomes null, but I don’t understand why and how to solve that.

thank you for helping me

I have solved the issue, and I put in here my error so any with this same issue can solved it.

in the settings of my app in auth0 I have this:

the error was that I put a ‘/’ after the http://localhost:3000

so quitting that ‘/’ solve the issue.

1 Like

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