Skip to content

Latest commit

 

History

History
104 lines (68 loc) · 4.93 KB

sample-single-page-app-vanillajs-sign-in.md

File metadata and controls

104 lines (68 loc) · 4.93 KB
Raw
title description author manager ms.author ms.service ms.subservice ms.custom ms.topic ms.date
Sign in users in a sample vanilla JavaScript single-page application
Learn how to configure a sample JavaScript single-page application (SPA) to sign in and sign out users.
OwenRichards1
CelesteDG
owenrichards
entra-external-id
customers
devx-track-js
sample
04/10/2024

Sign in users in a sample vanilla JavaScript single-page application

This guide uses a sample vanilla JavaScript (JS) single-page Application (SPA) to demonstrate how to add authentication to a SPA. The SPA enables users to sign in and sign out by using your external tenant. The sample uses the Microsoft Authentication Library for JavaScript (MSAL.js) to handle authentication.

Prerequisites

Register the SPA in the Microsoft Entra admin center

[!INCLUDE active-directory-b2c-register-app] [!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Grant admin consent

[!INCLUDE active-directory-b2c-grant-delegated-permissions]

Create a user flow

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Associate the SPA with the user flow

[!INCLUDE active-directory-b2c-app-integration-add-user-flow]

Clone or download sample SPA

To obtain the sample application, you can either clone it from GitHub or download it as a .zip file.

  • To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Download the sample. Extract it to a file path where the length of the name is fewer than 260 characters.

Install project dependencies

  1. Open a terminal window in the root directory of the sample project, and enter the following snippet to navigate to the project folder:

    cd 1-Authentication\0-sign-in-vanillajs\App

  2. Install the project dependencies:

    npm install

Configure the sample SPA

  1. Open App/public/authConfig.js and replace the following with the values obtained from the Microsoft Entra admin center:

    • Enter_the_Application_Id_Here and replace it with the Application (client) ID of the app you registered earlier.
    • Enter_the_Tenant_Subdomain_Here and replace it with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

  2. Save the file.

Run your project and sign in

  1. Open a new terminal and run the following command to start your express web server.

    npm start

  2. Open a web browser and navigate to http://localhost:3000/.

  3. Sign-in with an account registered to the external tenant.

  4. Once signed in the display name is shown next to the Sign out button as shown in the following screenshot.

  5. The SPA will now display a button saying Request Profile Information. Select it to display profile data.

    :::image type="content" source="media/how-to-spa-vanillajs-sign-in-sign-in-out/display-vanillajs-welcome.png" alt-text="Screenshot of sign in into a vanilla JS SPA." lightbox="media/how-to-spa-vanillajs-sign-in-sign-in-out/display-vanillajs-welcome.png":::

Sign out of the application

  1. To sign out of the application, select Sign out in the navigation bar.
  2. A window appears asking which account to sign out of.
  3. Upon successful sign out, a final window appears advising you to close all browser windows.

Related content