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.

Prerequisites

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 edit_profile.
  • A Password reset user flow, such as reset_password.

Azure AD B2C prepends B2C_1_ to the user flow name. For example, susi becomes B2C_1_susi.

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:

  1. Sign in to the Azure portal.

  2. If you have access to multiple tenants, select the Settings icon in the top menu to switch to your Azure AD B2C tenant from the Directories + subscriptions menu.

  3. In the Azure portal, search for and select Azure AD B2C.

  4. Select App registrations, and then select New registration.

  5. Under Name, enter a name for the application (for example, webapp1).

  6. Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).

  7. Under Redirect URI, select Web and then, in the URL box, enter http://localhost:3000/redirect.

  8. Under Permissions, select the Grant admin consent to openid and offline_access permissions checkbox.

  9. Select Register.

  10. Select Overview.

  11. Record the Application (client) ID for later use, when you configure the web application.

    Screenshot of the web app Overview page for recording your web app I D.

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.

  1. Under Manage, select Certificates & secrets.
  2. Select New client secret.
  3. In the Description box, enter a description for the client secret (for example, clientsecret1).
  4. Under Expires, select a duration for which the secret is valid, and then select Add.
  5. 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

The views folder contains Handlebars files for the application's user interface.

Step 4: Install dependencies

  1. Open a console window, and change to the directory that contains the Node.js sample app. For example:

    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
    
  2. 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:

Key Value
APP_CLIENT_ID The Application (client) ID for the web app you registered in step 2.1.
APP_CLIENT_SECRET The client secret value for the web app you created in step 2.2
SIGN_UP_SIGN_IN_POLICY_AUTHORITY The Sign in and sign up user flow authority such as https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>. Replace <your-tenant-name> with the name of your tenant and <sign-in-sign-up-user-flow-name> with the name of your Sign in and Sign up user flow such as B2C_1_susi. Learn how to Get your tenant name.
RESET_PASSWORD_POLICY_AUTHORITY The Reset password user flow authority such as https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>. Replace <your-tenant-name> with the name of your tenant and <reset-password-user-flow-name> with the name of your Reset password user flow such as B2C_1_reset_password_node_app.
EDIT_PROFILE_POLICY_AUTHORITY The Profile editing user flow authority such as https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>. Replace <your-tenant-name> with the name of your tenant and <reset-password-user-flow-name> with the name of your reset password user flow such as B2C_1_edit_profile_node_app.
AUTHORITY_DOMAIN The Azure AD B2C authority domain such as https://<your-tenant-name>.b2clogin.com. Replace <your-tenant-name> with the name of your tenant.
APP_REDIRECT_URI 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.
LOGOUT_ENDPOINT The Azure AD B2C sign-out endpoint such as 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. Replace <your-tenant-name> with the name of your tenant and <sign-in-sign-up-user-flow-name> with the name of your Sign in and Sign up user flow such as B2C_1_susi.

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 http://localhost:3000.

  1. In your terminal, run the following code to start the Node.js web server:

    node index.js
    
  2. In your browser, go to http://localhost:3000. You should see the page with a Sign in button.

    Screenshot that shows a Node web app sign in page.

Test sign in

  1. After the page with the Sign in button completes loading, select Sign in. You're prompted to sign in.

  2. 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.

    Screenshot shows web app sign-in status.

Test profile editing

  1. After you sign in, select Edit profile.
  2. 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

  1. After you sign in, select Reset password.
  2. 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.
  3. Select Continue.
  4. Enter your new password, confirm it, and then select Continue. You should see the page that shows sign-in status.

Test sign-out

After you sign in, select Sign out. You should see the page that has a Sign in button.

Next steps