Allowing all accounts when using MSAL in an Angular App and Web API

Question

I'm trying to allow all MS users to be able to log into my Angular app and have permissions that allow the Angular app to communicate with my web api as that user.

In my Azure Portal I've registered two applications.

TulipseWebApi

Supported account types - All Microsoft account users
API Endpoint exposes as api://client-id
Create a scope named api://client-id/access_as_user

TulipseWebApp

Supported account types - All Microsoft account users
Under API Permissions - setup to allow access to the scope created in the TulipseWebApi app

In my Angular app I've configured MSAL with only the clientId of TulipseWebApp;

    function MsalInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: environment.azureAdClientId,
      redirectUri: '/auth'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false
    }
  });
}

In the web api, I have MSAL configured with the clientId, tenantId and clientSecret from the TulipseWebApi app inside my appsettings file.

"AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "ClientId": "xxxxxx",
    "TenantId": "xxxxxx",
    "ClientSecret": "xxxxxx"
  },

When the user logs via the Angular app, using the scope I created on the TulipseWebApi, then the user is able to login, but ONLY if the users Organisation has approved that scope. This means that if a user isn't a member of my organisation, and isn't a member of their organisation, they can't login.

On the other hand, if I change the scope at login to simply 'user.read', then the user can login, but my web api says that 'Signature validation failed'

In my Angular app, I'm logging in using, this only allows logins from my organisation, but at least my API validated the token correctly.

this._msalService.instance.loginPopup({
      scopes: [api://client-id/access_as_user]
    });

Changing it to the following, means anyone can login, but my web api no longer validates the token.

this._msalService.instance.loginPopup({
      scopes: [environment.azureAdScopes]
    });

I'm sure I've configured something incorrectly, but I can't figure out what.

I would like any user to be able to log into my Angular app using their Microsoft account, and I want my web API to validate the signature so that the angular app can make authenticated calls to my API.

UPDATE:

I thought I had fixed it but I hadn't.

I have configured both my API and Angular app to be multi-tenant, however when I try to login with an account outside of my organisation I get this error in my Angular application.

ERROR Error: Uncaught (in promise): ServerError: invalid_resource: AADSTS500011: The resource principal named api://xxxxxxxx was not found in the tenant named xxxxxxxx. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You might have sent your authentication request to the wrong tenant.

It's as if only an administrator in that organisation can approve users to login to my app, is that correct?

Allowing all accounts when using MSAL in an Angular App and Web API

0 Answers0