azureazure-active-directoryazureportalazure-authentication

Setup SPA Frontend and Backend as separate Azure AD App Registrations


I have a SPA (Angular) frontend that communicates with a .NET Core backend, where the backend application is configured to have multiple authentication schemes to not only allow for the SPA frontend to authenticate users registered under the current tenant, but also other APIs (which are registered in Azure AD as separate application registrations).

For each environment, I've registered the frontend and the backend as 2 separate applications, and setup the various scopes, exposed APIs, permissions etc to facilitate the necessary communication using the newer MSAL auth code flow (external APIs that communicate with the backend for each environment use a different authentication flow).

Is it advised to have this configuration, or should I instead treat my frontend and backend as a single application registration?

On one hand, I feel that my frontend is simply another application that is communicating with my backend. But on the other, it could be considered part of the same fundamental 'application'.

Any advice would be appreciated.


Solution

  • The 2 app registrations is what is normally advised - it helps on a better separation of concepts, making things clearer.

    You can also see this on the official MS Samples, where they always provide the steps to register both client and service apps. Check the following example for an Angular SPA and .NET Core API: https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/3-Authorization-II/1-call-api