microsoft-authentication-library-for-js: Redirect URL in hybrid (cordova) app results in error

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.27.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.4.3

Description

I’m trying to leverage msal-react within a hybrid app using Cordova. Web is working great but I can’t figure out what redirectUri to specify to get it working in the hybrid app (web view). I’ve leveraged the react B2C sample, modified slightly to test this out in our hybrid app.

The issue I’m having is getting the hybrid app to recognize the redirectUri, which is specified in our App Registration under Single-Page Application Redirect URIs.

Error Message

Running the hybrid app locally with my Android device connected up to Chrome, I get a “Webpage not available” error with ERR_NAME_NOT_RESOLVED.

If I “refresh” the hybrid app in Dev Tools while on the error message screen the error goes away and my app refreshes and I’m logged in so it looks like msal-react is grabbing the hash from the location.path, just can’t figure out how to handle redirectUri to prevent the initial error.

Msal Logs

No response

MSAL Configuration

auth: {
    clientId: "our-client-id",
    authority:
      "https://our-custom-b2c.domain/our-tenantid.onmicrosoft.com/b2c_1a_our-policy",
    knownAuthorities: ["https://our-custom-b2c.domain"],
    redirectUri: "https://our-app/", // which is listed in our B2C app registration
    postLogoutRedirectUri: "https://our-app/logout",
    navigateToLoginRequestUrl: true
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
    secureCookies: true
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      }
    }
  }

Relevant Code Snippets

import React from "react";
import { useMsal } from "@azure/msal-react";
import { loginRequest } from "../util/authConfig";

const LogInButton = () => {
  const { instance } = useMsal();

  const handleLogin = async () => {

    instance
      .loginRedirect(loginRequest)
      .then((response) => {
        console.log("login successful", response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <React.Fragment>
      <button
        className="btn btn-primary"
        onClick={handleLogin}
        type="button"
      >
        Login Redirect
      </button>
    </React.Fragment>
  );
};

export default LogInButton;

Reproduction Steps

Leveraging the React B2C sample app:

1. build app and run on android device

   `cordova run android --device`
   

2. Once app opens on device, select Login Redirect button, which executes msalInstance.loginRedirect(msalConfig)

3. Sign in using my userid/password

4. B2C redirects back to app, which is when I get the error: ERR_NAME_NOT_RESOLVED

5. Select Refresh in DevTools, note that the app indicates I’ve logged in. I can navigate to the Protected sample to get see the data

Likewise, if I specify our “web” redirectUri for the hybrid apps, I’m able to login but I end up having to “refresh” or select the login button again for react to recognize that I’ve authenticated.

Expected Behavior

I would expect the hybrid app to handle the redirectUri like it does for the web browser.

Identity Provider

Azure B2C Custom Policy

Browsers Affected (Select all that apply)

Other

Regression

No response

Source

External (Customer)