update-commit

Author: OwenRichards1

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-configure-authentication.md

@@ -10,7 +10,7 @@ ms.service: active-directory
 ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
+ms.date: 05/25/2023
 ms.custom: developer
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure Active Directory (AD) for customers tenant.
@@ -28,9 +28,7 @@ In the previous article, you created a vanilla JavaScript (JS) single-page appli
 
 The application uses the [Implicit Grant Flow](../../develop/v2-oauth2-implicit-grant-flow.md) to authenticate users. The Implicit Grant Flow is a browser-based flow that doesn't require a back-end server. The flow redirects the user to the sign-in page, where the user signs in and consents to the permissions that are being requested by the application. The purpose of *authConfig.js* is to configure the authentication flow.
 
-1. In your IDE, create a new folder and name it **public**
-1. In the *public* folder, create a new file and name it *authConfig.js*.
-1. Open *authConfig.js* and add the following code snippet:
+1. In the *public* folder, open *authConfig.js* and add the following code snippet:
 
     ```javascript
     /**
@@ -93,16 +91,15 @@ The application uses the [Implicit Grant Flow](../../develop/v2-oauth2-implicit-
     }
      ```
 
-1. Find the `Enter_the_Application_Id_Here` value and replace it with the application ID (clientId) of the app you registered in the Microsoft Entra admin center.
+1. Find the `Enter_the_Application_Id_Here` value and replace it with the **application ID (clientId)** of the app you registered in the Microsoft Entra admin center.
 1. In **Authority**, find `Enter_the_Tenant_Subdomain_Here` and replace it with the subdomain of your tenant. For example, if your tenant primary domain is *caseyjensen@onmicrosoft.com*, the value you should enter is *casyjensen*.
 1. Save the file.
 
 ## Creating the redirection file
 
-A redirection file is required to handle the response from the sign-in page. The redirection file is used to extract the access token from the URL fragment and use it to call the protected API.
+A redirection file is required to handle the response from the sign-in page. The redirection file is used to extract the access token from the URL fragment and use it to call the protected API. The redirection file is also used to handle errors that occur during the authentication process.
 
-1. In the *public* folder, create a new file and name it *authRedirect.js*.
-1. Open *authRedirect.js* and add the following code snippet:
+1. In the *public* folder, open *authRedirect.js* and add the following code snippet:
 
     ```javascript
     // Create the main myMSALObj instance

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-prepare-app.md

@@ -1,28 +1,26 @@
 ---
-title: Prepare a vanilla JavaScript single-page app for authentication 
+title: Prepare your vanilla JavaScript single-page application for authentication 
 description: Learn how to prepare a vanilla JavaScript single-page app (SPA) for authentication and authorization with your Azure Active Directory (AD) for customers tenant.
 services: active-directory
 author: OwenRichards1
 manager: CelesteDG
 ms.author: owenrichards
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
-ms.custom: developer
+ms.date: 05/24/2023
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure AD for customers tenant.
 ---
 
-# Prepare a Single-page application for authentication
+# Prepare your vanilla JavaScript single-page application for authentication
 
 After registering an application and creating a user flow in a Azure Active Directory (AD) for customers tenant, a vanilla JavaScript (JS) single-page application (SPA) can be created using an integrated development environment (IDE) or a code editor. In this article, you'll create a vanilla JS SPA and a server to host the application.
 
 ## Prerequisites
 
-- Completion of the prerequisites and steps in [Sign in users to a vanilla JS Single-page application](how-to-single-page-app-vanillajs-prepare-tenant.md).
-- Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is used for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
+- Completion of the prerequisites and steps in [Sign in users to a vanilla JS single-page application](how-to-single-page-app-vanillajs-prepare-tenant.md).
+- Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is recommended for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
 - [Node.js](https://nodejs.org/en/download/).
 
 ## Create a new vanilla JS project and install dependencies
@@ -33,6 +31,21 @@ After registering an application and creating a user flow in a Azure Active Dire
     ```powershell
     npm init -y
     ```
+1. Create additional folders and files to achieve the following project structure:
+
+    ```
+        └── public
+            └── authConfig.js
+            └── authPopup.js
+            └── authRedirect.js
+            └── index.html
+            └── signout.html
+            └── styles.css
+            └── ui.js    
+        └── server.js
+    ```
+    
+## Install app dependencies
 
 1. In the **Terminal**, run the following command to install the required dependencies for the project:
 
@@ -87,6 +100,8 @@ After registering an application and creating a user flow in a Azure Active Dire
 
     ```
 
