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:
-
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;
-
then I click the LogIn button
-
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;
-
I refresh the page
-
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.
