Options for SPA Angular Applications authentication with Azure AD and ADAL.

Question

I have two working examples explain how to implement OAuth implicit flow authentication in an SPA Angular application through an ASP.NET Core WEB API. (The REST API Serive platform might not be relevant here). Each of the two examples explains an option that I like to contrast here:

Option 1: Use only one (1) AAD Application Registration: http://anthonygiretti.com/2018/02/28/using-openidconnect-with-azure-ad-angular5-and-webapi-core-azure-ad-configuration/

Option 2: Use two AAD Application Registrations, one Angular SPA app, one for ASP.NET Core API APP:

https://blogs.msdn.microsoft.com/premier_developer/2018/10/24/using-adal-js-with-angular4/

Both examples work fine.

The question:

What are the benefits of registering two Azure AD Applications, when we can implement the authentication with only one application?

Answer 1

If the client app and the resource app (the API) are logically the same app you can just use the same app registration, keeping things simpler. Think of it from the user's point of view. Would they distinguish between the client app and the resource being accessed? Or would they just see it all as one thing?