minor changes

Author: garrodonnell

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

@@ -1,22 +1,20 @@
 ---
 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.
+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 app (SPA) 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 app using npm and create files needed for authentication and authorization.
+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:
 
@@ -32,7 +30,6 @@ In this article, you learn how to:
 * [Node.js](https://nodejs.org/en/download/)
 
 ## Create a new React project
-
 Use the following tabs to create a React project within the IDE.
 
 1. Open Visual Studio Code, select **File** > **Open Folder...**. Navigate to and select the location in which to create your project.
@@ -46,7 +43,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 +54,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 +130,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:

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

@@ -1,8 +1,8 @@
 ---
-title: Prepare your tenant to use a React single-page app (SPA) 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
@@ -14,7 +14,7 @@ ms.custom: it-pro
 
 #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.
 

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

@@ -6,7 +6,6 @@ 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

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
@@ -15,8 +15,7 @@ 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
 ---
 
-# 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:
@@ -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**.
@@ -285,12 +276,10 @@ All the required code snippets have been added, so the application can now be ca
 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)