[Azure AD B2C] Resolve GitHub issues 97366

Author: kengaderdus

articles/active-directory-b2c/configure-authentication-sample-react-spa-app.md

@@ -7,15 +7,15 @@ manager: CelesteDG
 ms.service: active-directory
 ms.workload: identity
 ms.topic: how-to
-ms.date: 07/07/2022
+ms.date: 08/25/2022
 ms.author: kengaderdus
 ms.subservice: B2C
 ms.custom: "b2c-support"
 ---
 
 # Configure authentication in a sample React single-page application by using Azure Active Directory B2C
 
-This article uses a sample React single-page application (SPA) to illustrate how to add Azure Active Directory B2C (Azure AD B2C) authentication to your React apps.
+This article uses a sample React single-page application (SPA) to illustrate how to add Azure Active Directory B2C (Azure AD B2C) authentication to your React apps. The React SPA also calls an API that's protected by Azure AD B2C itself. 
 
 ## Overview
 
@@ -121,7 +121,7 @@ Now that you've obtained the SPA sample, update the code with your Azure AD B2C
 | b2cPolicies | authorities | Replace `your-tenant-name` with your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name). For example, use `contoso.onmicrosoft.com`. Then, replace the policy name with the user flow or custom policy that you created in [step 1](#step-1-configure-your-user-flow). For example: `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`. |
 | b2cPolicies | authorityDomain|Your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name). For example: `contoso.onmicrosoft.com`. |
 | Configuration | clientId | The React application ID from [step 2.3](#23-register-the-react-app). |
-| protectedResources| endpoint| The URL of the web API: `http://localhost:5000/api/todolist`. |
+| protectedResources| endpoint| The URL of the web API: `http://localhost:5000/hello`. |
 | protectedResources| scopes| The web API scopes that you created in [step 2.2](#22-configure-scopes). For example: `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`. |
 
 Your resulting *src/authConfig.js* code should look similar to the following sample:
@@ -156,7 +156,7 @@ export const msalConfig: Configuration = {
 
 export const protectedResources = {
   todoListApi: {
-    endpoint: "http://localhost:5000/api/todolist",
+    endpoint: "http://localhost:5000/hello",
     scopes: ["https://your-tenant-namee.onmicrosoft.com/tasks-api/tasks.read"],
   },
 }
@@ -201,7 +201,7 @@ Your final configuration file should look like the following JSON:
 
 ## Step 5: Run the React SPA and web API
 
-You're now ready to test the React scoped access to the API. In this step, run both the web API and the sample React application on your local machine. Then, sign in to the React application, and select the **TodoList** button to start a request to the protected API.
+You're now ready to test the React scoped access to the API. In this step, run both the web API and the sample React application on your local machine. Then, sign in to the React application, and select the **HelloAPI** button to start a request to the protected API.
 
 ### Run the web API
 
@@ -251,11 +251,13 @@ You're now ready to test the React scoped access to the API. In this step, run b
     ![Screenshot that shows the React sample app with the login link.](./media/configure-authentication-sample-react-spa-app/sample-app-sign-in.png)
 
 1. Choose **Sign in using Popup**, or **Sign in using Redirect**. 
-1. Complete the sign-up or sign in process. Upon successful sign in, you should see your profile. 
-1. From the menu, select **Hello API**. 
-1. Check out the result of the REST API call. The following screenshot shows the React sample REST API return value.
-
+1. Complete the sign-up or sign in process. Upon successful sign in, you should see a page with three buttons, **HelloAPI**, **Edit Profile** and **Sign Out**. 
     ![Screenshot that shows the React sample app with the user profile, and the call to the A P I.](./media/configure-authentication-sample-react-spa-app/sample-app-call-api.png)
+1. From the menu, select **HelloAPI** button. 
+1. Check out the result of the REST API call. The following screenshot shows the React sample REST API return value:
+
+    :::image type="content" source="./media/configure-authentication-sample-react-spa-app/sample-app-call-api-result.png" alt-text="Screenshot of the React sample app with the user profile, and the result of calling the web A P I.":::
+
 
 ## Deploy your application