Merge pull request #239133 from garrodonnell/post-build-updates

[CIAM] Post Build Updates to React SPA Guides

Author: v-ccolin

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

@@ -1,22 +1,19 @@
 ---
-title: Prepare a React Single Page App (SPA) for authentication
-description: Learn how to prepare a React single-page app (SPA) for authentication and authorization with your Azure Active Directory (AD) for customers tenant.
+title: Prepare a React single-page app (SPA) for authentication
+description: Learn how to prepare a React single-page app (SPA) for authentication with your Azure Active Directory (AD) for customers tenant.
 services: active-directory
-author: godonnell
+author: garrodonnell
 manager: celestedg
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
 ms.date: 05/23/2023
 ms.author: godonnell
-ms.custom: it-pro
 
-#Customer intent: As a dev, devops, or IT admin, enable authentication in my own React 
+#Customer intent: As a dev, devops, or IT admin, I want to learn how to enable authentication in my own React single-page app
 ---
-# Prepare a React Single-page application for authentication
-
-After registration is complete, a React project can be created using an integrated development environment (IDE). This tutorial demonstrates how to create a React Single-page application using npm and create files needed for authentication and authorization.
+# Prepare a React single-page app (SPA) for authentication
+After registration is complete, you can create a React project using an integrated development environment (IDE). This tutorial demonstrates how to create a React single-page app using npm and create files needed for authentication and authorization.
 
 In this article, you learn how to:
 
@@ -27,13 +24,12 @@ In this article, you learn how to:
 > * Add authentication code to the application
 
 ## Prerequisites
