Skip to content

enable-authentication-in-node-web-app-options.md

Latest commit

 

History

History
168 lines (119 loc) · 8.01 KB

enable-authentication-in-node-web-app-options.md

File metadata and controls

168 lines (119 loc) · 8.01 KB
title Enable Node.js web app authentication options using Azure Active Directory B2C
description This article discusses several ways to enable Node.js web app authentication options.
author kengaderdus
manager CelesteDG
ms.service azure-active-directory
ms.topic reference
ms.date 01/11/2024
ms.author kengaderdus
ms.subservice b2c
ms.custom b2c-support, devx-track-js

Enable authentication options in a Node.js web app by using Azure Active Directory B2C

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

This article describes how to enable, customize, and enhance the Azure Active Directory B2C (Azure AD B2C) authentication experience for your Node.js web application.

Before you start, it's important to familiarize yourself with the following articles:

[!INCLUDE active-directory-b2c-app-integration-custom-domain]

To use a custom domain and your tenant ID in the authentication URL, follow the guidance in Enable custom domains. Under the project root folder, open the .env file. This file contains information about your Azure AD B2C identity provider.

In the .env file, do the following:

  • Replace all instances of tenant-name.b2clogin.com with your custom domain. For example, replace tenant-name.b2clogin.com, to login.contoso.com.
  • Replace all instances of tenant-name.onmicrosoft.com with your tenant ID. For more information, see Use tenant ID.

The following configuration shows the app settings before the change:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

The following configuration shows the app settings after the change:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

[!INCLUDE active-directory-b2c-app-integration-login-hint]

  1. If you're using a custom policy, add the required input claim, as described in Set up direct sign-in.
  2. Find the authCodeRequest object, and set loginHint attribute with the login hint.

The following code snippets demonstrate how to pass the sign-in hint parameter. It uses [email protected] as the attribute value.

authCodeRequest.loginHint = "[email protected]"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

[!INCLUDE active-directory-b2c-app-integration-domain-hint]

  1. Check the domain name of your external identity provider. For more information, see Redirect sign-in to a social provider.
  2. Find the authCodeRequest object, and set domainHint attribute with the corresponding domain hint.

The following code snippets demonstrate how to pass the domain hint parameter. It uses facebook.com as the attribute value.

authCodeRequest.domainHint = "facebook.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

[!INCLUDE active-directory-b2c-app-integration-ui-locales]

  1. Configure language customization.
  2. Find the authCodeRequest object, and set extraQueryParameters attribute with the corresponding ui_locales extra parameter.

The following code snippets demonstrate how to pass the ui_locales parameter. It uses es-es as the attribute value.

authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

[!INCLUDE active-directory-b2c-app-integration-custom-parameters]

  1. Configure the ContentDefinitionParameters element.
  2. Find the authCodeRequest object, and set extraQueryParameters attribute with the corresponding extra parameter.

The following code snippets demonstrate how to pass the campaignId custom query string parameter. It uses germany-promotion as the attribute value.

authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

[!INCLUDE active-directory-b2c-app-integration-id-token-hint]

  1. In your custom policy, define an ID token hint technical profile.
  2. Find the authCodeRequest object, and set extraQueryParameters attribute with the corresponding id_token_hint extra parameter.

The following code snippets demonstrate how to define an ID token hint:

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

[!INCLUDE active-directory-b2c-app-integration-logging]

To configure logging, in index.js, configure the following keys:

  • logLevel lets you specify the level of logging. Possible values: Error, Warning, Info, and Verbose.
  • piiLoggingEnabled enables the input of personal data. Possible values: true or false.

The following code snippet demonstrates how to configure MSAL logging:

 const confidentialClientConfig = {
    ...
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: msal.LogLevel.Verbose,
        }
    }
};

Next steps

Learn more about MSAL.js configuration options.