fix: Readme changes for App registration

docs/ConfigureAppAuthentication.md

@@ -11,97 +11,135 @@ This document provides step-by-step instructions to configure Azure App Registra
 
 We will add Microsoft Entra ID as an authentication provider to API and Web Application.
 
-1. Add Authentication Provider in Web Application
+1.1. Add Authentication Provider in Web Application 🌐
+
+   - Go to deployed Container App and select `ca-<randomname>-web` and click **Add Identity Provider** button in Authentication. 
 
-   - Go to deployed Container App and select `ca-<randomname>-web` and click **Add Identity Provider** button in Authentication.  
      ![add_auth_provider_web_1](./images/add_auth_provider_web_1.png)
 
-   - Select **Microsoft** and set **Client secret expiration**, then click **Add** button.  
+      > ⚠️ **Note:** If you encounter the following error message indicating that your organization's policy prohibits the automatic use of secrets, please refer to our [Manual App Registration Configuration](./ManualAppRegistrationConfiguration.md) for detailed manual setup instructions.
+      > ![add_auth_provider_web_3](./images/add_auth_provider_web_3.png)
+
+   - Select **Microsoft** and set **Client secret expiration**, then click **Add** button. 
+
      ![add_auth_provider_web_2](./images/add_auth_provider_web_2.png)
 
-    - Set **Unauthenticated requests**, then click **Add** button.  
-     ![add_auth_provider_api_3](./images/add_auth_provider_web_4.png)
+   - Set **Unauthenticated requests**, then click **Add** button.  
 
-> **Note:** If you encounter the following error message indicating that your organization's policy prohibits the automatic use of secrets, please refer to our [Manual App Registration Configuration](./ManualAppRegistrationConfiguration.md) for detailed manual setup instructions.
->  ![add_auth_provider_web_3](./images/add_auth_provider_web_3.png)
+     ![add_auth_provider_api_3](./images/add_auth_provider_web_4.png)
 
 
 
-1. Add Authentication Provider in API Service
+1.2. Add Authentication Provider in API Service 🧩
 
    - Go to deployed Container App and select `ca-<randomname>-api` and click **Add Identity Provider** button in Authentication.  
+
      ![add_auth_provider_api_1](./images/add_auth_provider_api_1.png)
 
    - Select **Microsoft** and set **Client secret expiration**.  
+
      ![add_auth_provider_api_2](./images/add_auth_provider_api_2.png)
 
    - Set **Unauthenticated requests**, then click **Add** button.  
+
      ![add_auth_provider_api_3](./images/add_auth_provider_api_3.png)
 
-## Step 2: Configure Application Registration - Web Application
+## Step 2: Configure Application Registration - Web Application 🌐
 
-1. Set Redirect URI in Single Page Application Platform
+2.1. Set Redirect URI in Single Page Application Platform
 
    - Go to deployed Container App `ca-<randomname>-web` and select **Authentication** menu, then select created Application Registration.  
+
      ![configure_app_registration_web_1](./images/configure_app_registration_web_1.png)
 
-   - Select **Authentication**, then select **+ Add a platform** menu.  
+   - Select **Authentication**, then select **+ Add Redirect URI** menu.  
+
      ![configure_app_registration_web_2](./images/configure_app_registration_web_2.png)
 
+     (if using **old environment**)
+
+     Select **Authentication**, then select **+ Add a platform** menu.  
+
+     ![configure_app_registration_web_2_without_preview](./images/configure_app_registration_web_2_without_preview.png)
+
    - Select **Single-page application**.  
+
      ![configure_app_registration_web_3](./images/configure_app_registration_web_3.png)
 
+     (if using **old environment**)
+
+     Select **Single-page application**.  
+
+     ![configure_app_registration_web_3_without_preview](./images/configure_app_registration_web_3_without_preview.png)
+
    - Add Container App `ca-<randomname>-web`'s URL.  
+
      ![configure_app_registration_web_4](./images/configure_app_registration_web_4.png)
 
+     (if using **old environment**)
+
+     Add Container App `ca-<randomname>-web`'s URL.  
+
+     ![configure_app_registration_web_4_without_preview](./images/configure_app_registration_web_4_without_preview.png)
+
    - You may get this URL from here in your Container App.  
+
      ![configure_app_registration_web_5](./images/configure_app_registration_web_5.png)
 
-2. Add Permission and Grant Permission
+2.2. Add Permission and Grant Permission
 
    - Add Permission for API application. Select **+ Add a permission** button, then search API application with name `ca-<randomname>-api`.  