+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
 
 > [!div class="nextstepaction"]

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-prepare-tenant.md

@@ -1,5 +1,5 @@
 ---
-title: Prepare your tenant to use a vanilla JavaScript single-page app for authentication. 
+title: Prepare your customer tenant to authenticate a vanilla JavaScript single-page application.
 description: Learn how to configure your Azure Active Directory (AD) for customers tenant for authentication with a vanilla JavaScript single-page app (SPA).
 services: active-directory
 author: OwenRichards1
@@ -9,20 +9,19 @@ ms.service: active-directory
 ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
+ms.date: 05/24/2023
 ms.custom: developer
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure Active Directory (AD) for customers tenant.
 ---
 
-# Sign in users to a vanilla JS single-page application - Prepare your tenant
+# Prepare your customer tenant to authenticate a vanilla JavaScript single-page application.
 
 This how-to guide demonstrates how to prepare your Azure Active Directory (Azure AD) for customers tenant for authentication. You'll register a single-page application (SPA) in the Microsoft Entra admin center, and record its identifiers. You'll then create a sign in and sign out user flow in the Microsoft Entra admin center and associate your SPA with the user flow.
 
 ## Prerequisites
 
 - Azure AD for customers tenant. If you don't already have one, [sign up for a free trial](https://aka.ms/ciam-free-trial?wt.mc_id=ciamcustomertenantfreetrial_linkclick_content_cnl).
-
 - If you have already registered a SPA in the Microsoft Entra admin center, and associated it with a user flow, you can skip the steps in this article and move to [Prepare a vanilla JavaScript single-page app for authentication](how-to-single-page-app-vanillajs-prepare-app.md).
 
 ## Register the SPA

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-sample-sign-in.md

@@ -10,19 +10,19 @@ ms.service: active-directory
 ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
+ms.date: 05/25/2023
 ms.custom: developer
 
 #Customer intent: As a dev, devops, I want to learn about how to configure a sample vanilla JS SPA to sign in and sign out users with my Azure Active Directory (Azure AD) for customers tenant
 ---
 
 # Sign in users in a sample vanilla JavaScript single-page application
 
