Add conditional rendering of auth providers based on server config (#9752)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/src/api/open-hands.types.ts

@@ -50,6 +50,7 @@ export interface GetConfigResponse {
   GITHUB_CLIENT_ID: string;
   POSTHOG_CLIENT_KEY: string;
   STRIPE_PUBLISHABLE_KEY?: string;
+  PROVIDERS_CONFIGURED?: Provider[];
   FEATURE_FLAGS: {
     ENABLE_BILLING: boolean;
     HIDE_LLM_SETTINGS: boolean;

frontend/src/components/features/waitlist/auth-modal.tsx

@@ -10,13 +10,19 @@ import GitLabLogo from "#/assets/branding/gitlab-logo.svg?react";
 import BitbucketLogo from "#/assets/branding/bitbucket-logo.svg?react";
 import { useAuthUrl } from "#/hooks/use-auth-url";
 import { GetConfigResponse } from "#/api/open-hands.types";
+import { Provider } from "#/types/settings";
 
 interface AuthModalProps {
   githubAuthUrl: string | null;
   appMode?: GetConfigResponse["APP_MODE"] | null;
+  providersConfigured?: Provider[];
 }
 
-export function AuthModal({ githubAuthUrl, appMode }: AuthModalProps) {
+export function AuthModal({
+  githubAuthUrl,
+  appMode,
+  providersConfigured,
+}: AuthModalProps) {
   const { t } = useTranslation();
 
   const gitlabAuthUrl = useAuthUrl({
@@ -50,6 +56,24 @@ export function AuthModal({ githubAuthUrl, appMode }: AuthModalProps) {
     }
   };
 
+  // Only show buttons if providers are configured and include the specific provider
+  const showGithub =
+    providersConfigured &&
+    providersConfigured.length > 0 &&
+    providersConfigured.includes("github");
+  const showGitlab =
+    providersConfigured &&
+    providersConfigured.length > 0 &&
+    providersConfigured.includes("gitlab");
+  const showBitbucket =
+    providersConfigured &&
+    providersConfigured.length > 0 &&
+    providersConfigured.includes("bitbucket");
+
+  // Check if no providers are configured
+  const noProvidersConfigured =
+    !providersConfigured || providersConfigured.length === 0;
+
   return (
     <ModalBackdrop>
       <ModalBody className="border border-tertiary">
@@ -61,35 +85,49 @@ export function AuthModal({ githubAuthUrl, appMode }: AuthModalProps) {
         </div>
 
         <div className="flex flex-col gap-3 w-full">
-          <BrandButton
-            type="button"
-            variant="primary"
-            onClick={handleGitHubAuth}
-            className="w-full"
-            startContent={<GitHubLogo width={20} height={20} />}
-          >
-            {t(I18nKey.GITHUB$CONNECT_TO_GITHUB)}
-          </BrandButton>
+          {noProvidersConfigured ? (
+            <div className="text-center p-4 text-muted-foreground">
+              {t(I18nKey.AUTH$NO_PROVIDERS_CONFIGURED)}
+            </div>
+          ) : (
+            <>
+              {showGithub && (
+                <BrandButton
+                  type="button"
+                  variant="primary"
+                  onClick={handleGitHubAuth}
+                  className="w-full"
+                  startContent={<GitHubLogo width={20} height={20} />}
+                >
+                  {t(I18nKey.GITHUB$CONNECT_TO_GITHUB)}
+                </BrandButton>
+              )}
 
-          <BrandButton
-            type="button"
-            variant="primary"
-            onClick={handleGitLabAuth}
-            className="w-full"
-            startContent={<GitLabLogo width={20} height={20} />}
-          >
-            {t(I18nKey.GITLAB$CONNECT_TO_GITLAB)}
-          </BrandButton>
+              {showGitlab && (
+                <BrandButton
+                  type="button"
+                  variant="primary"
+                  onClick={handleGitLabAuth}
+                  className="w-full"
+                  startContent={<GitLabLogo width={20} height={20} />}
+                >
+                  {t(I18nKey.GITLAB$CONNECT_TO_GITLAB)}
+                </BrandButton>
+              )}
 
-          <BrandButton
-            type="button"
-            variant="primary"
-            onClick={handleBitbucketAuth}
-            className="w-full"
-            startContent={<BitbucketLogo width={20} height={20} />}
-          >
-            {t(I18nKey.BITBUCKET$CONNECT_TO_BITBUCKET)}
-          </BrandButton>
+              {showBitbucket && (
+                <BrandButton
+                  type="button"
+                  variant="primary"
+                  onClick={handleBitbucketAuth}
+                  className="w-full"
+                  startContent={<BitbucketLogo width={20} height={20} />}
+                >
+                  {t(I18nKey.BITBUCKET$CONNECT_TO_BITBUCKET)}
+                </BrandButton>
+              )}
+            </>
+          )}
         </div>
 
         <p

frontend/src/i18n/declaration.ts

@@ -686,6 +686,7 @@ export enum I18nKey {
   MICROAGENT_MANAGEMENT$DESCRIPTION = "MICROAGENT_MANAGEMENT$DESCRIPTION",
   MICROAGENT_MANAGEMENT$USE_MICROAGENTS = "MICROAGENT_MANAGEMENT$USE_MICROAGENTS",
   AUTH$BY_SIGNING_UP_YOU_AGREE_TO_OUR = "AUTH$BY_SIGNING_UP_YOU_AGREE_TO_OUR",
+  AUTH$NO_PROVIDERS_CONFIGURED = "AUTH$NO_PROVIDERS_CONFIGURED",
   COMMON$TERMS_OF_SERVICE = "COMMON$TERMS_OF_SERVICE",
   COMMON$AND = "COMMON$AND",
   COMMON$PRIVACY_POLICY = "COMMON$PRIVACY_POLICY",

frontend/src/i18n/translation.json

@@ -10975,6 +10975,22 @@
         "de": "Mit der Anmeldung stimmen Sie unseren",
         "uk": "Реєструючись, ви погоджуєтеся з нашими"
     },
+    "AUTH$NO_PROVIDERS_CONFIGURED": {
+        "en": "At least one identity provider must be configured (e.g., GitHub)",
+        "ja": "少なくとも1つのIDプロバイダーを設定する必要があります（例：GitHub）",
+        "zh-CN": "必须配置至少一个身份提供商（例如 GitHub）",
+        "zh-TW": "必須配置至少一個身份提供商（例如 GitHub）",
+        "ko-KR": "최소 하나의 ID 제공자를 구성해야 합니다 (예: GitHub)",
+        "no": "Minst én identitetsleverandør må konfigureres (f.eks. GitHub)",
+        "it": "Deve essere configurato almeno un provider di identità (ad es. GitHub)",
+        "pt": "Pelo menos um provedor de identidade deve ser configurado (ex: GitHub)",
+        "es": "Debe configurarse al menos un proveedor de identidad (ej: GitHub)",
+        "ar": "يجب تكوين مزود هوية واحد على الأقل (مثل GitHub)",
+        "fr": "Au moins un fournisseur d'identité doit être configuré (ex: GitHub)",
+        "tr": "En az bir kimlik sağlayıcı yapılandırılmalıdır (örn. GitHub)",
+        "de": "Mindestens ein Identitätsanbieter muss konfiguriert werden (z.B. GitHub)",
+        "uk": "Принаймні один постачальник ідентифікації має бути налаштований (наприклад, GitHub)"
+    },
     "COMMON$TERMS_OF_SERVICE": {
         "en": "Terms of Service",
         "ja": "利用規約",

frontend/src/routes/root-layout.tsx

@@ -214,6 +214,7 @@ export default function MainApp() {
         <AuthModal
           githubAuthUrl={effectiveGitHubAuthUrl}
           appMode={config.data?.APP_MODE}
+          providersConfigured={config.data?.PROVIDERS_CONFIGURED}
         />
       )}
       {renderReAuthModal && <ReauthModal />}