1. Overview
2. Scenario
3. Prerequisites
4. Setup
5. Registration
6. Deployment
7. Explore the sample
8. More information
9. Community Help and Support
10. Contributing

This sample demonstrates how to deploy a Node.js & Express web application coupled with a Node.js & Express web API to Azure Cloud using the Azure App Service. To do so, we will use the same code sample from Chapter 3.

ℹ️ The steps below apply similarly to B2C applications, for instance the B2C sample from Chapter 3

1. The client application uses the MSAL Node library to sign-in a user and obtain a JWT Access Token from Azure AD.
2. The Access Token is used as a bearer token to authorize the user to call the protected web API.
3. The protected web API responds with the claims in the Access Token.

• VS Code Azure Tools Extension extension is recommended for interacting with Azure through VS Code interface.
• An Azure AD tenant. For more information, see: How to get an Azure AD tenant
• A user account in your Azure AD tenant.
• An Azure subscription. This sample uses Azure Storage and Azure App Service.

Locate the root of the sample folder. Then:

    cd WebAPI
    npm install
    cd ../
    cd WebApp
    npm install

Use the same app registration credentials that you've obtained during chapter 3-1. You may copy-paste the contents of your auth.json file to do so.

Use the same app registration credentials that you've obtained during chapter 3-1. You may copy-paste the contents of your auth.json file to do so.

There are basically 3 stages that you will have to go through in order to deploy your projects and enable authentication:

1. Upload your project files to Azure services and obtain published website URIs
2. Update Azure AD App Registration with URIs you have just obtained
3. Update your configuration files with URIs you have just obtained

There are various ways to upload your files to Azure App Service. Here we provide steps for uploading via VS Code Azure Tools Extension.

We recommend watching the video tutorial offered by Microsoft Docs for preparation.

1. In the VS Code activity bar, select the Azure logo to show the Azure App Service explorer. Select Sign in to Azure... and follow the instructions. Once signed in, the explorer should show the name of your Azure subscription(s).

2. On the App Service explorer section you will see an upward-facing arrow icon. Click on it publish your local files in the WebAPI folder to Azure App Services.

3. Choose a creation option based on the operating system to which you want to deploy. in this sample, we choose Linux.
4. Select a Node.js version when prompted. An LTS version is recommended.
5. Type a globally unique name for your web API and press Enter. The name must be unique across all of Azure. (e.g. msal-nodejs-webapi1)
6. After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.
7. Select Yes when prompted to update your configuration to run npm install on the target Linux server.

Now you need to navigate to the Azure App Service Portal, and locate your project there. Once you do, click on the Authentication/Authorization blade. There, make sure that the App Services Authentication is switched off (and nothing else is checked), as we are using our own custom authentication logic.

We now need to designate from which domains this web API can be called. To do so, we will add the published website URI of the web app project that we just deployed, e.g. https://msal-nodejs-webapp1.azurewebsites.net/. Add this URI as shown below:

ℹ️ The steps below are the same with deploying your web app, except for step 3 where we reconfigure auth.json for the web app.

1. In the VS Code activity bar, select the Azure logo to show the Azure App Service explorer. Select Sign in to Azure... and follow the instructions. Once signed in, the explorer should show the name of your Azure subscription(s).
2. On the App Service explorer section you will see an upward-facing arrow icon. Click on it publish your local files in the WebApp folder to Azure App Services (use "Browse" option if needed, and locate the right folder).
3. Choose a creation option based on the operating system to which you want to deploy. in this sample, we choose Linux.
4. Select a Node.js version when prompted. An LTS version is recommended.
5. Type a globally unique name for your web app and press Enter. The name must be unique across all of Azure. (e.g. msal-nodejs-webapp1)
6. After you respond to all the prompts, VS Code shows the Azure resources that are being created for your app in its notification popup.
7. Select Yes when prompted to update your configuration to run npm install on the target Linux server.

Now you need to navigate to the Azure App Service Portal, and locate your project there. Once you do, click on the Authentication/Authorization blade. There, make sure that the App Services Authentication is switched off (and nothing else is checked), as we are using our own custom authentication logic.

Now we need to obtain authentication parameters. There are 2 things to do:

• Update Azure AD (or Azure AD B2C) App Registration
• Update WebApp/auth.json.

First, navigate to the Azure portal and select the Azure AD service.

1. Select the App Registrations blade on the left, then find and select the web app that you have registered in the previous tutorial (ExpressWebApp-c3s1).
2. Navigate to the Authentication blade. There, in Redirect URI section, enter the following redirect URI: https://msal-nodejs-webapp1.azurewebsites.net/redirect.
3. Select Save to save your changes.

Now, open the WebApp/auth.json that you have deployed to Azure App Service.

1. Find the key redirectUri and replace the existing value with the Redirect URI for ExpressWebApp-c3s1 app. For example, https://msal-nodejs-webapp1.azurewebsites.net/redirect.
2. Find the key postLogoutRedirectUri and replace the existing value with the base address of the ExpressWebApp-c3s1 project (by default https://msal-nodejs-webapp1.azurewebsites.net/redirect/).
3. Find the key endpoint (resources.webAPI.endpoint), and replace the existing value with your deployed web API's URI and endpoint, e.g. https://msal-nodejs-webapi1.azurewebsites.net/api

1. Open your browser and navigate to your deployed client app's URI, for instance: https://msal-nodejs-webapp1.azurewebsites.net/.
2. Click on the sign-in button located on the top right corner.
3. Once you authenticate, click on the Call web API button at the center.

Were we successful in addressing your learning objective? Consider taking a moment to share your experience with us.

• Azure App Services

For more information about how OAuth 2.0 protocols work in this scenario and other scenarios, see Authentication Scenarios for Azure AD.

Use Stack Overflow to get support from the community. Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [azure-ad azure-ad-b2c ms-identity msal].

If you find a bug in the sample, please raise the issue on GitHub Issues.

To provide a recommendation, visit the following User Voice page.

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.