How to use my custom form for Azure B2C login

Boom Boom 1 Reputation point
2022-09-22T13:17:51.01+00:00

How to use my custom form with username and password fields to authenticate user in Azure b2c (React app)

Microsoft Authenticator
Microsoft Authenticator
A Microsoft app for iOS and Android devices that enables authentication with two-factor verification, phone sign-in, and code generation.
5,671 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
904 questions
Microsoft Entra External ID
Microsoft Entra External ID
A modern identity solution for securing access to customer, citizen and partner-facing apps and services. It is the converged platform of Azure AD External Identities B2B and B2C. Replaces Azure Active Directory External Identities.
2,679 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Michael Taylor 49,251 Reputation points
    2022-09-22T14:36:25.517+00:00

    I'm assuming here you want to use B2C and just inject your branding changes to it. This is the defacto approach and should be how you resolve the problem. Your HTML/scripts are injected into the sandbox page that B2C provides. To do that you'll need to go to your B2C configuration and then to User Flows.
    243903-image.png

    Here is where you configure the UI and behavior for each user flow (sign in, sign up, etc). Select the Sign In flow that you're using for your apps. Under its settings you'll see the Page layouts option. Click that you and get to the settings where you get to specify the custom page URL you want to use instead of the default. There is a link on that page (and here) that talks about how to build custom HTML content that is then run in the B2C sandbox.

    243897-image.png

    This requires that your URL be accessible by B2C because it will grab your HTML (which can include scripts) and inject it into the HTML page it generates. You also have to test your code because B2C's HTML already includes some JS libraries and your code cannot collide with that. Beyond that you can customize the page however you need to. Provided you follow the documentation and ensure that the UN/PWD fields have the correct names and whatnot then it should just work after that.

    0 comments No comments

  2. Pablo Palacios 1 Reputation point
    2022-10-27T17:32:12.383+00:00

    I will need to do something like this.
    But I am required to make those from scratch with React.
    Can I do that with an Auth API instead of using the provided forms?
    I need to add components that are not available or are very complicated to add to that form like an agreement box, links and some other stuff.
    I spent already a week trying to do it with the templates, and it is almost impossible to add all the requirements from my company.

    0 comments No comments