How to Use Same Bearer Token Between Two Different Azure Tenants

I have an SPA application built with React and the API consumed by this app is built as Azure Functions. The SPA application is authenticating users using the Microsoft Authentication Library (MSAL) and ADB2C that is configured on one Azure Tenant while the Azure Functions are published to another Azure Tenant. So the main challenge here is, how can we authenticate the logged-in user in Azure Functions without prompting him to provide any additional login steps, since he is already logged in to the react app. 

Basically, our target solution should use the same Bearer token generated by the MSAL from the react application and post it in the header of every API call to the Azure Functions and we should use the Identity Provider in the Azure Functions App to handle the validation of the posted token. 

In this article, we will not go through the steps to register an app, configuring the authentication policies. We will focus on learning how to use one bearer token between two different tenants. This mechanism will secure the Azure Functions published on one tenant using the same bearer token generated by the ADB2C configured on the second tenant. 

Let’s simplify the case with the following diagram:

The Microsoft Authentication Library (MSAL) enables us to acquire bearer tokens from the Microsoft identity platform which is ADB2C in our case in order to authenticate users and allow for accessing secured pages and resources. It is straight forward to use this token within the same tenant. However, it will be become tricky when we want to access resources that are hosted on another tenant, in same time we don’t want to prompt users any additional login screens since they are already logged in to our app. 

Here is what Azure is offering us in order to consume the Azure functions hosted on tenant B in a secure manner.

• Login to Azure Portal of Tenant (B)
• Then go to the Azure Function App
• Click on Authentication
• Then Click “Add Provider”

• Then select “Microsoft” from the identity providers list

• Then provide the Tenant ID, App ID, Client Secret of the SPA registered app from Tenant (A). 
• As for the issuer URL we need to get it from the ADB2C sign-in user flow , Tenant (A). As per the following screenshot:

After configuring the identity provider for the Azure Function App, we need to make sure that we are sending the bearer token in the header of every request we are sending to the Azure Function, if you try to call the Azure Function without the bearer token you should receive access denied error. Here is a sample code showing how to consume the Azure functions in a secure manner:

instance.acquireTokenSilent({
   ...loginRequest,
   account: accounts[0]
}).then((accessTokenResponse) => {
   var requestOptions = {
      method: 'GET',
      headers: {
         'Authorization': 'Bearer ' + accessTokenResponse.idToken
      }
   };
   var fetchURL = "this is the url of the Azure function";
   fetch(fetchURL, requestOptions)
      .then(resp => resp.json())
      .then(resp => {
         //add code to handle returned data
      })
      .catch(error => { console.log('error', error); })
});

Do you have better solution? Please share it in the comments.