Entra External ID went into General Availability in May 2024 and provides a lot of features and user experience improvement over the older Azure Active Directory B2C for Customer Identity Access Management (CIAM) aka a sign in for your customers / the general public. It is not marked as a replacement for AAD B2C (which will have support until May 2030 according to Microsoft) and there is no mention of any planned forced migration however it wont be possible to purchase new AAD B2C P1/P2 licences in May 2025.
While pricing between External ID and AAD B2C offerings are a bit different they both include up to 50k monthly active users for free. It’s important to note that several External ID features are still marked as preview. An important one for anyone considering federated auth is External ID built-in sign-in providers (at the time of writing) are quite limited while AAD B2C supports many more providers out of the box as below. I would hope this will grow before that May 2025 window but could not find much indication of a roadmap. Below you can see the current provider support.
The VSCode Extension
Microsoft has recently made it much quicker, easier and less error-prone to get sign-in with Entra External ID up and running on your Node, Javascript, Angular, React, ASP.Net core and Python apps with the new (preview) Entra External ID extension for VSCode.
There is a free trial option for Entra External ID tenant (yes you need a separate tenant to your regular tenant holding your resources) you can select when setting up in VSCode so you can use all of this free (you can sign up for a free trial Azure account if you don’t have one, but requires a credit card).
One of the key pain points with setting up Entra External ID authentication is having all your tenant settings in code correctly. The extension takes care of this when you download the sample code to get you up and running fast. Let’s try it out….
Create an Entra External ID tenant, app and sign in to it
Prereqs: Azure account, VSCode, NodeJS
In VSCode install the Entra External ID extension
Once you open the extension in the sidebar, click on the ‘Help and Feedback’ -> ‘Open extension walkthrough’ and a ‘Welcome’ window will open. If you don’t have an Entra External ID tenant (this is different from your usual Azure tenant) you will get the option to create a new trial tenant as below.
NOTE: Under a paid Entra External ID plan you will be charged extra if you want to specify the data storage location. Tenants will be deleted after the trial period finishes but you can create a new trial tenant.
Once you have setup your free trial, click the ‘Set up sign-in for your users’ In the ‘Welcome’ window. Click ‘Set up sign-in and branding’. There’s options to use email + password / OTP. We’ll set it as OTP. You can Customise the appearance if you like or just skip that in the next prompts.
In the ‘Welcome’ window, select ‘Set up and run sample app’ click the ‘Set up sample app’ and choose React js.
The cloned folder will open in a new VSCode, the Readme.md has in-depth instructions for manual setup but you can just click ‘Run -> Run without debugging’ in the menu. This will set up your app, install the npm packages, and then launch the browser (this may take a little while to setup itself before launching).
If you look in the SPA -> authConfig.js file you will see the MSAL for React library setup code has your Entra External ID tenant info filled.
Click on the Sign-up button and enter your email, click next and enter the OTP sent to your email then next.
You will see the signed-in screen with your user details similar to the below.
🎉Congrats! 🎉 You now have a React app authenticating with Entra External ID.
On some of the sign-in screens you’ll see a trial Entra External ID tenant name. You can view and manage your Entra External ID tenant in the extensions Manage resources area and the Microsoft Entra Admin Center. All the steps done before in the ‘Welcome’ window of the VSCode extension can be done from the extension window in it’s various menu items if you return later.
Cleaning up
In the ‘Manage resources’ area of the extension window, expand ‘Applications’ (as shown below) and right click on an application starting with ‘QuickStart Application’ and select ‘Manage in Admin Center’.
A browser window will open to the the admin center with your application. Click delete, check ‘I understand…’ and delete.
Summary
I found this extension quite helpful to get an app up and running fast with an Entra External ID tenant with the MSAL library. Having done it manually in the past it’s noticeably quicker. While it only allows email sign-in setup in the extension, you can set up all the other sign-in flows in the Microsoft Entra admin center portal. I’d almost expect this extension to expand on these areas in future to make setting up all your sign-in providers (eg facebook, google, and hopefully more in future) very quick. It’s great to see Azure has had more free trials and tools in recent years to help devs review Azure resources and quickly prototype features like this.
If you have any feedback or issues with the steps please leave a comment. I hope this post has helped you get started using CIAM in Azure.🙂
Resources
Entra External ID VSCode Extension
Great article on setting up Entra External ID with VSCode. It really makes it clearer how quickly you can get this rolling for your apps. One question, is there any particular reason someone would choose AAD B2C over Entra External ID these days if migrating isn’t forced yet? Also, I came across some interesting thoughts on JavaScript and similar integration topics over at sebbie.pl, which might complement some insights here. Thank you for sharing your expertise!
Glad you found this helpful. Reasons I would choose AAD B2C over Entra External ID would be for the wider choice of sign-in provider integrations or if a client has a preference to for company branding customisation of the sign-in screens, it seemed a bit more limited in External ID at the moment. If these weren’t important I’d opt for External ID due to the easier setup, configuration and management. I’d expect within a year or so as Microsoft’s focus forward is External ID, and more features come in, there’d likely be no reason to opt for AAD B2C.
Hi there! I just would like to give you a huge thumbs up for the great info
you have got here on this post. I will be coming back to your blog for more soon.