Configure authentication in a sample Node.js web application by using Azure Active Directory B2C
This sample article uses a sample Node.js application to show how to add Azure Active Directory B2C (Azure AD B2C) authentication to a Node.js web application. The sample application enables users to sign in, sign out, update profile and reset password using Azure AD B2C user flows. The sample web application uses Microsoft Authentication Library (MSAL) for Node to handle authentication and authorization.
In this article, you’ll do the following tasks:
- Register a web application in the Azure portal.
- Create combined Sign in and sign up, Profile editing, and Password reset user flows for the app in the Azure portal.
- Update a sample Node application to use your own Azure AD B2C application and user flows.
- Test the sample application.
- Visual Studio Code or another code editor.
- Azure AD B2C tenant. If you haven't already created your own, follow the steps in Tutorial: Create an Azure Active Directory B2C tenant and record your tenant name.
Step 1: Configure your user flows
When users try to sign in to your app, the app starts an authentication request to the authorization endpoint via a user flow. The user flow defines and controls the user experience. After users complete the user flow, Azure AD B2C generates a token and then redirects users back to your application.
If you haven't done so already, create a user flow or a custom policy. Repeat the steps to create three separate user flows as follows:
- A combined Sign in and sign up user flow, such as
susi. This user flow also supports the Forgot your password experience.
- A Profile editing user flow, such as
- A Password reset user flow, such as
Azure AD B2C prepends
B2C_1_ to the user flow name. For example,
Step 2: Register a web application
To enable your application sign in with Azure AD B2C, register your app in the Azure AD B2C directory. The app registration establishes a trust relationship between the app and Azure AD B2C.
During app registration, you'll specify the Redirect URI. The redirect URI is the endpoint to which the user is redirected by Azure AD B2C after they authenticate with Azure AD B2C. The app registration process generates an Application ID, also known as the client ID, that uniquely identifies your app. After your app is registered, Azure AD B2C uses both the application ID, and the redirect URI to create authentication requests.
Step 2.1: Register the app
To register the web app, follow these steps:
Sign in to the Azure portal.
Make sure you're using the directory that contains your Azure AD B2C tenant. Select the Directories + subscriptions icon in the portal toolbar.
On the Portal settings | Directories + subscriptions page, find your Azure AD B2C directory in the Directory name list, and then select Switch.
In the Azure portal, search for and select Azure AD B2C.
Select App registrations, and then select New registration.
Under Name, enter a name for the application (for example, webapp1).
Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).
Under Redirect URI, select Web and then, in the URL box, enter
Under Permissions, select the Grant admin consent to openid and offline_access permissions checkbox.
Record the Application (client) ID for later use, when you configure the web application.
Step 2.2: Create a web app client secret
Create a client secret for the registered web application. The web application uses the client secret to prove its identity when it requests tokens.
- Under Manage, select Certificates & secrets.
- Select New client secret.
- In the Description box, enter a description for the client secret (for example, clientsecret1).
- Under Expires, select a duration for which the secret is valid, and then select Add.
- Record the secret's Value. You'll use this value for configuration in a later step.
Step 3: Get the sample web app
Download the zip file, or clone the sample web application from GitHub.
git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git
Extract the sample file to a folder. You'll get a web app with the following directory structure:
active-directory-b2c-msal-node-sign-in-sign-out-webapp/ ├── index.js └── package.json └── .env └── views/ └── layouts/ └── main.hbs └── signin.hbs
views folder contains Handlebars files for the application's user interface.
Step 4: Install dependencies
Open a console window, and change to the directory that contains the Node.js sample app. For example:
Run the following commands to install app dependencies:
npm install && npm update
Step 5: Configure the sample web app
Open your web app in a code editor such as Visual Studio Code. Under the project root folder, open the .env file. This file contains information about your Azure AD B2C identity provider. Update the following app settings properties:
||The Application (client) ID for the web app you registered in step 2.1.|
||The client secret value for the web app you created in step 2.2|
||The Sign in and sign up user flow authority such as
||The Reset password user flow authority such as
||The Profile editing user flow authority such as
||The Azure AD B2C authority domain such as
||The application redirect URI where Azure AD B2C will return authentication responses (tokens). It matches the Redirect URI you set while registering your app in Azure portal, and it must be publicly accessible. Leave the value as is.|
||The Azure AD B2C sign-out endpoint such as
Your final configuration file should look like the following sample:
#HTTP port SERVER_PORT=3000 #web apps client ID APP_CLIENT_ID=<You app client ID here> #session secret SESSION_SECRET=sessionSecretHere #web app client secret APP_CLIENT_SECRET=<Your app client secret here> #B2C sign up and sign in user flow/policy authority SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name> #B2C password reset user flow/policy authority RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name> #B2C edit profile user flow/policy authority EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name> #B2C authority domain AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com #client redirect url APP_REDIRECT_URI=http://localhost:3000/redirect #Logout endpoint LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
Run the sample web app
You can now test the sample app. You need to start the Node server and access it through your browser on
In your terminal, run the following code to start the Node.js web server:
In your browser, go to
http://localhost:3000. You should see the page with a Sign in button.
Test sign in
After the page with the Sign in button completes loading, select Sign in. You're prompted to sign in.
Enter your sign-in credentials, such as email address and password. If you don't have an account, select Sign up now to create an account. After you successfully sign in or sign up, you should see the following page that shows sign-in status.
Test profile editing
- After you sign in, select Edit profile.
- Enter new changes as required, and then select Continue. You should see the page with sign-in status with the new changes, such as Given Name.
Test password reset
- After you sign in, select Reset password.
- In the next dialog that appears, you can cancel the operation by selecting Cancel. Alternatively, enter your email address, and then select Send verification code. You'll receive a verification code to your email account. Copy the verification code in your email, enter it into the password reset dialog, and then select Verify code.
- Select Continue.
- Enter your new password, confirm it, and then select Continue. You should see the page that shows sign-in status.
After you sign in, select Sign out. You should see the page that has a Sign in button.