Edit

Tutorial: Prepare a Node.js web application for authentication

  • Article

This tutorial is part 2 of a series that demonstrates building a Node.js web app and preparing it for authentication using the Microsoft Entra admin center. In part 1 of this series you registered an application and configured user flows in your external tenant. In this tutorial, you create a Node.js(Express) project and organize all the folders and files you require. You enable sign-in to the application you prepare here. This Node.js(Express) web application's views use Handlebars.

In this tutorial you'll;

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

Prerequisites

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>
            {{{content}}}
        </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

Part 3: Add add sign-in and sign-out in your Node.js web application