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)

Most upvoted comments

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.

+18

wrightwriter on Jul 6, 2019

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 returns true 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?

+13

luisrudge on Jul 6, 2019

Did you try what I recommended in the previous comment?

luisrudge on Jul 6, 2019

another soloution for fix is wait loading:

const PrivateRoute = ({ component: Component, path, ...rest }) => {
  const { isAuthenticated, loginWithRedirect, loading } = useAuth0();

  useEffect(() => {
    const fn = async () => {
      // here
      if (loading === false && !isAuthenticated) {
        await loginWithRedirect({
          appState: { targetUrl: path }
        });
      }
    };
    fn();
  }, [isAuthenticated, loginWithRedirect, path, loading]);

  const render = props =>
    isAuthenticated === true ? <Component {...props} /> : <div>loading...</div>;

  return <Route path={path} render={render} {...rest} />;
};

dvvtms on Jul 30, 2019

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.”

wrightwriter on Jul 6, 2019

same problem here

wrightwriter on Jul 5, 2019

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 in Auth0Provider, so the auth0Client is undefined.

I typed the request url to the browser and got the detail about the error from Auth0 error analysis page.

Silent Authentication: ‘does not have a registered origin’

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/>.

NevenLiang on Jul 24, 2019

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.

cburkins on Dec 29, 2019

I can confirm that even when I try just the example, I am still getting the same error.

yirenlu92 on Jul 5, 2019

another soloution for fix is wait loading:

const PrivateRoute = ({ component: Component, path, ...rest }) => {
  const { isAuthenticated, loginWithRedirect, loading } = useAuth0();

  useEffect(() => {
    const fn = async () => {
      // here
      if (loading === false && !isAuthenticated) {
        await loginWithRedirect({
          appState: { targetUrl: path }
        });
      }
    };
    fn();
  }, [isAuthenticated, loginWithRedirect, path, loading]);

  const render = props =>
    isAuthenticated === true ? <Component {...props} /> : <div>loading...</div>;

  return <Route path={path} render={render} {...rest} />;
};

Worked like a charm for me. Thanks!

kibblator on Aug 6, 2019

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.

yirenlu92 on Jul 6, 2019

@frederikprijck fixed here: https://github.com/auth0/auth0-spa-js/pull/66

luisrudge on Jul 11, 2019