How to Implement Azure AD B2C Login in a React Application Without the Default Login Popup?

Question

I am working on a React application and want to integrate Azure AD B2C for authentication using the Azure SDK. However, I don't want the default login popup to be displayed. Instead, I would like users to enter their username and password directly in a custom form within my application. Once the user clicks "Login," Azure AD B2C should authenticate them and return a JWT token.

Here are the specifics:

What Azure SDK methods I should use for Azure AD B2C.

I need guidance on bypassing the default popup and implementing a custom login form.

How can I securely authenticate the user and retrieve the JWT token directly?

Answer 1

The login dialog is from the azure website, not your app and you can not replace it. Azure does support branding:

https://learn.microsoft.com/en-us/entra/fundamentals/how-to-customize-branding

Note: as iframes are not supported, msal redirects to azure ad login site which after login redirects back to the react app with auth codes.

Answer 2

Hi @Likitha Bommasani , you can do this by following these steps:

1. Register your application in Azure AD B2C: Ensure you have an Azure AD B2C tenant and register your application. Configure the necessary authentication settings.
2. Use the MSAL.js library: For handling authentication in your React application, you can use the MSAL.js library. This library helps you interact with Azure AD B2C endpoints and manage authentication flows.

npm i @azure/msal-browser @azure/msal-react

1. Implement a custom login form: Create a custom UI in your application that collects user information, such as email and password. Use the Azure AD B2C REST API to authenticate the user. You can use the "Sign In" API to sign in a user and get an access token.
2. Securely handle tokens: Ensure that you securely handle and store tokens. For web applications, you can use libraries like react-azure-adb2c or msal.js to manage tokens.

This is a high-level overview, so please let me know if you have any questions and I can help you further.

For reference, these links are very helpful:

• https://learn.microsoft.com/en-us/samples/azure-samples/ms-identity-ciam-javascript-tutorial/ms-identity-ciam-javascript-tutorial-1-sign-in-react/
• https://learn.microsoft.com/en-us/answers/questions/1622308/how-to-implement-azure-ad-b2c-login-in-a-react-nat
• https://learn.microsoft.com/en-us/azure/active-directory-b2c/enable-authentication-react-spa-app
• https://learn.microsoft.com/en-us/answers/questions/1683931/how-to-implement-register-and-login-in-azure-ad-b2

Please let me know if you have any questions and I can help you further.

If this answer helps you please mark "Accept Answer" so other users can reference it.

Thank you,

James