Skip to content

configure-a-sample-node-web-app.md

Latest commit

 

History

History
166 lines (114 loc) · 10.3 KB

configure-a-sample-node-web-app.md

File metadata and controls

166 lines (114 loc) · 10.3 KB
title Configure authentication in a sample Node.js web application by using Azure Active Directory B2C (Azure AD B2C)
description This article discusses how to use Azure Active Directory B2C to sign in and sign up users in a Node.js web application.
titleSuffix Azure AD B2C
author kengaderdus
manager CelesteDG
ms.service azure-active-directory
ms.topic how-to
ms.date 01/11/2024
ms.author kengaderdus
ms.subservice b2c
ms.custom
devx-track-js
sfi-image-nochange

Configure authentication in a sample Node.js web application by using Azure Active Directory B2C

[!INCLUDE active-directory-b2c-end-of-sale-notice-b]

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

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

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

[!INCLUDE active-directory-b2c-app-integration-client-secret]

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:

:::code language="text" source="~/active-directory-b2c-msal-node-sign-in-sign-out-webapp/.env":::

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.

    :::image type="content" source="./media/configure-a-sample-node-web-app/tutorial-login-page.png" alt-text="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.

    :::image type="content" source="./media/configure-a-sample-node-web-app/tutorial-dashboard-page.png" alt-text="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