Auth0 client is null in React Component on page refresh

[seguimientoigcsps]

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.

[mathiasconradt]

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.

React: getTokenSilently() on page load inside useEffect() throws undefined error.

[seguimientoigcsps]

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

[seguimientoigcsps]

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.