#aily Rabbit Holes: Cracking the Azure BPuzzle

Today was one of those days—a deep dive into the mysterious world of Azure B2C. Or, as I like to call it, a journey through the hidden labyrinth of Azure Identity.

For some reason, working with Azure Identity is never straightforward for me. Don’t get me wrong—Microsoft Azure’s documentation can be excellent for many services. For example, setting up a basic Vision API project was a breeze, and I’d even say the .NET Core documentation is top-notch.

But Azure Identity? That’s a different story.

The Challenge

I’ve worked with Microsoft Entra (the new branding for Azure Identity services) numerous times, and setting up an App Registration is something I’ve come to expect in my day-to-day tasks. Today, however, the goal was to explore Azure B2C.

What Is Azure B2C?

In simple terms, Azure B2C is a Microsoft service that allows you to create a white-labeled user management platform.

Think of it as an offshoot of Entra ID (formerly Azure Active Directory), tailored specifically for managing users who are external to your organization. While Entra ID is designed to handle internal users—employees, contractors, etc.—Azure B2C is aimed at customers or other external users.

With Azure B2C, you can:

• Create sign-up and sign-in flows

• Customize the UI to match your brand

• Handle password reset flows automatically

• Integrate third-party identity providers like Google, Facebook, or Apple

If you’re familiar with Auth0 or Clerk, the concept is similar.

My Goal

Here were the requirements for my project:

1. Frontend: A React-based SPA (preferably with Vite).

2. Authentication: Trusted user management using Azure B2C.

3. Backend: Node.js or .NET Core API with bearer token authentication.

It sounded simple enough. But the moment I started looking at the documentation, I found myself buried under outdated repositories, scattered information, and broken links.

The Struggle

It’s a common scenario: a React SPA talking to a Node.js backend, secured with Azure B2C. Yet, the docs felt like a treasure hunt. I kept opening new tabs—at one point, I had over 20 Chrome tabs trying to piece everything together.

After hours of tinkering, I managed to get a basic example working:

• A React app (using Create React App, not Vite, unfortunately).

• A Node.js backend (Express-based).

Resources That Finally Worked

If you’re attempting the same setup, here are the key resources that worked for me:

Frontend:

• MSAL React B2C Sample

Backend:

• Node.js Web API with Azure B2C

Azure B2C Configuration:

• Create User Flows

Looking at these three links now, it feels so obvious. But finding and connecting them wasn’t easy.

Observations

Azure B2C and Microsoft Identity Platform are incredibly powerful, but navigating the documentation is challenging. Part of the issue seems to be the sheer breadth of features—combined with the need to support legacy systems like Active Directory.

In fairness, maintaining updated documentation while evolving services like Entra ID is no small feat.

What’s Next?

To streamline future projects, I’m building a small boilerplate using:

• React Vite Tailwind Shadcn

• Azure B2C (or… maybe something else?)

• Node.js (Express Passport)

Once it’s ready, I’ll update this article with the boilerplate.

The Plot Twist

Every good rabbit hole has a twist, and this one’s no different.

Just as I wrapped my head around Azure B2C, I stumbled upon Microsoft Entra External ID—which, they claim, is even better.

Apparently, Azure B2C will eventually be replaced by Entra External ID. So, if you’re starting fresh, it might be worth exploring this newer option.

The rabbit hole continues…

The above is the detailed content of #aily Rabbit Holes: Cracking the Azure BPuzzle. For more information, please follow other related articles on the PHP Chinese website!