Azure Ad App Redirect Uri For Chrome Extension

I'm using the Microsoft Authentication Library for JavaScript (MSAL.js) version 1.3.2 in my chrome extension built on React JS. I have two login scenario I need to support in order

Solution 1:

The protocol for chromium extensions is chrome-extension://, so I believe your redirect uri should be: chrome-extension://ihmmiapcpnfpphpdinbmjfglladedjoa/popup.html

Edit: In addition to using the above redirect URI format, you need to ensure the following:

1. The redirect URI is added to your application's redirect URIs in the Azure Portal (under "Mobile and desktop applications").
2. The page used for the redirect URI is included in the web_accessible_resources section of your extension's manifest.json.

Solution 2:

I got this to work by just simply using the Chrome Identity API as shown below:

var redirectUrl = chrome.identity.getRedirectURL()

/*global chrome*/
chrome.identity.launchWebAuthFlow(
  {
    url: 'https://login.microsoftonline.com/<tenant id or just 'common'>/oauth2/v2.0/authorize?' +
      'response_type=token' +
      '&response_mode=fragment' +
      `&client_id=Azure AD Application Client ID` +
      `&redirect_uri=${redirectUrl}` +
      '&scope=openid https://management.azure.com/user_impersonation profile',
    interactive: true
  },
  function (responseWithToken) {
      // the access token needs to be extracted from the response.
  }
);

Additionally, you need to add Identity to permissions in the manifest.js, which is well documented here: https://developer.chrome.com/apps/app_identity