Rename `useIsAuthenticated` to `useAuthStatus` - return a union of states

[devinrhode2]

microsoft-authentication-library-for-js/samples/msal-react-samples/typescript-sample/src/ui-components/SignInSignOutButton.tsx

Line 8 in fad431f

const isAuthenticated = useIsAuthenticated();

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'
  }
}

_{Rename useIsAuthenticated to useAuthStatus - return a union of states}

[github-actions]

Invalid Issue Template:
Please open a new issue and use one of the provided issue templates. Thanks!

[devinrhode2]

test