azure auth

Author: Tom Gotsman

assets/ai_builder/integrations/azure_auth_1.webp

@@ -11,14 +11,20 @@ import reflex as rx
 from reflex_image_zoom import image_zoom
 ```
 
+
+## Step 1: Set Up Azure App Registration
+
+Before connecting, you need to register your app in Azure Portal:
+
+1 - Go to [Azure Portal](https://portal.azure.com) → **App Registrations**
+
+2 - Click **New registration** as shown in the image below:
+
 ```python eval
 rx.el.div(
     image_zoom(
         rx.image(
-            src=rx.color_mode_cond(
-                "/ai_builder/integrations/azure_auth_light.webp",
-                "/ai_builder/integrations/azure_auth_dark.webp",
-            ),
+            src="/ai_builder/integrations/azure_auth_1.webp",
             class_name="p-2 rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -28,28 +34,60 @@ rx.el.div(
 )
 ```
 
-## Step 1: Set Up Azure App Registration
-
-Before connecting, you need to register your app in Azure Portal:
+3 - Register your app. Ensure that for the Redirect URI you select **Web** and enter the following URI that you find in the Azure Auth Manager integration settings in AI Builder:
+   ```
+   https://{your-sandbox}/authorization-code/callback
+   ```
 
-1. Go to [Azure Portal](https://portal.azure.com) → **App Registrations**
-2. Click **New registration**
-3. Configure your app settings
-4. In **Authentication**, add the Web Redirect URI: `https://{your-sandbox}/authorization-code/callback`
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/azure_auth_2.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
 
-## Step 2: Gather Your Credentials
+4 - On the next page get your `client_id` (`AZURE_CLIENT_ID`) and `tenant_id` (`AZURE_VALID_TENANT_IDS`) from the **Overview** tab.
 
-After registering your app, collect the following information:
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/azure_auth_3.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
 
-- **AZURE_CLIENT_ID**: *Your application (client) ID from App Registration*
+5 - Next click `Add a certificate or secret` and copy the generated secret value (`AZURE_CLIENT_SECRET`).
 
-- **AZURE_CLIENT_SECRET**: *Client secret generated in Certificates & secrets*
+```python eval
+rx.el.div(
+    image_zoom(
+        rx.image(
+            src="/ai_builder/integrations/azure_auth_4.webp",
+            class_name="p-2 rounded-md h-auto",
+            border=f"0.81px solid {rx.color('slate', 5)}",
+        ),
+        class_name="rounded-md overflow-hidden",
+    ),
+    class_name="w-full flex flex-col rounded-md cursor-pointer",
+)
+```
 
-- **AZURE_VALID_TENANT_IDS**: *Comma-separated list of tenant IDs that can access your app*
 
-> **Note:** Keep your client secret secure and use different registrations for development, staging, and production environments.
 
-## Step 3: Configure the Integration
+## Step 2: Configure the Integration
 
 1. Go to the **Integrations** section in your app settings by clicking **`@`** and then clicking the **Integrations** tab at the top.
 2. Click **Add** next to Azure Auth Manager.