okta-react

okta-react copied to clipboard

This is an edge case where, when a user is going through the redirect loop they end up in this state:

{isPending: true, isAuthenticated: null, idToken: null, accessToken: null}
{isPending: true, isAuthenticated: null, idToken: null, accessToken: null}
{isAuthenticated: false, idToken: undefined, accessToken: undefined}
{isAuthenticated: false, idToken: undefined, accessToken: undefined}
{isAuthenticated: false, idToken: undefined, accessToken: undefined, isPending: true}

So there's a brief second where the user is in an indeterminate state. They are not authenticated, but it's not pending, but a few seconds later they are pending? I have not yet been able to find an instance where you can be !isAuthenticated and also !isPending or !error.

Can you help me understand why this happens? How to overcome it? I really don't like having to look at !authState.isAuthenticated because it opens us up to edge cases. This logic check ensures the user does not see a brief error message flash over the screen while they redirect.

export const AuthGate: React.FC = (props) => {
  const { authState, authService } = useOktaAuth();

  useEffect(() => {
    if (
      !authState.isAuthenticated &&
      !authState.isPending &&
      !authState.error
    ) {
      authService.login();
    }
  }, [authState.isPending, authState.isAuthenticated]);

// This is where we could shoot ourselves in the foot.
  if (authState.isPending || (!authState.error && !authState.isAuthenticated)) {
    return console.log('logging in');
  }

  if (authState.error) {
    return console.log('errored');
  }

  return <>{props.children}</>;
};

@tomspeak https://github.com/okta/okta-react/pull/17 may fix your issue.