auth0-spa-js: TypeError: Cannot read property 'loginWithRedirect' of undefined
Hey guys, I’ve been switching the use the new auth0 login with hooks, when I try to do something very similar to the example, I keep encountering the following error:
TypeError: Cannot read property ‘loginWithRedirect’ of undefined
It appears that auth0Client is never getting set, so I’m never able to call loginWithRedirect on it. My credentials appear to be correct, and I’ve been able to login previously with them, so I’m wondering why that is.
My code:
function Home(props) {
const [value, setValue] = useState("");
const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { sessionSubmitted, setSessionSubmitted } = useState(false);
function handleChange(event) {
setValue(event.target.value);
}
function handleSessionSubmit() {
console.log("we are handling session submit");
console.log(value);
props.history.push({
pathname: "/session",
search:
"?" +
new URLSearchParams({
sessionId: value
}).toString(),
state: {
sessionId: value
}
});
}
return (
<div class="Home">
{" "}
<div className="bar">
<AppBar
position="static"
style={{ background: "transparent", boxShadow: "none" }}
>
<Toolbar>
<div className="title">
<Typography variant="title"> Frindle </Typography>{" "}
</div>{" "}
<Button onClick={() => loginWithRedirect({})}>
{" "}
Sign Up{" "}
</Button>{" "}
<Button onClick={() => loginWithRedirect({})}>
{" "}
Login{" "}
</Button>{" "}
</Toolbar>{" "}
</AppBar>{" "}
</div>{" "}
<div className="sessionForm">
<form onSubmit={handleSessionSubmit}>
<div className="text">
<TextField
name="session"
label="Session ID"
value={value}
onChange={handleChange}
margin="normal"
variant="outlined"
/>
</div>{" "}
<div className="button">
<Button
type="submit"
color="primary"
variant="outlined"
className="button"
>
Submit{" "}
</Button>{" "}
</div>{" "}
</form>{" "}
</div>{" "}
</div>
);
}
export default withRouter(Home);
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 14
- Comments: 42 (15 by maintainers)
okay, just want to let you know that your official tutorial also throws this error for me now. Sometimes it gets fixed by removing node_modules and reinstalling with yarn… I don’t think I will be able to use Auth0, even though I want to, because your tutorial is not working.
I’ll close this issue because the React hook is only part of the sample, not this SDK.
But what I think it’s going on is that you’re not waiting for the
loading
property to be set to false. The hook exposes a loading property that returnstrue
while it’s fetching the necessary data to load (checking if you have a session etc). You can show a loading spinner or something like that when this is true, but you can’t use the library while its setting up.Can you try that and let me know how it goes?
Did you try what I recommended in the previous comment?
another soloution for fix is wait
loading
:Nice, works, thanks for the explanation. Sorry, should have read through the whole tutorial.
But I think your tutorial is misleadingt. You say “At this point, you should be able to go through a complete authentication cycle, logging in and loggin out.”
same problem here
Get the detail about error
When I open the demo in
localhost:3000
, there is always a failed request with status code 400 in console panel.It seems that there is something wrong in initialization of
auth0Client
inAuth0Provider
, so theauth0Client
isundefined
.I typed the request url to the browser and got the detail about the error from Auth0 error analysis page.
Solution
For the initialization problem of
auth0Client
,I go to the setting panel of the application, add
http://localhost:3000
to the Allowed Web Origins field.Now it works, even using
<PrivateRoute/>
.Just a note that the Auth0 tutorial react is still flawed, but glad I found this issue so I could fix it myself. Essentially, at the second checkpoint, it throws the TypeError because loginWithRedirect is not available yet. By adding the “if (loading)” short-circuit to App.js, I was able to fix the problem.
I can confirm that even when I try just the example, I am still getting the same error.
Worked like a charm for me. Thanks!
Hi, I don’t quite understand why/where I would need to check whether the data had loaded. Here I just have a home page with a login button that when clicked I want to go to auth0 to authenticate, and then redirect to another route. Do I need to modify loginWithRedirect? I’m not able to get the NavBar example working either, with the same error, and there is no check for loading there.
@frederikprijck fixed here: https://github.com/auth0/auth0-spa-js/pull/66