Having to call getAccessTokenSilently() to refresh the auth state

Help
,
1

Hello! :slight_smile:

I have a problem where I seem to have to call getAccessTokenSilently() in order to get a dormant authentication going again. If I’m not it settles at { isLoading: false, isAuthenticated: false }. This only happens after some day or so.

My provider is configured like so:

    <Auth0Provider
      domain={config.auth0.domain}
      clientId={config.auth0.clientId}
      redirectUri={window.location.origin}
      audience="<omitted in this post>"
      prompt="select_account"
      onRedirectCallback={(state) => {
        state?.callbackURL && navigate(state.callbackURL);
      }}
      cacheLocation={
        config.auth0.cacheLocation === "localstorage"
          ? "localstorage"
          : "memory"
      }
      useRefreshTokens
    >
      <View>{props.children}</View>
    </Auth0Provider>

I also have this hook that is dealing with all the auth stuff and reducing the state to a simple:

type Model = "loading" | "logged-out" | "logged-in";

let axiosInterceptorId: number;

function useModel(): Model {
  const auth = useAuth();
  const [model, setModel] = useState<Model>("loading");

  // If the state has settled to an unauthenticated state,
  // try to re-authenticate by getting the access token.
  useEffect(() => {
    if (!auth.isLoading && !auth.isAuthenticated) {
      auth.getAccessTokenSilently()
    }
  }, [auth]);

  useEffect(() => {
    if (auth.isLoading) {
      setModel("loading");
    } else if (auth.isAuthenticated) {
      axios.interceptors.request.eject(axiosInterceptorId);
      axiosInterceptorId = axios.interceptors.request.use(async (config) => ({
        ...config,
        headers: {
          ...config.headers,
          Authorization: `Bearer ${await auth.getAccessTokenSilently()}`,
        },
      }));
      setModel("logged-in");
    } else {
      axios.interceptors.request.eject(axiosInterceptorId);
      setModel("logged-out");
    }
  }, [auth]);

  useEffect(() => {
    if (auth.error) console.error(auth.error);
  }, [auth.error]);

  return model;
}

I assume I’m doing something wrong and would love some assistance :pray:

Regards,
Martin