From 0d79a56d18397f08bd90a137fd3fb3e168d666e6 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 30 Sep 2025 19:34:57 +0000
Subject: [PATCH] fix OIDC auto-redirect and clarify configuration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

addresses #327

Changes:
- Removed automatic redirect to OIDC when password auth is configured
- Users can now choose between password auth or SSO button
- Clarified that client_secret is optional for PKCE-supporting providers
- Improved setup instructions to mention PUBLIC_URL requirement
- Made it clear that redirect URL is auto-generated from PUBLIC_URL

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend-modern/src/components/Login.tsx           | 14 ++++++++------
 .../src/components/Settings/OIDCPanel.tsx          |  9 +++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend-modern/src/components/Login.tsx b/frontend-modern/src/components/Login.tsx
index 1beb68706..85880c0d3 100644
--- a/frontend-modern/src/components/Login.tsx
+++ b/frontend-modern/src/components/Login.tsx
@@ -156,12 +156,14 @@ export const Login: Component<LoginProps> = (props) => {
     }
   };
 
-  createEffect(() => {
-    if (!loadingAuth() && supportsOIDC() && !autoOidcTriggered()) {
-      setAutoOidcTriggered(true);
-      startOidcLogin();
-    }
-  });
+  // Only auto-redirect to OIDC if password auth is disabled
+  // This prevents redirect loops when both password and OIDC are configured
+  // createEffect(() => {
+  //   if (!loadingAuth() && supportsOIDC() && !autoOidcTriggered()) {
+  //     setAutoOidcTriggered(true);
+  //     startOidcLogin();
+  //   }
+  // });
 
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
diff --git a/frontend-modern/src/components/Settings/OIDCPanel.tsx b/frontend-modern/src/components/Settings/OIDCPanel.tsx
index d7903abc4..69058170b 100644
--- a/frontend-modern/src/components/Settings/OIDCPanel.tsx
+++ b/frontend-modern/src/components/Settings/OIDCPanel.tsx
@@ -227,10 +227,11 @@ export const OIDCPanel: Component<Props> = (props) => {
         <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 text-xs text-blue-800 dark:text-blue-200">
           <p class="font-semibold mb-2">Getting started</p>
           <ol class="space-y-1 list-decimal pl-5">
+            <li>Set your PUBLIC_URL environment variable to match how users access Pulse.</li>
             <li>
-              Register a confidential client with your IdP and set the redirect URL shown below.
+              Register a public or confidential client with your IdP. Use the redirect URL shown below (auto-generated from PUBLIC_URL).
             </li>
-            <li>Copy the issuer, client ID, and client secret into the fields here.</li>
+            <li>Copy the issuer and client ID into the fields here. Client secret is optional (only needed if your IdP doesn't support PKCE).</li>
             <li>
               Grant scopes such as{' '}
               <code class="px-1 py-0.5 bg-blue-100/70 dark:bg-blue-900/40 rounded">
@@ -239,7 +240,7 @@ export const OIDCPanel: Component<Props> = (props) => {
               .
             </li>
             <li>Optionally restrict access by domain, email, or groups.</li>
-            <li>Save, then sign out to test the new SSO button.</li>
+            <li>Save, then test using the SSO button on the login page (password auth still works).</li>
           </ol>
         </div>
         <Show when={loading()}>
@@ -321,7 +322,7 @@ export const OIDCPanel: Component<Props> = (props) => {
                 disabled={isEnvLocked() || saving()}
               />
               <p class={formHelpText}>
-                Leave blank to keep the existing secret. Use "Clear" to remove it from storage.
+                Optional - Leave blank if your provider supports PKCE (Zitadel, Authentik, etc). Otherwise, enter your client secret.
               </p>
             </div>
             <div class={formField}>