Merge pull request #831 from OwenRichards1/registration-includes-spa

[GTD] Registration includes (SPA)

docs/identity-platform/includes/register-app/spa-common/add-platform-redirect-spa-port-3000.md

@@ -0,0 +1,20 @@
+---
+title: "Include file - Add a platform and redirect URI for a single-page application"
+author: OwenRichards1
+manager: CelesteDG
+ms.author: owenrichards
+ms.custom:
+ms.date: 12/13/2023
+ms.reviewer:
+ms.service: active-directory
+ms.subservice: develop
+ms.topic: include
+#Customer intent:
+---
+
+To specify your app type to your app registration, follow these steps:
+
+1. Under **Manage**, select **Authentication**.
+1. On the **Platform configurations** page, select **Add a platform**, and then select **SPA** option.
+1. For the **Redirect URIs** enter `http://localhost:3000`.
+1. Select **Configure** to save your changes.

docs/identity-platform/includes/register-app/spa-common/add-platform-redirect-spa-port-4200.md

@@ -0,0 +1,20 @@
+---
+title: "Include file - Add a platform and redirect URI for a single-page application"
+author: OwenRichards1
+manager: CelesteDG
+ms.author: owenrichards
+ms.custom:
+ms.date: 12/13/2023
+ms.reviewer:
+ms.service: active-directory
+ms.subservice: develop
+ms.topic: include
+#Customer intent:
+---
+
+To specify your app type to your app registration, follow these steps:
+
+1. Under **Manage**, select **Authentication**.
+1. On the **Platform configurations** page, select **Add a platform**, and then select **SPA** option.
+1. For the **Redirect URIs** enter `http://localhost:4200`.
+1. Select **Configure** to save your changes.

docs/identity-platform/includes/register-app/spa-common/register-application-spa-common.md

@@ -0,0 +1,31 @@
+---
+title: "Include file - Register a single-page application in the Microsoft identity platform"
+author: OwenRichards1
+manager: CelesteDG
+ms.author: owenrichards
+ms.custom:
+ms.date: 12/13/2023
+ms.reviewer:
+ms.service: active-directory
+ms.subservice: develop
+ms.topic: include
+#Customer intent:
+---
+
+To complete registration, provide the application a name, specify the supported account types, and add a redirect URI. Once registered, the application **Overview** pane displays the identifiers needed in the application source code.
+
+1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com).
+1. If you have access to multiple tenants, use the **Settings** icon :::image type="icon" source="../../../media/common/admin-center-settings-icon.png" border="false"::: in the top menu to switch to the tenant in which you want to register the application from the **Directories + subscriptions** menu.
+1. Browse to **Identity** > **Applications** > **App registrations**, select **New registration**.
+1. Enter a **Name** for the application, such as *identity-client-spa*.
+1. For **Supported account types**, select **Accounts in this organizational directory only**. For information on different account types, select the **Help me choose** option.
+1. Select **Register**.
+
+    :::image type="content" source="../../../media/common-register-application/register-spa-common.png" alt-text="Screenshot that shows how to enter a name and select the account type in the Azure portal." lightbox="../../../media/common-register-application/record-identifiers-spa-common.png":::
+
+1. The application's **Overview** pane is displayed when registration is complete. Record the **Directory (tenant) ID** and the **Application (client) ID** to be used in your application source code.
+
+    :::image type="content" source="../../../media/common-register-application/record-identifiers-spa-common.png" alt-text="Screenshot that shows the identifier values on the overview page on the Azure portal." lightbox="../../../media/common-register-application/record-identifiers-spa-common.png":::
+
+    >[!NOTE]
+    > The **Supported account types** can be changed by referring to [Modify the accounts supported by an application](../../../howto-modify-supported-accounts.md).

docs/identity-platform/quickstart-single-page-app-react-sign-in.md

