getTokenSilently throws Timeout error

[alexandernanberg]

Describe the problem

I have an interval that runs every 15 minutes to update the token stored in React state. But when you leave the tab open overnight it will throw an Timeout error. There isn't any error logged to the Auth0 logs.

What was the expected behavior?

No error thrown

Reproduction

It's quite hard to reproduce since you need to wait for a while. Here is a simplified example of the code I'm using.

So run this and let it be in the background for a while (computer might need to be asleep) and then when you open it up there will be a runtime error thrown.

export function AuthProvider({
  audience,
  checkSessionInterval = CHECK_SESSION_INTERVAL,
  children,
  clientId,
  domain,
  scope = 'openid profile email',
}) {
  const [state, dispatch] = useReducer(authReducer, initialState);
  const auth0 = useConstant(
    () =>
      new Auth0Client({
        audience,
        domain,
        scope,
        client_id: clientId,
        redirect_uri: window.location.origin,
      })
  );

  const logout = useCallback(() => {
    auth0.logout({ returnTo: window.location.origin });
  }, [auth0]);

  const checkSession = useCallback(async () => {
    try {
      const searchParams = new URLSearchParams(window.location.search);
      if (searchParams.has('code') && searchParams.has('state')) {
        const { appState } = await auth0.handleRedirectCallback();
        window.history.replaceState(
          {},
          document.title,
          window.location.pathname
        );
      } 
      const token = await auth0.getTokenSilently();

      const user = await auth0.getUser();
      const payload = {
        token,
        auth0Id: user.sub,
        email: user.email,
        isAuthenticated: !!user,
      };
      dispatch({ type: RECEIVE_SESSION, payload });
    } catch (error) {
      if (RECOVERABLE_ERRORS.includes(error.error)) {
        auth0.loginWithRedirect();
        return;
      }
      dispatch({ type: AUTH_ERROR, error });
    }
  }, [auth0]);

  useEffect(() => {
    checkSession();
  }, [checkSession]);

  useInterval(checkSession, checkSessionInterval);

  const context = useMemo(() => ({ ...state, logout }), [logout, state]);

  return <AuthContext.Provider value={context}>{children}</AuthContext.Provider>;
}

And here is the exact error that's thrown

Environment

Please provide the following:

• Version of auth0-spa-js used: 1.12.1
• Which browsers have you tested in? Firefox
• Which framework are you using, if applicable (Angular, React, etc): React
• Other modules/plugins/libraries that might be involved: N/A

[stevehobbsdev]

Thanks @alexandernanberg - we think that this may be resolved in #422. As that PR has not had any progress recently, we're going to take over the work and finish it off. Will report back once it's available.

[stevehobbsdev]

@alexandernanberg We have now released 1.13.1 which includes the change from #422 - could you please give it a try to see if it resolves your issue? Appreciate that it might be hard to determine that.

[alexandernanberg]

@stevehobbsdev We're not using an interval anymore so I won't be able to say unfortunately. I think we can close this since I can't confirm

[BjoernRave]

I still have this problem when using it inside a chrome extension.

These are my options:

{
  client_id: auth0ClientId,
  domain: auth0Domain,
  redirect_uri: redirectUri,
  audience: audience,
  cacheLocation: 'memory',
  useRefreshTokens: true,
}

[stevehobbsdev]

@BjoernRave, if you haven't managed to resolve your problem, please raise a new issue, completing the template and providing a reproducible example (if possible), so that we have all the information we need to help.