react-sdk: isUserLoading becomes false before user and is Authenticated are set as expected

[jeff-scifin]

Here is a reproduction:
https://mx3nlt.csb.app/

Upon successful login, the AuthProvider will set isSessionLoading to false, then set isUserLoading to false, and then there is a delay before isAuthenticated becomes true and the user object is set. This make it very difficult to reliably use these values for redirection to an authentication route.

Code is based on example from the sdk page:

import { Descope, useDescope, useSession, useUser } from "@descope/react-sdk";
import { useCallback } from "react";

const AppContent = () => {
  // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context,
  // and will throw an exception if this requirement is not met
  // useSession retrieves authentication state, session loading status, and session token
  // If the session token is managed in cookies in project settings, sessionToken will be empty.
  const { isAuthenticated, isSessionLoading, sessionToken } = useSession();
  // useUser retrieves the logged in user information

  const { user, isUserLoading } = useUser();
  // useDescope retrieves Descope SDK for further operations related to authentication
  // such as logout

  const sdk = useDescope();

  const handleLogout = useCallback(() => {
    sdk.logout();
  }, [sdk]);

  console.log(
    "isSessionLoading",
    isSessionLoading,
    "isUserLoading",
    isUserLoading,
    "isAuthenticated",
    isAuthenticated
  );

  console.log("user", user);

  if (isSessionLoading || isUserLoading) {
    return <p>Loading...</p>;
  }

  if (isAuthenticated) {
    return (
      <>
        <p>Hello {user.name}</p>
        <button onClick={handleLogout}>Logout</button>
      </>
    );
  }

  return (
    <>
      <p>You are not logged in</p>
      <Descope flowId="sign-in" />
    </>
  );
};

export { AppContent };

[chris4490]

@asafshen @dorsha

[asafshen]

@nirgur can you please take a look 🙏

[nirgur]

During the login process, the SDK first attempts to check if the user is already authenticated.
In your case, this check fails with a 400 response on the refresh call, indicating that the user is not authenticated.

After that, the actual login process begins. Once it completes successfully, the user becomes authenticated.
This initial authentication check followed by the login flow is what causes the delay you’re observing.

If you run the same flow when the user is already authenticated, you’ll notice there is no delay. The SDK immediately sets isAuthenticated to true once the session is loaded, indicating that the user is already authenticated.

[jeff-scifin]

In this scenario the user has been passed through the IDP authentication flow already and has been redirected back to our application. Should the session and user loading logic not handle setting the user object and isAuthenticated boolean? I can work around this behavior by adding a redirection based on isAuthenticated in my login component, but I'd prefer to reroute in the beforeLoad of my route if possible.

[nirgur]

@talaharoni @guyp-descope is it possible to skip triggering a flow in this scenario?

[jeff-scifin]

I suppose if my login flow doesn't proceed until things are ready it may solve the issue, but I'm having to do some hack things in my internal auth service in order to work around this issue.. It should not be the case that isAuthenticated is returned as true from useSession() while at the same getSessionToken() does not return the useres authenticated token.

I'm working to move to cookie based auth which I believe will eliminate this issue for me, but it is a pain point at the moment.