-* Completion of the prerequisites and steps in [Prepare your customer tenant for building a React Single Page App (SPA)](./how-to-single-page-application-react-prepare-tenant.md))
+* Completion of the prerequisites and steps in [Prepare your customer tenant for building a React single-page app (SPA)](./how-to-single-page-application-react-prepare-tenant.md))
 * Although any IDE that supports React applications can be used, Visual Studio Code is used for this guide. This can be downloaded from the [Downloads](https://visualstudio.microsoft.com/downloads/) page.
 * [Node.js](https://nodejs.org/en/download/)
 
 ## Create a new React project
-
-Use the following tabs to create a React project within the IDE.
+Use the following tabs to create a React project within Visual Studio Code.
 
 1. Open Visual Studio Code, select **File** > **Open Folder...**. Navigate to and select the location in which to create your project.
 1. Open a new terminal by selecting **Terminal** > **New Terminal**.
@@ -46,7 +42,6 @@ Use the following tabs to create a React project within the IDE.
     ```
 
 ## Install identity and bootstrap packages
-
 Identity related **npm** packages must be installed in the project to enable user  authentication. For project styling, **Bootstrap** will be used.
 
 1. In the **Terminal** bar, select the **+** icon to create a new terminal. A separate terminal window will open with the previous node terminal continuing to run in the background.
@@ -58,7 +53,6 @@ Identity related **npm** packages must be installed in the project to enable use
     ```
 
 ## Creating the authentication configuration file
-
 1. In the *src* folder, create a new file called *authConfig.js*.
 1. Open *authConfig.js* and add the following code snippet:
 
@@ -135,7 +129,6 @@ Identity related **npm** packages must be installed in the project to enable use
 
 
 ## Modify index.js to include the authentication provider
-
 All parts of the app that require authentication must be wrapped in the [`MsalProvider`](/javascript/api/@azure/msal-react/#@azure-msal-react-msalprovider) component. You instantiate a [PublicClientApplication](/javascript/api/@azure/msal-browser/publicclientapplication) then pass it to `MsalProvider`.
 
 1. In the *src* folder, open *index.js* and replace the contents of the file with the following code snippet to use the `msal` packages and bootstrap styling:
@@ -146,4 +139,4 @@ All parts of the app that require authentication must be wrapped in the [`MsalPr
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Add Sign-in and Sign-out functionality to your app.](./how-to-single-page-application-react-sign-in-out.md)
+> [Add sign-in and sign-out functionality to your app.](./how-to-single-page-application-react-sign-in-out.md)

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

@@ -1,29 +1,28 @@
 ---
-title: Prepare your tenant to use a React single-page app for authentication. 
+title: Prepare your customer tenant to authenticate users in a React single-page app (SPA)
 description: Learn how to configure your Azure Active Directory (AD) for customers tenant for authentication with a React single-page app (SPA).
 services: active-directory
-author: godonnell
+author: garrodonnell
 manager: celestedg
 ms.service: active-directory
 ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
 ms.date: 05/23/2023
 ms.author: godonnell
-ms.custom: it-pro
 
-#Customer intent: As a dev I want to prepare my customer tenant for building a Single Page App with React
+#Customer intent: As a dev I want to prepare my customer tenant for building a single-page app (SPA) with React
 ---
-# Prepare your customer tenant for building a Single Page App (SPA)
+# Prepare your customer tenant to authenticate users in a React single-page app (SPA)
 
-Before your applications can interact with Microsoft Identity Platform they must be registered in a customer tenant that you manage and must be associated with a user flow.
+Before your applications can interact with Microsoft identity platform they must be registered in a customer tenant that you manage and must be associated with a user flow.
 
 In this article, you learn how to:
 
 > [!div class="checklist"]
-> * Register your application and record identifiers.
-> * Create a user flow to allow sign-up and sign-in.
-> * Associate the user flow with your application.
+> * Register your application and record identifiers
+> * Create a user flow to allow sign-up and sign-in
+> * Associate the user flow with your application
 
 ## Prerequisites
 
@@ -54,4 +53,4 @@ If you haven't already created your own customer tenant, [create one now](https:
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Start building your React Single Page Application](./how-to-single-page-application-react-prepare-app.md)
+> [Start building your React single-page app](./how-to-single-page-application-react-prepare-app.md)

articles/active-directory/external-identities/customers/how-to-single-page-application-react-sample.md

@@ -1,27 +1,24 @@
 ---
 title: Sign in users in a sample React single-page application
-description: Learn how to configure a sample React SPA to sign in and sign out users.
+description: Learn how to configure a sample React single-page app (SPA) to sign in and sign out users.
 services: active-directory
 author: garrodonnell
 manager: celestedg
 ms.author: godonnell
 ms.service: active-directory
-ms.workload: identity
 ms.subservice: ciam
 ms.topic: how-to
 ms.date: 05/23/2023
-ms.custom: developer
 
-#Customer intent: As a dev, devops, I want to learn about how to configure a sample React Single Page Application to sign in and sign out users with my Azure Active Directory (Azure AD) for customers tenant
+#Customer intent: As a dev, devops, I want to learn about how to configure a sample React single-page app to sign in and sign out users with my Azure Active Directory (Azure AD) for customers tenant
 ---
 
-# Sign in users in a sample React single-page application 
+# Sign in users in a sample React single-page app (SPA) 
 
 This how-to guide uses a sample React 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 you Azure Active Directory (Azure 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 React 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.
 * [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).
 
@@ -98,5 +95,5 @@ All the required code snippets have been added, so the application can now be ca
 1. Once signed in the display name is shown next to the **Sign out** button.
 
 ## 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-application-react-sign-in-out.md

@@ -1,5 +1,5 @@
 ---
-title: Sign in users with a React single-page-application
+title: Add sign-in to a React single-page app (SPA)
 description: Learn how to configure a React single-page app (SPA) to sign in and sign out users with your Azure Active Directory (AD) for customers tenant.
 services: active-directory
 author: godonnell
@@ -12,11 +12,10 @@ ms.date: 05/23/2023
 ms.author: godonnell
 ms.custom: it-pro
 
-#Customer intent: As a developer I want to add sign-in and sign-out functionality to my React Single Page App
+#Customer intent: As a developer I want to add sign-in and sign-out functionality to my React single-page app
 ---
 
-# Create components for sign in and sign out in a React single page app
-
+# Add sign-in to a React single-page app (SPA)
 Functional components are the building blocks of React apps. This tutorial demonstrates how functional components can be used to build the sign in and sign out experience in a React single-page app (SPA). The `useMsal` hook is used to retrieve an access token to allow user sign in.
 
 In this tutorial:
@@ -30,7 +29,7 @@ In this tutorial:
 
 ## Prerequisites
 
-* Completion of the prerequisites and steps in [Prepare an Single Page Application for authentication](how-to-single-page-application-react-prepare-app.md).
+* Completion of the prerequisites and steps in [Prepare an single-page app for authentication](how-to-single-page-application-react-prepare-app.md).
 
 
 ## Adding components to the application
@@ -42,8 +41,6 @@ In this tutorial:
     - *SignInButton.jsx*
     - *SignOutButton.jsx*
 
----
-
 Once complete, you should have the following folder structure.
 
 ```txt
@@ -58,7 +55,6 @@ reactspalocal/
 ```
 
 ### Adding the page layout
-
 1. Open *PageLayout.jsx* and add the following code to render the page layout. The [useIsAuthenticated](/javascript/api/@azure/msal-react) hook returns whether or not a user is currently signed-in.
 
    ```javascript
@@ -110,7 +106,6 @@ reactspalocal/
 1. Save the file.
 
 ### Adding the sign in experience
-
 1. Open *SignInButton.jsx* and add the following code, which creates a button that signs in the user using either a pop-up or redirect.
 
    ```javascript 
@@ -163,7 +158,6 @@ reactspalocal/
 1. Save the file.
 
 ### Adding the sign out experience
-
 1. Open *SignOutButton.jsx* and add the following code, which creates a button that signs out the user using either a pop-up or redirect.
 
    ```javascript 
@@ -210,7 +204,6 @@ reactspalocal/
    ```
 
 ## Change filename and add required imports
-
 By default, the application runs via a JavaScript file called *App.js*. It needs to be renamed to *App.jsx*, which is an extension that allows a developer to write HTML in React.
 
 1. Rename App.js to App.jsx.
@@ -230,7 +223,6 @@ By default, the application runs via a JavaScript file called *App.js*. It needs
    ```
 
 ### Replacing the default function to render authenticated information
-
 The following code will render based on whether the user is authenticated or not. Replace the default function `App()` to render authenticated information with the following code:
 
 ```javascript
@@ -267,7 +259,6 @@ export default function App() {
 ```
 
 ## Run your project and sign in
-
 All the required code snippets have been added, so the application can now be called and tested in a web browser.
 
 1. Open a new terminal by selecting **Terminal** > **New Terminal**.
@@ -277,20 +268,18 @@ All the required code snippets have been added, so the application can now be ca
     npm start
     ```
 
-1. Open a web browser and navigate to the port specified in [Prepare a Single-page application for authentication](./how-to-single-page-application-react-prepare-app.md). For example, http://localhost:3000/.
+1. Open a web browser and navigate to the port specified in [Prepare a single-page application for authentication](./how-to-single-page-application-react-prepare-app.md). For example, http://localhost:3000/.
 1. For the purposes of this how-to, choose the **Sign in using Popup** option.
 1. After the popup window appears with the sign-in options, select the account with which to sign-in.
 1. A second window may appear indicating that a code will be sent to your email address. If this happens, select **Send code**. Open the email from the sender Microsoft account team, and enter the 7-digit single-use code. Once entered, select **Sign in**.
 1. For **Stay signed in**, you can select either **No** or **Yes**.
 1. The app will now ask for permission to sign-in and access data. Select **Accept** to continue.
 
 ## Sign out of the application
-
 1. To sign out of the application, select **Sign out** in the navigation bar.
 1. A window appears asking which account to sign out of.
 1. Upon successful sign out, a final window appears advising you to close all browser windows.
 
 ## Next steps
-
 > [!div class="nextstepaction"]
 > [Enable self-service password reset](./how-to-enable-password-reset-customers.md)

articles/active-directory/external-identities/customers/toc.yml

@@ -111,7 +111,7 @@ items:
                         - name: Prepare app
                           href: how-to-single-page-application-react-prepare-app.md
                         - name: Sign in and sign out
-                          href: how-to-single-page-application-react-prepare-app.md
+                          href: how-to-single-page-application-react-sign-in-out.md
             - name: Web app
               items: 
                 - name: Node/Express.js
@@ -266,7 +266,7 @@ items:
           href: microsoft-graph-operations-user-flow.md
         - name: Company branding operations
           href: microsoft-graph-operations-branding.md
-        - name: Customer extensions
+        - name: Custom extensions
           href: microsoft-graph-operations-custom-extensions.md
         - name: Tenant management operations
           href: azure-rest-api-operations-tenant-management.md