`useIsAuthenticated` is misleading when it returns `false`

[devinrhode2]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

4.26.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

3.0.21

Public or Confidential Client?

Public

Description

Rename useIsAuthenticated to useAuthStatus - return a union of states

I got bit by this for a second.

Would be nice if this useIsAuthenticated was removed, as I believe it's a little footgun for devs. Because if it returns "false" you assume that means a user is PLAINLY not authenticated. However, "false" here actually means "could be pending or not-authenticated"

I feel I should not have to write this wrapper:

/**
 * Returns an `authStatus` - we could call this "useAuthStatus" ...
 *
 * ... but if some lowly dev tries to import `useIsAuthenticated` ...
 * I WANT them to also see this alternative! Because useIsAuthenticated has this edge case on page load.
 */
const useIsActuallyAuthenticated = () => {
  // Mirrored this sample code: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/fad431f4c2f8b67f4db30bfa73ac2aeb13c54641/samples/msal-react-samples/typescript-sample/src/ui-components/SignInSignOutButton.tsx#L8
  // When the sample code changes for a major library update, this code should also be updated.
  const { inProgress } = useMsal()
  const isAuthenticated = useIsAuthenticated()

  if (isAuthenticated) {
    return 'authenticated'
  } else if (
    inProgress !== InteractionStatus.Startup &&
    inProgress !== InteractionStatus.HandleRedirect
  ) {
    // inProgress check prevents sign-in button from being displayed briefly after returning from a redirect sign-in.
    // Processing the server response takes a render cycle or two
    return 'not-authenticated'
  } else {
    return 'pending'
  }
}

Error Message

No response

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
  auth: {
    // [redacted clientId and entityId]
    redirectUri: '/oauthcallback', // maybe in future we change this, if we have a good reason.
    postLogoutRedirectUri: '/',
  },
  system: {
    allowPlatformBroker: false, // Disables WAM Broker
  },
}

Relevant Code Snippets

const isAuthenticated = useIsAuthenticated() inside of <MsalProvider ... />

Reproduction Steps

It's just a readability/usability issue.

Expected Behavior

useIsAuthenticated should not return something else a few render cycles later.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response