@@ -5,8 +5,8 @@ author: henrymbuguakiarie
 manager: CelesteDG
 ms.author: henrymbugua
 ms.custom: scenarios:getting-started, languages:JavaScript, devx-track-js
-ms.date: 10/06/2023
-ms.reviewer: j-mantu
+ms.date: 12/13/2023
+ms.reviewer: EmLauber
 ms.service: active-directory
 ms.subservice: develop
 ms.topic: quickstart
@@ -23,36 +23,25 @@ This quickstart uses a sample React single-page app (SPA) to show you how to sig
 * [Node.js](https://nodejs.org/en/download/)
 * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) or [Visual Studio Code](https://code.visualstudio.com/)
 
-## Register the application in the Microsoft Entra admin center
+## Register the application and record identifiers
 
-1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com) as at least an [Application Developer](~/identity/role-based-access-control/permissions-reference.md#application-developer).
-1. If you have access to multiple tenants, use the **Settings** icon :::image type="icon" source="media/common/admin-center-settings-icon.png" border="false"::: in the top menu to switch to the tenant in which you want to register the application from the **Directories + subscriptions** menu.
-1. Browse to **Identity** > **Applications** > **App registrations**.
-1. Select **New registration**.
-1. When the **Register an application** page appears, enter a name for your application, such as *identity-client-app*.
-1. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts**.
-1. Select **Register**.
-1. The application's Overview pane displays upon successful registration. Record the **Application (client) ID** and **Directory (tenant) ID** to be used in your application source code.
+[!INCLUDE [Register a single-page application](./includes/register-app/spa-common/register-application-spa-common.md)]
 
-## Add a redirect URI
+## Add a platform redirect URI
 
-1. Under **Manage**, select **Authentication**.
-1. Under **Platform configurations**, select **Add a platform**. In the pane that opens, select **Single-page application**.
-1. Set the **Redirect URIs** value to `http://localhost:3000/`.
-1. Select **Configure** to apply the changes.
-1. Under **Platform Configurations** expand **Single-page application**.
-1. Confirm that for **Grant types** ![Already configured](media/quickstart-v2-javascript/green-check.png), your **Redirect URI** is eligible for the Authorization Code Flow with PKCE.
+[!INCLUDE [Add a platform redirect URI](./includes/register-app/spa-common/add-platform-redirect-spa-port-3000.md)]
 
 ## Clone or download the sample application
 
 To obtain the sample application, you can either clone it from GitHub or download it as a *.zip* file.
 
-- To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:
+* To clone the sample, open a command prompt and navigate to where you wish to create the project, and enter the following command:
 
     ```console
     git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
     ```
-- [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-javascript/tree/main). Extract it to a file path where the length of the name is fewer than 260 characters.
+
+* [Download the .zip file](https://github.com/Azure-Samples/ms-identity-docs-code-javascript/tree/main). Extract it to a file path where the length of the name is fewer than 260 characters.
 
 ## Configure the project
 
@@ -75,11 +64,12 @@ Run the project with a web server by using Node.js:
     npm install
     npm start
     ```
+
 1. Copy the `https` URL that appears in the terminal, for example, `https://localhost:3000`, and paste it into a browser. We recommend using a private or incognito browser session.
 1. Follow the steps and enter the necessary details to sign in with your Microsoft account. You'll be requested an email address so a one time passcode can be sent to you. Enter the code when prompted.
 1. The application will request permission to maintain access to data you have given it access to, and to sign you in and read your profile. Select **Accept**. The following screenshot appears, indicating that you have signed in to the application and have accessed your profile details from the Microsoft Graph API.
 
-    :::image type="content" source="./media/single-page-app-tutorial-04-call-api/display-api-call-results.png" alt-text="Screenshot of React App depicting the results of the API call.":::
+    :::image type="content" source="./media/common-spa/react-spa/display-api-call-results-react-spa.png" alt-text="Screenshot of JavaScript App depicting the results of the API call." lightbox="./media/common-spa/react-spa/display-api-call-results-react-spa.png":::
 
 ## Sign out from the application
 
@@ -90,6 +80,6 @@ A message appears indicating that you have signed out. You can now close the bro
 
 ## Related content
 
-- [Quickstart: Protect an ASP.NET Core web API with the Microsoft identity platform](./quickstart-web-api-aspnet-core-protect-api.md)
+* [Quickstart: Protect an ASP.NET Core web API with the Microsoft identity platform](./quickstart-web-api-aspnet-core-protect-api.md)
 
-- Learn more by building this React SPA from scratch with the following series - [Tutorial: Sign in users and call Microsoft Graph](./tutorial-single-page-app-react-register-app.md)
+* Learn more by building this React SPA from scratch with the following series - [Tutorial: Sign in users and call Microsoft Graph](./tutorial-single-page-app-react-register-app.md)

docs/identity-platform/tutorial-single-page-app-react-register-app.md

@@ -4,7 +4,8 @@ description: Register an application in a Microsoft Entra tenant.
 author: OwenRichards1
 manager: CelesteDG
 ms.author: owenrichards
-ms.date: 02/27/2023
+ms.date: 12/13/2023
+ms.reviewer: EmLauber
 ms.service: active-directory
 ms.subservice: develop
 ms.topic: tutorial
@@ -18,6 +19,7 @@ To interact with the Microsoft identity platform, Microsoft Entra ID must be mad
 In this tutorial:
 
 > [!div class="checklist"]
+>
 > * Register the application in a tenant
 > * Add a Redirect URI to the application
 > * Record the application's unique identifiers
@@ -32,28 +34,13 @@ In this tutorial:
 
 ## Register the application and record identifiers
 
-[!INCLUDE [portal updates](~/includes/portal-update.md)]
+[!INCLUDE [Register a single-page application](./includes/register-app/spa-common/register-application-spa-common.md)]
 
-To complete registration, provide the application a name, specify the supported account types, and add a redirect URI. Once registered, the application **Overview** pane displays the identifiers needed in the application source code.
+## Add a platform redirect URI
 
-1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com).
-1. If you have access to multiple tenants, use the **Settings** icon :::image type="icon" source="media/common/admin-center-settings-icon.png" border="false"::: in the top menu to switch to the tenant in which you want to register the application from the **Directories + subscriptions** menu.
-1. Browse to **Identity** > **Applications** > **App registrations**, select **New registration**.
-1. Enter a **Name** for the application, such as *NewSPA1*.
-1. For **Supported account types**, select **Accounts in this organizational directory only**. For information on different account types, select the **Help me choose** option.
-1. Under **Redirect URI (optional)**, use the drop-down menu to select **Single-page-application (SPA)** and enter `http://localhost:3000` into the text box.
-1. Select **Register**.
-
-    :::image type="content" source="./media/single-page-app-tutorial-01-register-app/register-application.png" alt-text="Screenshot that shows how to enter a name and select the account type in the Azure portal.":::
-
-1. The application's **Overview** pane is displayed when registration is complete. Record the **Directory (tenant) ID** and the **Application (client) ID** to be used in your application source code.
-
-    :::image type="content" source="./media/single-page-app-tutorial-01-register-app/record-identifiers.png" alt-text="Screenshot that shows the identifier values on the overview page on the Azure portal.":::
-
-    >[!NOTE]
-    > The **Supported account types** can be changed by referring to [Modify the accounts supported by an application](howto-modify-supported-accounts.md).
+[!INCLUDE [Add a platform redirect URI](./includes/register-app/spa-common/add-platform-redirect-spa-port-3000.md)]
 
 ## Next steps
 
 > [!div class="nextstepaction"]
-> [Tutorial: Prepare an application for authentication](tutorial-single-page-app-react-prepare-spa.md)
+> [Tutorial: Prepare an application for authentication](tutorial-single-page-app-react-prepare-spa.md)