-This how-to guide uses a sample vanilla JavaScript single-page Application (SPA) to demonstrate how to add authentication to a SPA. This SPA enables users to sign in and sign out by using their own Azure Azure Active Directory (AD) for customers tenant. The sample uses the [Microsoft Authentication Library for JavaScript (MSAL.js)](https://github.com/AzureAD/microsoft-authentication-library-for-js) to handle authentication.
+This how-to guide uses a sample vanilla JavaScript 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 their own Azure Azure Active Directory (AD) for customers tenant. The sample uses the [Microsoft Authentication Library for JavaScript (MSAL.js)](https://github.com/AzureAD/microsoft-authentication-library-for-js) to handle authentication.
 
 ## Prerequisites
 
-* Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is used for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
+* Although any IDE that supports vanilla JS applications can be used, **Visual Studio Code** is recommended for this guide. It can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads) page.
 * [Node.js](https://nodejs.org/en/download/).
 * Azure AD for customers tenant. If you don't already have one, [sign up for a free trial](https://aka.ms/ciam-free-trial?wt.mc_id=ciamcustomertenantfreetrial_linkclick_content_cnl).
 
@@ -103,4 +103,5 @@ If you choose to download the `.zip` file, extract the sample app file to a fold
 
 ## Next steps
 
-Learn how to use the Microsoft Authentication Library (MSAL) for JavaScript to sign in users and acquire tokens to call Microsoft Graph.
+> [!div class="nextstepaction"]
+> [Enable self-service password reset](./how-to-enable-password-reset-customers.md)

articles/active-directory/external-identities/customers/how-to-single-page-app-vanillajs-sign-in-sign-out.md

@@ -10,13 +10,13 @@ ms.service: active-directory
 ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
-ms.date: 05/23/2023
+ms.date: 05/24/2023
 ms.custom: developer
 
 #Customer intent: As a developer, I want to learn how to configure vanilla JavaScript single-page app (SPA) to sign in and sign out users with my Azure Active Directory (AD) for customers tenant.
 ---
 
-# Configure a Single-page application User Interface and Sign-In
+# Configure a single-page application user interface and sign-In
 
 When authorization has been configured, the user interface can be created to allow users to sign in and sign out when the project is run. To build the user interface (UI) for the application, [Bootstrap](https://getbootstrap.com/) is used to create a responsive UI that contains a **Sign-In** and **Sign-Out** button. Next, you'll run the project and test the sign-in and sign-out functionality.
 
@@ -26,10 +26,9 @@ When authorization has been configured, the user interface can be created to all
 
 ## Create the *index.html* file
 
-The main page of the application, *index.html*, is the first page that is loaded when the application is started. It's also the page that is loaded when the user selects the **Sign Out** button. 
+The main page of the application, *index.html*, is the first page that is loaded when the application is started. It's also the page that is loaded when the user selects the **Sign-Out** button. 
 
-1. In the *public* folder, create a new file named *index.html*. This file contains the HTML for the main page of the application.
-1. Open *index.html* and add the following code snippet:
+1. In the *public* folder, open *index.html* and add the following code snippet:
 
    ```html
     <!DOCTYPE html>
@@ -103,8 +102,7 @@ The main page of the application, *index.html*, is the first page that is loaded
 
 ## Create the *signout.html* file
 
-1. In the *public* folder, create a new file named *signout.html*. This file contains the HTML for the sign-out page of the application.
-1. Open *signout.html* and add the following code snippet:
+1. In the *public* folder, open *signout.html* and add the following code snippet:
 
     ```html
     <!DOCTYPE html>
@@ -132,8 +130,7 @@ The main page of the application, *index.html*, is the first page that is loaded
 
 ## Create the *ui.js* file
 
-1. In the *public* folder, create a new file named *ui.js*. This file contains the JavaScript code for the UI of the application.
-1. Open *ui.js* and add the following code snippet:
+1. In the *public* folder, open *ui.js* and add the following code snippet:
 
     ```javascript
     // Select DOM elements to work with
@@ -173,8 +170,7 @@ The main page of the application, *index.html*, is the first page that is loaded
 
 ## Create the styles.css file
 
-1. In the *public* folder, create a new file named *styles.css*. This file contains the CSS code for the UI of the application.
-1. Open *styles.css* and add the following code snippet:
+1. In the *public* folder, open *styles.css* and add the following code snippet:
 
     ```css
     .navbarStyle {
@@ -218,4 +214,10 @@ Now that all the required code snippets have been added, the application can be
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Enable self-service password reset](./how-to-enable-password-reset-customers.md)
+> [Enable self-service password reset](./how-to-enable-password-reset-customers.md)
+
+## See also
+
+- [Customize the default branding](how-to-customize-branding-customers.md)
+- [Configure sign-in with Google](how-to-google-federation-customers.md)
+- [Sign in users in your own ASP.NET web application by using an Azure AD for customers tenant](how-to-web-app-dotnet-sign-in-prepare-app.md)