Edit

Share via

Tutorial: Support web fallback in native authentication JavaScript SDK

Applies to: White circle with a gray X symbol. Workforce tenants Green circle with a white check mark symbol. External tenants (learn more)

This tutorial demonstrates how to acquire security tokens through a browser-based authentication where native authentication isn't sufficient to complete the authentication flow by using a mechanism called web fallback.

Web fallback allows a client app that uses native authentication to use browser-delegated authentication as a fallback mechanism to improve resilience. This scenario happens when native authentication isn't sufficient to complete the authentication flow. For example, if the authorization server requires capabilities that the client can't provide. Learn more about web fallback.

In this tutorial, you:

  • Check isRedirectRequired error.
  • Handle isRedirectRequired error.

Prerequisites

Check and handle web fallback

One of the errors you can encounter when you use the JavaScript SDK's signIn() or SignUp() method is result.error?.isRedirectRequired(). The utility method isRedirectRequired() checks the need to fall back to browser-delegated authentication. Use the following code snippet to support web fallback:

const result = await authClient.signIn({
         username,
     });

if (result.isFailed()) {
   if (result.error?.isRedirectRequired()) {
      // Fallback to the delegated authentication flow.
      const popUpRequest: PopupRequest = {
         authority: customAuthConfig.auth.authority,
         scopes: [],
         redirectUri: customAuthConfig.auth.redirectUri || "",
         prompt: "login", // Forces the user to enter their credentials on that request, negating single-sign on.
      };

      try {
         await authClient.loginPopup(popUpRequest);

         const accountResult = authClient.getCurrentAccount();

         if (accountResult.isFailed()) {
            setError(
                  accountResult.error?.errorData?.errorDescription ??
                     "An error occurred while getting the account from cache"
            );
         }

         if (accountResult.isCompleted()) {
            result.state = new SignInCompletedState();
            result.data = accountResult.data;
         }
      } catch (error) {
         if (error instanceof Error) {
            setError(error.message);
         } else {
            setError("An unexpected error occurred while logging in with popup");
         }
      }
   } else {
         setError(`An error occurred: ${result.error?.errorData?.errorDescription}`);
   }
}

When the app uses the fallback mechanism, the app acquires security tokens by using the loginPopup() method.

Related content