Skip to content

tutorial-web-app-node-sign-in-prepare-app.md

Latest commit

 

History

History
182 lines (144 loc) · 7.73 KB

tutorial-web-app-node-sign-in-prepare-app.md

File metadata and controls

182 lines (144 loc) · 7.73 KB
title Sign in users in a Node.js/Express web app by using Microsoft identity platform
description Set up node web app project that signs in users into customer facing app by in an external tenant or employees in a workforce tenant
author kengaderdus
manager dougeby
ms.author kengaderdus
ms.service identity-platform
ms.topic tutorial
ms.date 02/25/2025

Tutorial: Set up a Node.js web app to sign in users by using Microsoft identity platform

[!INCLUDE applies-to-workforce-external]

In this tutorial, you learn how to build a Node/Express.js web app that signs in users into customer facing app in an external tenant or employees in a workforce tenant. The tutorial also demonstrates how to acquire an access token for calling Microsoft Graph API.

This tutorial is part 1 of a 3-part series.

In this tutorial you'll;

[!div class="checklist"]

  • Set up a Node.js project
  • Install dependencies
  • Add app views and UI components

Prerequisites

Workforce tenant

  • Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
    • Application (client) ID
    • Directory (tenant) ID
  • Add the following redirect URIs using the Web platform configuration. Refer to How to add a redirect URI in your application for more details.
    • Redirect URI: http://localhost:3000/auth/redirect
    • Front-channel logout URL: https://localhost:5001/signout-callback-oidc
  • Add a client secret to your app registration. Do not use client secrets in production apps. Use certificates or federated credentials instead. For more information, see add credentials to your application.

External tenant

Create the Node.js project

  1. In a location of choice in your computer, create a folder to host your node application, such as ciam-sign-in-node-express-web-app.

  2. In your terminal, change directory into your Node web app folder, such as cd ciam-sign-in-node-express-web-app, then run the following command to create a new Node.js project:

    npm init -y

    The init -y command creates a default package.json file for your Node.js project.

  3. Create additional folders and files to achieve the following project structure:

        ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

Install app dependencies

To install required identity and Node.js related npm packages, run the following command in your terminal

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

Build app UI components

  1. In your code editor, open views/index.hbs file, then add the following code:

        <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

    In this view, if the user is authenticated, we show their username and links to visit /auth/signout and /users/id endpoints, otherwise, user needs to visit the /auth/signin endpoint to sign in. We define the express routes for these endpoints later in this article.

  2. In your code editor, open views/id.hbs file, then add the following code:

        <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

    We use this view to display ID token claims that Microsoft Entra External ID returns to this app after a user successfully signs in.

  3. In your code editor, open views/error.hbs file, then add the following code:

        <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>

    We use this view to display any errors that occur when the app runs.

  4. In your code editor, open views/layout.hbs file, then add the following code:

        <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{body}}}
        </body>        
    </html>

    The layout.hbs file is in the layout file. It contains the HTML code that we require throughout the application view.

  5. In your code editor, open public/stylesheets/style.css, file, then add the following code:

        body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }
    
    a {
      color: #00B7FF;
    }

Next step

[!div class="nextstepaction"] Tutorial: Add add sign-in in your Node/Express.js web app.