+
      ![configure_app_registration_web_6](./images/configure_app_registration_web_6.png)  
+
      ![configure_app_registration_web_7](./images/configure_app_registration_web_7.png)
 
-   - Grant admin consent to permissions.  
+   - Click **Grant admin consent** to grant permissions. Then verify the permissions status should show as marked in **Green**
+
      ![configure_app_registration_web_8](./images/configure_app_registration_web_8.png)
 
      > ⚠️ **Granting Admin Consent:** If you don't have permission or aren't able to grant admin consent for the API permissions, please follow one of the steps below:<br/><br/>_Option 1 - Reach out to your Tenant Administrator:_ Contact your administrator to let them know your Application Registration ID and what permissions you woud like to have them consent and approve.<br/><br/>_Option 2 - Internal Microsoft Employees Only:_ Please refer to these detailed instructions on the admin consent granting process: [https://aka.ms/AzAdminConsentWiki](https://aka.ms/AzAdminConsentWiki)
 
 
 
-3. Grab Scope Name for Impersonation
+2.3. Grab Scope Name for Impersonation
 
    - Select **Expose an API** in the left menu. Copy the Scope name, then paste it in some temporary place.  
      The copied text will be used for Web Application Environment variable - **APP_WEB_SCOPE**.  
+
      ![configure_app_registration_web_9](./images/configure_app_registration_web_9.png)
 
-4. Grab Client Id for Web App
+2.4. Grab Client Id for Web App
 
    - Select **Overview** in the left menu. Copy the Client Id, then paste it in some temporary place.  
      The copied text will be used for Web Application Environment variable - **APP_WEB_CLIENT_ID**.  
+
      ![configure_app_registration_web_10](./images/configure_app_registration_web_10.png)
 
-## Step 3: Configure Application Registration - API Application
+## Step 3: Configure Application Registration - API Application 🧩
 
-1. Grab Scope Name for Impersonation
+3.1. Grab Scope Name for Impersonation
 
    - Go to deployed Container App `ca-<randomname>-api` and select **Authentication** menu, then select created Application Registration.  
+
      ![configure_app_registration_api_1](./images/configure_app_registration_api_1.png)
 
    - Select **Expose an API** in the left menu. Copy the Scope name, then paste it in some temporary place.  
      The copied text will be used for Web Application Environment variable - **APP_API_SCOPE**.  
+
      ![configure_app_registration_api_2](./images/configure_app_registration_api_2.png)
 
 ## Step 4: Add Web Application's Client Id to Allowed Client Applications List in API Application Registration
 
-1. Go to the deployed Container App `ca-<randomname>-api`, select **Authentication**, and then click **Edit**.  
+4.1. Go to the deployed Container App `ca-<randomname>-api`, select **Authentication**, and then click **Edit**.  
+
    ![add_client_id_to_api_1](./images/add_client_id_to_api_1.png)
 
-2. Select **Allow requests from specific client applications**, then click the **pencil** icon to add the Client Id.  
+4.2. Select **Allow requests from specific client applications**, then click the **pencil** icon to add the Client Id.  
+
    ![add_client_id_to_api_2](./images/add_client_id_to_api_2.png)
 
-3. Add the **Client Id** obtained from [Step 2: Configure Application Registration - Web Application](#step-2-configure-application-registration---web-application), then save.  
+4.3. Add the **Client Id** obtained from [Step 2: Configure Application Registration - Web Application](#step-2-configure-application-registration---web-application), then save.  
    ![add_client_id_to_web_3](./images/add_client_id_to_web_3.png)
 
 ## Step 5: Update Environment Variable in Container App for Web Application
@@ -110,9 +148,11 @@ In previous steps for [Configure Application Registration - Web Application](#st
 
 Now, we will edit and deploy the Web Application Container with updated Environment variables.
 
-1. Select **Containers** menu under **Application**. Then click **Environment variables** tab.
+5.1. Select **Containers** menu under **Application**. Then click **Environment variables** tab.
+
 ![update_env_app_1_1](./images/update_env_app_1_1.png)
-2. Update 3 values which were taken in previous steps for **APP_WEB_CLIENT_ID**, **APP_WEB_SCOPE**, **APP_API_SCOPE**.  
+
+5.2. Update 3 values which were taken in previous steps for **APP_WEB_CLIENT_ID**, **APP_WEB_SCOPE**, **APP_API_SCOPE**.  
 Click on **Save as a new revision**.
    The updated revision will be activated soon.
 

docs/ManualAppRegistrationConfiguration.md

@@ -7,14 +7,14 @@ This guide provides detailed steps to manually register both front-end and backe
 - Necessary permissions to create and manage **App Registrations** in your Azure tenant
 
 ## Step 1: Register the Web Application
-### 1. Create App Registration
+### 1.1. Create App Registration
 - Go to **Azure Portal** > **Microsoft Entra ID** > **Manage** > **App registrations**
 - Click **+ New registration**
 - Name the app (e.g., `cps-app-web`)
 - Under **Redirect URI**, choose **Web** and enter:
 
   ```
-  https://<web-app-url>azurecontainerapps.io/auth/login/aad/callback
+  https://<web-app-url>azurecontainerapps.io/.auth/login/aad/callback
   ```
 
   To find your Web App URL:
@@ -26,7 +26,7 @@ This guide provides detailed steps to manually register both front-end and backe
   ![manual_register_app_web_1](./images/manual_register_app_web_1.png)
 
 
-### 2. Expose an API
+### 1.2. Expose an API
 
 - Navigate to **Expose an API**
 - Click **+ Add a scope**
@@ -40,7 +40,7 @@ This guide provides detailed steps to manually register both front-end and backe
   ![manual_register_app_web_2](./images/manual_register_app_web_2.png)
 
 
-### 3. Configure Certificates and Secrets
+### 1.3. Configure Certificates and Secrets
 
 - Go to **Certificates & secrets**
 - Click **+ New client secret**
@@ -49,15 +49,16 @@ This guide provides detailed steps to manually register both front-end and backe
 - Start (Optional for custom range): Set the starting date of the secret's validity
 - End (Optional for custom range): Set the ending date of the secret's validity
 - Click **Add** and remember to copy and store the secret value securely as it will not be shown again
-![manual_register_app_web_3](./images/manual_register_app_web_3.png)
 
-### 3. Get Tenant ID
+  ![manual_register_app_web_3](./images/manual_register_app_web_3.png)
+
+### 1.4. Get Tenant ID
 - Go to **Tenant Properties** in [Azure Portal](https://portal.azure.com)
 - Copy the Tenant ID (will be used in next step)
 
-![manual_register_app_web_6](./images/manual_register_app_web_6.png)
+  ![manual_register_app_web_6](./images/manual_register_app_web_6.png)
 
-### 4. Set Up Authentication in Web Container App
+### 1.5. Set Up Authentication in Web Container App
 
 - Go to your Web Container App
 - Go to **Authentication**
@@ -72,10 +73,16 @@ This guide provides detailed steps to manually register both front-end and backe
 
 ![manual_register_app_web_4](./images/manual_register_app_web_4.png)
 
+### 1.6. Enable ID Token for the Application
+
+- Go to **App registrations** and select your application
+- Click **Authentication** , select **Settings** , check **ID tokens** and click **Save**
+
+![manual_register_app_web_7](./images/manual_register_app_web_7.png)
 
 ## Step 2: Register API Application
 
-### 1. Create App Registration
+### 2.1. Create App Registration
 - Go to **Azure Portal** > **Microsoft Entra ID** > **Manage** > **App registrations**
 - Click **+ New registration**
 - Name the app (e.g., `cps-app-api`)
@@ -93,7 +100,7 @@ This guide provides detailed steps to manually register both front-end and backe
 - Click **Register**  
   ![manual_register_app_api_1](./images/manual_register_app_api_1.png)
 
-  ### 2. Expose an API
+  ### 2.2. Expose an API
 
 - Go to **Expose an API**
 - Click **+ Add a scope**
@@ -104,7 +111,7 @@ This guide provides detailed steps to manually register both front-end and backe
 - Click **Add scope**  
 ![manual_register_app_api_2](./images/manual_register_app_api_2.png)
 
-### 3. Configure Certificates and Secrets
+### 2.3. Configure Certificates and Secrets
 
 - Go to **Certificates & secrets**
 - Click **+ New client secret**
@@ -115,7 +122,7 @@ This guide provides detailed steps to manually register both front-end and backe
 - Click **Add** and remember to copy and store the secret value securely as it will not be shown again
 ![manual_register_app_api_3](./images/manual_register_app_api_3.png)
 
-### 4. Set Up Authentication in API Container App
+### 2.4. Set Up Authentication in API Container App
 
 - Navigate to your API Container App
 - Go to **Authentication**