In the React SDK, isLoggedIn set to false on first token expiry and never back to true after a successful refresh

[johnmccalla]

In the React SDK, isLoggedIn set to false on first token expiry and never back to true after a successful refresh

Description

I think the title says it all

Affects package

sdk-react

Affects versions

    "node_modules/@fusionauth/react-sdk": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@fusionauth/react-sdk/-/react-sdk-2.4.0.tgz",
      "integrity": "sha512-jjpsEgkVlPC8+o8qnuV8FqOJjLYMmJ8dEj7DIlT+PquCJPcrvrWkINROgqpmnHwWaF2Q1uCsx3DakJHTjoKb7g==",
      "dependencies": {
        "classnames": "^2.3.2"
      },

Steps to reproduce

Start with this in your or or whatever.

const { isLoggedIn } = useFusionAuth()
useEffect(() => console.log(`isLoggedIn: ${isLoggedIn}`), [isLoggedIn])

Login, and you'll get userInfo: false a couple of times, followed by a userInfo: true. Then once the token expires, you'll see userInfo: false. The network tab confirms the SDK has successfully refreshed the token (and the app.at_exp cookie shows a new expiration time). And then, nothing. The state of isLoggedIn remains false.

Expected behavior

The isLoggedIn state should only be set to false if the token refresh fails, not after the first token expiration.

Community guidelines

All issues filed in this repository must abide by the FusionAuth community guidelines.

Additional context

Looking at the code, it seems that isLoggedIn is initialized to the "core value" here, and the only other setIsLoggedIn call is here, where it is set to false upon exipiration.

[johnmccalla]

So, I don't know if anyone monitors these, but at any rate, I continued to debug this. It turns out the root cause is a combination of two things.

(1) in FusionAuthProvider.tsx, config props are collected with ...config, and used as useMemo dependencies. I don't think this does what the intention was, because it'll always fail the dependency check. The check is done with Object.is() by React, and what you're passing in is a temporary object created by collecting the config arguments. So every call, it'll be different.

function FusionAuthProvider<T = DefaultUserInfo>({
  children,
  ...config
}: PropsWithChildren & FusionAuthProviderConfig) {
  const cookieAdapter = useCookieAdapter(config);

  const core: SDKCore = useMemo<SDKCore>(() => {
    console.log(`SDKCore recreated`)
    return new SDKCore({
      ...config,
      onTokenExpiration: () => setIsLoggedIn(false),
      cookieAdapter,
    });
  }, [config, cookieAdapter]);

(2) This wouldn't be a big deal if it weren't for SDKCore's constructor that does this: this.scheduleTokenExpiration();. This function sets a timer that upon expiring, will cause the React SDK to mark the user as logged out. The intent is that once initAutoRefresh() is called, this will set a slightly shorter timer, use the refresh token to get a new access token, and then reset the token expiration timer to the next expiry time. This works well, but not if the class is recreated, as nothing clears the existing timer. When it expires, user is logged out.

What's happening in practice, I think, is that provider function is being called once at startup. This starts one timer, but not the refresh timer (because user isn't logged in yet). Then isLoggedIn goes to true, this creates a new SDKCore instance, the existing one is still running but isn't used anymore (and thus will call onTokenExpired no matter what). The 2nd SDKCore instance will start "auto refresh". Some milliseconds later though, the /me API will return and the provider function is run a 3rd time to set the userInfo. This starts a 3rd timer. It's unclear to me how these will play together, but it's clear the first one will be bad.

👉🏼 So I'm not sure how this has ever worked, or how it works for anyone at all. I don't think I'm doing anything weird or incorrect (although that's totally possible, of course).

I'm not sure what the best solution is. I've tested simply removing that config dependency, and it solves the issue, but then this would mean that changing the config values after the initial render would not cause an update. Probably fixing SDKCore so it cleans up its timers is a better solution. (But also, the config dependency makes the useMemo completely useless, so there's that too.)

Thank you for adding this issue 🙏

@johnmccalla we have published what we believe is a fix in #161 that was added to the official release in #163

https://www.npmjs.com/package/@fusionauth/react-sdk/v/2.4.1

Please confirm that this solves your issue and we can close.

[sachams]

Hi, I was experiencing the same issue with < 2.4.1. I have just tried it with 2.4.2 and I'm still having the same problem - IsLoggedIn is never set to true after the first token expiry. I can also confirm that I can see successful token refresh calls in the Network tab, but isLoggedIn is never set back to true.