Guidance on how to build Login Screen with Entra ID

Question

Guidance on how to build Login Screen with Entra ID

David G 0

We are seeking guidance on how to build an advanced login screen utilizing Microsoft Entra ID Exterrnal ID.

User's image

Pleas note the "Microsoft" button. It redirects to https://login.microsoftonline.com/common/oauth2/v2.0/authorize
and enables logging in with all Kinds of Microsoft account types ('Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)'). Users are also able to sign-up and sign-in using their email addresses ('local' Accounts).

Our Architecture as we envision it right now on a high level:

We will have multiple frontend Apps (single-page and web apps) and backend services (web apis). The apps and services will be fronted by a BFF ("backend for frontends") which is a ASP.NET Core Web API utilizing YARP (yet another reverse proxy).

The BFF will also be responsible to validate the Browser cookies and fetch the tokens to enable proper auth accessing downstream apis.

Is it possible to manage access to the downstream apis for all types of customers - that is local, any Microsoft Entra ID tenant, as well as the other social IDPs and custom IDPs - utilizing only Microsoft Entra ?

I would have thought that this scenario is the most important real-world application that one would want to achieve for their customers, but I couldn't find any concise examples or tutorials, and after two days of reading through the Microsoft documentation, I have more questions than answers about which of the many Entra components I would need to combine to create a user experience like the one I described.

Any advice on this is very welcome!

Thanks! David

Engindzhan Halmi (BG) 155 Reputation points

2025-10-16T12:44:30.7066667+00:00

Hello David,

Thank you for raising this questions and new implementation for the application you are building. My name is Engindzhan Halmi, professional with knowledge of Entra as my specialization.

As I can see from the screenshot, the sign-in page contains so called Social Sign-in, which can be created via Microsoft Entra ID's External ID. Your team can create secure, customized sign-in experiences for your consumer- and business customer-facing apps. Ensure that you enable sign-in with Facebook, Google, Apple, or a custom OIDC or SAML/WS-Fed identity provider (IdP), users can sign in using their credentials in the external identity provider. A user object is created for them in your directory with the identity information collected during sign-up. (https://learn.microsoft.com/en-us/entra/external-id/customers/concept-authentication-methods-customers#social-identity-providers-facebook-google-and-apple)

Additionally, the page you screenshotted, seems a third-party sign-in (your web app's sign-in). This integration happens by setting up federation with Facebook per say. To create this integration, you would need to create a Facebook application and then configure federation with Entra ID. (https://learn.microsoft.com/en-us/entra/external-id/customers/how-to-facebook-federation-customers)

Additional Social sign-in providers are at the footer of the Facebook federation page.

Best Regards,

Engindzhan H
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.