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(Auth0 React SDK Quickstarts: Login), 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.

https://github.com/auth0/auth0-spa-js/issues/58

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.