How to implement Register and login in Azure AD B2C using Custom UI and APIs

Question

How to implement Register and Login in Azure AD B2C using Custom UI and APIs and without using User flows.

Instead of redirecting to the Microsoft domain and authenticating the user on the custom UI defined in Azure, we want to call the the Azure AD B2C APIs from our UI.

We need this kind of implementation because the Registration and Login flow is not a page in the application, but an overlay which can appear on top of any page.

How can we call the Azure AD B2C from our UI app.

The UI app is a ReactJS based (NextJS) application.

Is it possible to authenticate a public customer inside a modal using Azure AD B2C instead of a page?

The App is a React based App (NextJS).

Answer 1

Hi @Nigel Thomas , You can use the Azure AD B2C REST API to create custom registration and login flows in your application.

To implement this, you will need to create a custom UI in your application that collects user information and sends it to the REST API. You can use the API to create a new user account, sign in a user, and manage user accounts.

Here are the high-level steps to implement Register and Login in Azure AD B2C using Custom UI and APIs:

1. Create a custom UI in your application that collects user information, such as email and password.
2. Use the Azure AD B2C REST API to create a new user account. You can use the "Create User" API to create a new user account in Azure AD B2C.
3. Use the Azure AD B2C REST API to sign in a user. You can use the "Sign In" API to sign in a user and get an access token.
4. Use the access token to call other Azure AD B2C APIs to manage user accounts, such as updating user information or resetting passwords.

To authenticate a public customer inside a modal using Azure AD B2C, you can use the same approach as above. You can create a custom UI in your application that collects user information and sends it to the REST API. You can then use the API to sign in the user and manage user accounts.

In your ReactJS (NextJS) application, you can use the "fetch" API to call the Azure AD B2C REST API. You can also use the MSAL.js library to authenticate users and get access tokens.

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