Search code examples
azure-active-directoryazure-ad-b2cmsal-react

Can We Create Custom Login Page In Azure AD B2C (User Flow or Custom Flow)

I haved an ReactJs app that I want to use AAD B2C to manage Identity for my users. I created the AAD B2C tenant, then registered application type SPA, then I can login using this example repo: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/2-call-api-b2c/SPA.

I wonder that can I custom this login page, for example I wrote a login page in my react app contain my Logo and my site main color, I want the login page follow that style.

Solution

  • To create the Custom login page, refer this MsDoc as suggested by junnas.

    I created a sample custom HTML page like below:

    <!DOCTYPE  html>
<html>
<head>
<title>Login Form</title>
<link  rel="stylesheet"  type="text/css"  href="css/style.css">
</head>
<body>
<h2>Login Page</h2><br>
<div  id="api"></div>
<div  class="login">
<form  id="login"  method="get"  action="login.php">
<label><b>User Name
</b>
</label>
<input  type="text"  name="Uname"  id="Uname"  placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input  type="Password"  name="Pass"  id="Pass"  placeholder="Password">
<br><br>
<input  type="button"  name="log"  id="log"  value="Log In Here">
<br><br>
<input  type="checkbox"  id="check">
<span>Remember me</span>
<br><br>
Forgot <a  href="#">Password</a>
</form>
</div>
</body>
</html>

    enter image description here

    I created an Azure Storage account and uploaded the customize-ui.html file in the container like below:

    enter image description here

    And configured the CORS policy like below:

    enter image description here

    When I tested the CORS policy, I got the 200 OK response:

    enter image description here

    Now Go to Azure AD B2C User Flow -> Page Layouts -> Set Use custom page content as YES:

    enter image description here

    When I run the user flow, the custom page is displayed successfully like below:

    enter image description here