Azure AD B2C Customization

Overview

In this tutorial you will learn how to customize the sign‑up and sign‑in pages of Azure AD B2C using custom policies and HTML, CSS, and JavaScript.

Prerequisites

Step 1 – Create a Custom Policy

Download the starter pack and modify the TrustFrameworkBase.xml file.

<TrustFrameworkPolicy
    xmlns="http://schemas.microsoft.com/online/cpim/schemas/2013/06"
    PolicySchemaVersion="0.3.0.0"
    TenantId="yourtenant.onmicrosoft.com"
    PolicyId="B2C_1A_YourCustomPolicy"
    PublicPolicyUri="http://yourtenant.onmicrosoft.com/B2C_1A_YourCustomPolicy">
    ...
</TrustFrameworkPolicy>

Step 2 – Host Your UI Files

Upload the HTML, CSS, and JS files to an Azure Blob Storage container with public read access.

index.html
styles.css
scripts.js

Step 3 – Customize the HTML

Below is a sample HTML page you can use as a starting point.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign in</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="b2c-container">
    <h1>Welcome Back</h1>
    <form id="loginForm">
      <input type="email" placeholder="Email" required>
      <input type="password" placeholder="Password" required>
      <button type="submit">Sign In</button>
    </form>
    <div id="errorMessage"></div>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

Step 4 – Add Custom CSS

.b2c-container{
  max-width:400px;
  margin:4rem auto;
  padding:2rem;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-align:center;
}
.b2c-container h1{
  margin-bottom:1.5rem;
  color:var(--accent);
}
.b2c-container input{
  width:100%;
  padding:0.8rem;
  margin:0.5rem 0;
  border:1px solid #ccc;
  border-radius:4px;
}
.b2c-container button{
  width:100%;
  padding:0.8rem;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
}
.b2c-container button:hover{
  opacity:0.9;
}

Step 5 – Add JavaScript for Validation

document.getElementById('loginForm').addEventListener('submit',function(e){
  e.preventDefault();
  const email=document.querySelector('input[type="email"]').value;
  const password=document.querySelector('input[type="password"]').value;
  if(!email||!password){
    showError('Both fields are required.');
    return;
  }
  // Perform Azure AD B2C API call here
  console.log('Submitting',email);
});

function showError(msg){
  const el=document.getElementById('errorMessage');
  el.textContent=msg;
  el.style.color='red';
}