Azure-Ad-styling
Author Cloudapp
E.G.

Custom styling Azure AD B2C Signup-Signin Page Next.js 14

May 21, 2024
Table of Contents

In the last two stories, we created the AD B2C Tenant, and then I guided you through the integration into Next.js 14. Signup and Sign-in are working, and therefore, we are gonna add some custom styling to improve the look.

In the previous two stories, we created an Azure AD B2C Tenant, and then we integrated it into our Next.js 14 project. Now, we will style it accordingly so that we have our logo, etc.

Default Styling Azure AD B2C

That is the current (default) look

Sign-up-or-sign-in
Sign-up-or-sign-in

Let’s head over to our Tenant in the Azure portal (portal.azure.com) and click on “Company branding” on the left side.

Custom Branding

Azure-AD-B2C-Microsoft-Azure 1
Azure-AD-B2C-Microsoft-Azure 1

On the next screen, we click on Configure on the top middle/left

Configure-company-branding-Microsoft-Azure 2
Configure-company-branding-Microsoft-Azure 2

And now we can add a background image, a Banner Logo, Username hint, etc. We will add a background image (2) and a logo image (1) and then click on Save(3).

Configure-company-branding-Microsoft-Azure 3
Configure-company-branding-Microsoft-Azure 3

After saving the changes, we will see the new overview.

Azure-AD-B2C-Microsoft-Azure 4
Azure-AD-B2C-Microsoft-Azure 4

And as you can see, there is a CTA “+ New Language” on the top/middle, which we can use to define different content per language, if needed.

If we now go back to our example blog -> https://nextjs14-auth-azureb2c.vercel.app/

and we click on the User Icon on the top right; we can open the “Login/Register” dropdown, which brings us to the newly styled sign-in/signup page.

Sign-up-or-sign-in New
Sign-up-or-sign-in New

Change predefined templates

If you would like to style further, you can go back to your Tenant overview and click on “User flows” and then select your User flow “B2C_1_Webapp_signupsignin_1”. On the left side there is a menu item called “Page layouts”.

B2C 1 Webapp signupsignin 1-Microsoft-Azure 5
B2C 1 Webapp signupsignin 1-Microsoft-Azure 5

On the top is a CTA “Template,” where you can choose between three options: “Ocean Blue (Default),” “Slate Gray,” and “Classic.”

We change to “Classic,” and as soon as Azure has saved it, we click on “Run user flow” at the top left, which opens an overlay on the right.

Run-user-flow-Microsoft-Azure 6
Run-user-flow-Microsoft-Azure 6

New Layout

And voilà, we see a new layout

Sign-up-or-sign-in 7
Sign-up-or-sign-in 7

If this is still insufficient, you can move the toggle “Use custom page content” to the left (Yes) and define your template file.

Cloudapp-dev, and before you leave us

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏 on our Medium Account

Related articles