getTokenSilently throws Timeout error

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]

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