Authorizing SPA for an API

We have 5 REACT portals and 1 Asp:net Core 3.1 API. We would like to use same API for all portals. They all authorizes through MSAL B2B (react-aad-msal). First I am trying to take one portal to work with one API. For that I have two App Regs (AccountRequestPortal and AccountAPI).

App Reg AccountRequestPortal :

AccountAPI:

Notice I have granted The portal access to the API.

API Configuration:

// Portal 
const msalConfig = {
  auth: {
    authority: 'https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84',
    clientId: '03099206-xxx-e31a9ee8dec5',
    redirectUri: redirectUri
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const authParameters = {
  scopes: [
    "api://03099206-xxx-e31a9ee8dec5/Read"
  ]
}

// API
// const msalConfig = {
//   auth: {
//     authority: 'https://login.microsoftonline.com/a364eb28-e95b-4ad0-a4fb-5b4f7767ad84',
//     clientId: '422132b5-xxx-6651f01a1109',
//     redirectUri: redirectUri
//   },
//   cache: {
//     cacheLocation: "localStorage",
//     storeAuthStateInCookie: true
//   }
// };

// const authParameters = {
//   scopes: [
//     "api://422132b5-xxx-6651f01a1109/Read"
//   ]
// }

API app.settings:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  //API
  "AzureAd": {
    "ApplicationIdUri": "api://422132b5-xxx-6651f01a1109",
    "Authority": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/v2.0",
    "AuthorizationUrl": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/oauth2/v2.0/authorize",
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "422132b5-xxx-6651f01a1109",
    "Domain": "a364eb28-xxx-5b4f7767ad84",
    "TenantId": "a364eb28-xxx-5b4f7767ad84"
  }
  //PORTAL
  //"AzureAd": {
  //  "ApplicationIdUri": "api://03099206-xxx-e31a9ee8dec5",
  //  "Authority": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/v2.0",
  //  "AuthorizationUrl": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/oauth2/v2.0/authorize",
  //  "Instance": "https://login.microsoftonline.com/",
  //  "ClientId": "03099206-xxx-e31a9ee8dec5",
  //  "Domain": "a364eb28-xxx-5b4f7767ad84",
  //  "TenantId": "a364eb28-xxx-5b4f7767ad84"
  //}
}

If I choose to only use the same App Reg for bot the API and the Portal everything works. However if I choose to divide the API and the Portal on two AppRegs I get an 401. Even if I have provided access to the Portal AppReg to the ApiReg Am I missing something?

From your description, you want to use a client app AccountRequestPortal to call the API AccountAPI.

If so, you need to expose the API scope in the AccountAPI app, not the AccountRequestPortal app. Then in AccountRequestPortal app -> API permissions -> add the API permission exposed by AccountAPI -> grant admin consent, as I see, you did the opposite, it is not correct.

From the screenshot, the application id of AccountRequestPortal is 03099206-xxx-e31a9ee8dec5, AccountAPI is 422132b5-xxx-6651f01a1109, if so, the Configuration should be:

const msalConfig = {
  auth: {
    authority: 'https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84',
    clientId: '03099206-xxx-e31a9ee8dec5',
    redirectUri: redirectUri
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const authParameters = {
  scopes: [
    "api://422132b5-xxx-6651f01a1109/Read"
  ]
}

The app.settings should be:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "AzureAd": {
    "ApplicationIdUri": "api://422132b5-xxx-6651f01a1109",
    "Authority": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/v2.0",
    "AuthorizationUrl": "https://login.microsoftonline.com/a364eb28-xxx-5b4f7767ad84/oauth2/v2.0/authorize",
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "03099206-xxx-e31a9ee8dec5",
    "Domain": "a364eb28-xxx-5b4f7767ad84",
    "TenantId": "a364eb28-xxx-5b4f7767ad84"
  }
}