Auth0-spa-js: React: getTokenSilently() on page load inside useEffect() throws undefined error.

[wrightwriter]

The error is

Unhandled Rejection (TypeError): Cannot read property 'getTokenSilently' of undefined

Works fine after the page is loaded.
Is this intended?

If I'd like to put the token in my redux storage, I'd have to use componentDidMount which is getting depricated by the React team.

[luisrudge]

This SDK doesn't assume anything on how you're going to set this up in your framework of choice. If you need guidance with react, we have an amazing QuickStart here: https://auth0.com/docs/quickstart/spa/react/01-login

[wrightwriter]

You should not be recommending people use this with react if such a simple task can not be accomplished.
This is a major headache.

[luisrudge]

I'm not saying it can't be done. It can, and do that in our QuickStart (https://auth0.com/docs/quickstart/spa/react/01-login). We even have an amazing wrapper that makes it super simple to integrate this library with your react app: https://auth0.com/docs/quickstart/spa/react/01-login#install-the-auth0-react-wrapper

[wrightwriter]

I have been reading through your tutorial routinely for the past 4 days. It does not say how to fetch a token in useEffect.

Also, you should mention on your "Database Action Scripts" that if you have an error in your last script, and you execute your first script, it will throw error from last one.
Plus, your mongodb templates are bad.

[luisrudge]

@wrightwriter
This example shows how you can use getTokenSilently when calling an API: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#call-the-api.

If you want to use it inside a useEffect block, you just have to make sure you don't call it when loading is true:

useEffect(() => {
    const callAPI = async () => {
      const token = await getTokenSilently();
      console.log(token);
    };
    if (!loading) {
      callAPI();
    }
  }, [loading, getTokenSilently]);

[wrightwriter]

Oh thank you, that was it. I guess I should have read the code for react-auth0-wrapper.js to undestand what loading means.

[npearson72]

@wrightwriter
This example shows how you can use getTokenSilently when calling an API: https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#call-the-api.

If you want to use it inside a useEffect block, you just have to make sure you don't call it when loading is true:

useEffect(() => {
    const callAPI = async () => {
      const token = await getTokenSilently();
      console.log(token);
    };
    if (!loading) {
      callAPI();
    }
  }, [loading, getTokenSilently]);

I know this is an old thread, but as I'm learning about Auth0 with React, I commonly see this pattern of passing getTokenSilently into the second argument array for useEffect.

I'm trying to understand why this is needed. From the React docs this argument should only take values that change:

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Here's another example where the Auth0 team is suggesting passing the getTokenSilently function to the second argument of useEffect:

https://github.com/auth0/auth0-react#call-an-api

Can someone explain?