You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/active-directory-b2c/configure-authentication-sample-react-spa-app.md
+13-11Lines changed: 13 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,15 +7,15 @@ manager: CelesteDG
7
7
ms.service: active-directory
8
8
ms.workload: identity
9
9
ms.topic: how-to
10
-
ms.date: 07/07/2022
10
+
ms.date: 08/25/2022
11
11
ms.author: kengaderdus
12
12
ms.subservice: B2C
13
13
ms.custom: "b2c-support"
14
14
---
15
15
16
16
# Configure authentication in a sample React single-page application by using Azure Active Directory B2C
17
17
18
-
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.
18
+
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.
19
19
20
20
## Overview
21
21
@@ -121,7 +121,7 @@ Now that you've obtained the SPA sample, update the code with your Azure AD B2C
121
121
| 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>`. |
122
122
| b2cPolicies | authorityDomain|Your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name). For example: `contoso.onmicrosoft.com`. |
123
123
| Configuration | clientId | The React application ID from [step 2.3](#23-register-the-react-app). |
124
-
| protectedResources| endpoint| The URL of the web API: `http://localhost:5000/api/todolist`. |
124
+
| protectedResources| endpoint| The URL of the web API: `http://localhost:5000/hello`. |
125
125
| 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"]`. |
126
126
127
127
Your resulting *src/authConfig.js* code should look similar to the following sample:
@@ -171,7 +171,7 @@ In the sample folder, open the *config.json* file. This file contains informatio
171
171
172
172
|Section |Key |Value |
173
173
|---------|---------|---------|
174
-
|credentials|tenantName|The first part of your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name). For example: `contoso`.|
174
+
|credentials|tenantName|Your Azure AD B2C [domain/tenant name](tenant-management.md#get-your-tenant-name). For example: `contoso.ommicrosoft.com`.|
175
175
|credentials|clientID| The web API application ID from step [2.1](#21-register-the-web-api-application). In the [earlier diagram](#app-registration), it's the application with **App ID: 2**.|
176
176
|credentials| issuer| (Optional) The token issuer `iss` claim value. Azure AD B2C by default returns the token in the following format: `https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/`. Replace `<your-tenant-name>` with the first part of your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name). Replace `<your-tenant-ID>` with your [Azure AD B2C tenant ID](tenant-management.md#get-your-tenant-id). |
177
177
|policies|policyName|The user flow or custom policy that you created in [step 1](#step-1-configure-your-user-flow). If your application uses multiple user flows or custom policies, specify only one. For example, use the sign-up or sign-in user flow.|
@@ -182,7 +182,7 @@ Your final configuration file should look like the following JSON:
@@ -201,7 +201,7 @@ Your final configuration file should look like the following JSON:
201
201
202
202
## Step 5: Run the React SPA and web API
203
203
204
-
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.
204
+
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.
205
205
206
206
### Run the web API
207
207
@@ -251,11 +251,13 @@ You're now ready to test the React scoped access to the API. In this step, run b
251
251

252
252
253
253
1. Choose **Sign in using Popup**, or **Sign in using Redirect**.
254
-
1. Complete the sign-up or sign in process. Upon successful sign in, you should see your profile.
255
-
1. From the menu, select **Hello API**.
256
-
1. Check out the result of the REST API call. The following screenshot shows the React sample REST API return value.
257
-
254
+
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**.
258
255

256
+
1. From the menu, select **HelloAPI** button.
257
+
1. Check out the result of the REST API call. The following screenshot shows the React sample REST API return value:
258
+
259
+
:::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.":::
@@ -470,7 +470,7 @@ In the *config.json* file, update the following properties:
470
470
471
471
|Section |Key |Value |
472
472
|---------|---------|---------|
473
-
| credentials | tenantName |The first part of your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name) (for example, `contoso`).|
473
+
| credentials | tenantName |Your Azure AD B2C [tenant name/domain name](tenant-management.md#get-your-tenant-name) (for example, `contoso.onmicrosoft.com`).|
474
474
| credentials |clientID | The web API application ID. In the [preceding diagram](#app-registration-overview), it's the application with *App ID: 2*. To learn how to get your web API application registration ID, see [Prerequisites](#prerequisites). |
475
475
| credentials | issuer| The token issuer `iss` claim value. By default, Azure AD B2C returns the token in the following format: `https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/`. Replace `<your-tenant-name>` with the first part of your Azure AD B2C [tenant name](tenant-management.md#get-your-tenant-name). Replace `<your-tenant-ID>` with your [Azure AD B2C tenant ID](tenant-management.md#get-your-tenant-id). |
476
476
| policies | policyName | The user flows, or custom policy. To learn how to get your user flow or policy, see [Prerequisites](#prerequisites).|
0 commit comments