How to use my custom form for Azure B2C login

Question

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

Answer 1

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.

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.

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.

Answer 2

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.