Tutorial: Prepare a Vanilla JavaScript single-page app for authentication in a customer tenant

Article
10/23/2023

In the previous article, you registered an application and configured user flows in your Microsoft Entra ID for customers tenant. This article shows you how to create a Vanilla JavaScript (JS) single-page app (SPA) and configure it to sign in and sign out users with your customer tenant.

In this tutorial;

Create a Vanilla JavaScript project in Visual Studio Code
Install required packages
Add code to server.js to create a server

Prerequisites

Completion of the prerequisites and steps in Prepare your customer tenant to authenticate a Vanilla JavaScript single-page app.
Although any integrated development environment (IDE) that supports Vanilla JS applications can be used, Visual Studio Code is recommended for this guide. It can be downloaded from the Downloads page.
Node.js.

Create a new Vanilla JS project and install dependencies

Open Visual Studio Code, select File > Open Folder.... Navigate to and select the location in which to create your project.
Open a new terminal by selecting Terminal > New Terminal.
Run the following command to create a new Vanilla JS project:
```
npm init -y
```

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

    └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

Install app dependencies

In the Terminal, run the following command to install the required dependencies for the project:
```
npm install express morgan @azure/msal-browser
```

Edit the server.js file

Express is a web application framework for Node.js. It's used to create a server that hosts the application. Morgan is the middleware that logs HTTP requests to the console. The server file is used to host these dependencies and contains the routes for the application. Authentication and authorization are handled by the Microsoft Authentication Library for JavaScript (MSAL.js).

Add the following code snippet to the server.js file:

const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

In this code, the app variable is initialized with the express module and express is used to serve the public assets. MSAL-browser is served as a static asset and is used to initiate the authentication flow.

Next steps

Configure SPA for authentication