headless login SSA UX 재구성

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -175,6 +175,7 @@ function ClientDetailsPage() {
   }
 
   const client = data?.client;
+  const isHeadlessLogin = client?.metadata?.headless_login_enabled === true;
   if (!client) {
     return null;
   }
@@ -213,16 +214,21 @@ function ClientDetailsPage() {
     },
   ];
 
-  const hasClientSecret = client.type === "private";
+  const hasClientSecret = client.type === "private" && !isHeadlessLogin;
   const secretPlaceholder = "SECRET_NOT_AVAILABLE";
   const clientSecret = hasClientSecret
     ? client?.clientSecret || secretPlaceholder
     : t("ui.common.na", "N/A");
   const displaySecret = !hasClientSecret
-    ? t(
+    ? isHeadlessLogin
-        "msg.dev.clients.details.secret_not_applicable",
+      ? t(
-        "PKCE 앱에는 Client Secret이 없습니다.",
+          "msg.dev.clients.details.secret_not_applicable_headless",
-      )
+          "이 앱은 Headless Login용 signed key 인증을 사용하므로 Client Secret을 사용하지 않습니다.",
+        )
+      : t(
+          "msg.dev.clients.details.secret_not_applicable",
+          "PKCE 앱에는 Client Secret이 없습니다.",
+        )
     : clientSecret === secretPlaceholder
       ? t("msg.dev.clients.details.secret_unavailable", "SECRET_NOT_AVAILABLE")
       : clientSecret;
@@ -394,10 +400,15 @@ function ClientDetailsPage() {
                   </div>
                   {!hasClientSecret ? (
                     <p className="mt-2 text-sm text-muted-foreground">
-                      {t(
+                      {isHeadlessLogin
-                        "msg.dev.clients.details.secret_not_applicable",
+                        ? t(
-                        "PKCE 앱에는 Client Secret이 없습니다.",
+                            "msg.dev.clients.details.secret_not_applicable_headless",
-                      )}
+                            "이 앱은 Headless Login용 signed key 인증을 사용하므로 Client Secret을 사용하지 않습니다.",
+                          )
+                        : t(
+                            "msg.dev.clients.details.secret_not_applicable",
+                            "PKCE 앱에는 Client Secret이 없습니다.",
+                          )}
                     </p>
                   ) : null}
                 </div>

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -391,12 +391,13 @@ function ClientGeneralPage() {
   useEffect(() => {
     if (!data) return;
     const { client } = data;
+    const metadata = client.metadata ?? {};
+    const headlessEnabled = !!metadata.headless_login_enabled;
+
     setName(client.name || client.id);
-    setClientType(client.type);
+    setClientType(headlessEnabled ? "private" : client.type);
     setStatus(client.status);
     setInitialStatus(client.status);
-
-    const metadata = client.metadata ?? {};
     if (typeof metadata.description === "string")
       setDescription(metadata.description);
     if (typeof metadata.logo_url === "string") setLogoUrl(metadata.logo_url);
@@ -412,7 +413,6 @@ function ClientGeneralPage() {
     if (typeof metadata.auto_login_url === "string")
       setAutoLoginUrl(metadata.auto_login_url);
 
-    const headlessEnabled = !!metadata.headless_login_enabled;
     setHeadlessLoginEnabled(headlessEnabled);
     const restrictedTenants = Array.isArray(metadata.allowed_tenants)
       ? metadata.allowed_tenants
@@ -532,18 +532,25 @@ function ClientGeneralPage() {
   const handleSecurityProfileChange = (profile: SecurityProfile) => {
     setClientType(profile);
     if (profile === "pkce") {
-      setTokenEndpointAuthMethod(
+      setHeadlessLoginEnabled(false);
-        headlessLoginEnabled ? "private_key_jwt" : "none",
+      setTokenEndpointAuthMethod("none");
-      );
     } else {
-      setTokenEndpointAuthMethod("client_secret_basic");
+      setTokenEndpointAuthMethod(
+        headlessLoginEnabled ? "private_key_jwt" : "client_secret_basic",
+      );
     }
   };
 
   const handleHeadlessToggle = (enabled: boolean) => {
     setHeadlessLoginEnabled(enabled);
-    if (clientType === "pkce") {
+    if (enabled) {
-      setTokenEndpointAuthMethod(enabled ? "private_key_jwt" : "none");
+      setClientType("private");
+      setTokenEndpointAuthMethod("private_key_jwt");
+      return;
+    }
+
+    if (clientType === "private") {
+      setTokenEndpointAuthMethod("client_secret_basic");
     }
   };
 
@@ -974,14 +981,14 @@ function ClientGeneralPage() {
         .map((scope) => scope.name.trim())
         .filter(Boolean);
 
-      const effectiveTokenEndpointAuthMethod =
+      const persistedClientType = headlessLoginEnabled ? "pkce" : clientType;
-        clientType === "pkce" && headlessLoginEnabled
+      const effectiveTokenEndpointAuthMethod = headlessLoginEnabled
-          ? "none"
+        ? "none"
-          : tokenEndpointAuthMethod;
+        : tokenEndpointAuthMethod;
 
       const payload: ClientUpsertRequest = {
         name,
-        type: clientType,
+        type: persistedClientType,
         scopes: scopeNames,
         tokenEndpointAuthMethod: effectiveTokenEndpointAuthMethod,
         jwksUri:
@@ -1003,14 +1010,10 @@ function ClientGeneralPage() {
           id_token_claims: normalizedIdTokenClaims,
           token_endpoint_auth_method: effectiveTokenEndpointAuthMethod,
           headless_login_enabled: headlessLoginEnabled,
-          headless_token_endpoint_auth_method:
+          headless_token_endpoint_auth_method: headlessLoginEnabled
-            clientType === "pkce" && headlessLoginEnabled
+            ? tokenEndpointAuthMethod
-              ? tokenEndpointAuthMethod
+            : undefined,
-              : undefined,
+          headless_jwks_uri: headlessLoginEnabled ? trimmedJwksUri : undefined,
-          headless_jwks_uri:
-            clientType === "pkce" && headlessLoginEnabled
-              ? trimmedJwksUri
-              : undefined,
           tenant_access_restricted: tenantAccessRestricted,
           allowed_tenants: tenantAccessRestricted
             ? normalizedAllowedTenantIds
@@ -2291,6 +2294,38 @@ function ClientGeneralPage() {
               <span className="absolute right-4 top-4 text-primary">
                 {securityProfile === "private" ? "✓" : ""}
               </span>
+
+              {securityProfile === "private" && (
+                <div
+                  className="mt-4 flex items-center justify-between border-t border-primary/20 pt-4"
+                  onClick={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => e.stopPropagation()}
+                >
+                  <div className="space-y-0.5">
+                    <Label
+                      className="cursor-pointer text-xs font-bold"
+                      htmlFor="headless-login-toggle"
+                    >
+                      {t(
+                        "ui.dev.clients.general.security.headless_login_enable",
+                        "Headless Login (자체 로그인 UI 사용)",
+                      )}
+                    </Label>
+                    <p className="text-[10px] text-muted-foreground">
+                      {t(
+                        "msg.dev.clients.general.security.headless_login_enable_help",
+                        "Baron SSO 로그인 창 대신 RP 자체 로그인 UI를 사용하고, RP backend의 서명 키로 클라이언트를 검증하려는 경우 활성화합니다.",
+                      )}
+                    </p>
+                  </div>
+                  <Switch
+                    id="headless-login-toggle"
+                    checked={headlessLoginEnabled}
+                    onCheckedChange={handleHeadlessToggle}
+                    disabled={isGeneralSettingsReadOnly}
+                  />
+                </div>
+              )}
             </label>
 
             <label
@@ -2321,45 +2356,13 @@ function ClientGeneralPage() {
               <span className="absolute right-4 top-4 text-primary">
                 {securityProfile === "pkce" ? "✓" : ""}
               </span>
-
-              {securityProfile === "pkce" && (
-                <div
-                  className="mt-4 pt-4 border-t border-primary/20 flex items-center justify-between"
-                  onClick={(e) => e.stopPropagation()}
-                  onKeyDown={(e) => e.stopPropagation()}
-                >
-                  <div className="space-y-0.5">
-                    <Label
-                      className="text-xs font-bold cursor-pointer"
-                      htmlFor="headless-login-toggle"
-                    >
-                      {t(
-                        "ui.dev.clients.general.security.headless_login_enable",
-                        "Headless Login (자체 로그인 UI 사용)",
-                      )}
-                    </Label>
-                    <p className="text-[10px] text-muted-foreground">
-                      {t(
-                        "ui.dev.clients.general.security.headless_login_enable_help",
-                        "Baron SSO 로그인 창을 거치지 않고 애플리케이션 내의 자체 로그인 화면을 직접 구현하고 싶은 경우 활성화합니다.",
-                      )}
-                    </p>
-                  </div>
-                  <Switch
-                    id="headless-login-toggle"
-                    checked={headlessLoginEnabled}
-                    onCheckedChange={handleHeadlessToggle}
-                    disabled={isGeneralSettingsReadOnly}
-                  />
-                </div>
-              )}
             </label>
           </div>
         </CardContent>
       </Card>
 
       {/* 4. Public Key Registration (Headless Login) */}
-      {clientType === "pkce" && headlessLoginEnabled && (
+      {headlessLoginEnabled && (
         <Card className="glass-panel border-primary/20">
           <CardHeader className="pb-3">
             <div className="flex flex-wrap items-start justify-between gap-3">
@@ -2373,7 +2376,7 @@ function ClientGeneralPage() {
                 <CardDescription>
                   {t(
                     "msg.dev.clients.general.public_key.subtitle",
-                    "Headless Login 판정에 필요한 공개키와 관련 설정을 관리합니다.",
+                    "Server side App의 Headless Login capability에 필요한 공개키와 검증 정보를 관리합니다.",
                   )}
                 </CardDescription>
               </div>
@@ -2392,7 +2395,7 @@ function ClientGeneralPage() {
                   <p className="mt-1 text-xs text-muted-foreground">
                     {t(
                       "msg.dev.clients.general.public_key.headless_help",
-                      "애플리케이션 고유의 디자인으로 로그인 화면을 구성할 수 있습니다. 실제 아이디/비밀번호 확인 및 보안 검증 로직은 Baron API를 통해 백그라운드에서 처리됩니다.",
+                      "RP가 자체 로그인 UI를 제공하더라도 실제 인증 흐름은 Baron API와 RP backend의 signed key 검증을 통해 이어집니다.",
                     )}
                   </p>
                 </div>

devfront/src/features/clients/ClientsPage.tsx

@@ -524,18 +524,28 @@ function ClientsPage() {
                     </div>
                   </TableCell>
                   <TableCell>
-                    <Badge
+                    <div className="flex flex-wrap items-center gap-2">
-                      variant={client.type === "private" ? "success" : "muted"}
+                      <Badge
-                    >
+                        variant={
-                      {client.type === "private"
+                          client.type === "private" ||
-                        ? t("ui.dev.clients.type.private", "Server side App")
+                          client.metadata?.headless_login_enabled
-                        : client.metadata?.headless_login_enabled
+                            ? "success"
+                            : "muted"
+                        }
+                      >
+                        {client.metadata?.headless_login_enabled
                           ? t(
-                              "ui.dev.clients.type.pkce_headless",
+                              "ui.dev.clients.type.private_headless",
-                              "PKCE (Headless Login)",
+                              "Server side App (Headless Login)",
                             )
-                          : t("ui.dev.clients.type.pkce", "PKCE")}
+                          : client.type === "private"
-                    </Badge>
+                            ? t(
+                                "ui.dev.clients.type.private",
+                                "Server side App",
+                              )
+                            : t("ui.dev.clients.type.pkce", "PKCE")}
+                      </Badge>
+                    </div>
                   </TableCell>
                   <TableCell>
                     <Badge

devfront/src/locales/en.toml

@@ -376,6 +376,7 @@ save_error = "Save Error"
 save_forbidden = "You do not have permission to edit this RP. Ask an administrator to grant RP General Settings or RP Admin relationship."
 secret_rotated = "Secret Rotated"
 secret_not_applicable = "PKCE apps do not have a client secret."
+secret_not_applicable_headless = "This app uses signed key authentication for Headless Login, so it does not use a client secret."
 secret_unavailable = "SECRET_NOT_AVAILABLE"
 subtitle = "Manage OIDC credentials and endpoints."
 
@@ -1545,7 +1546,7 @@ pkce = "PKCE"
 headless_login = "Headless Login"
 title = "Security Settings"
 headless_login_enable = "Headless Login (Custom Login UI)"
-headless_login_enable_help = "Enable this if you want to implement your own login screen within the app instead of using the Baron SSO login page."
+headless_login_enable_help = "Enable this when the RP uses its own login UI and the RP backend proves the client with signed keys instead of the Baron SSO login page."
 
 [ui.dev.clients.general.public_key]
 auth_method = "Token Endpoint Auth Method"
@@ -1688,6 +1689,7 @@ type = "Type"
 pkce = "PKCE"
 private = "Server side App"
 pkce_headless = "PKCE (Headless Login)"
+private_headless = "Server side App (Headless Login)"
 
 [ui.dev.dashboard]
 ready_badge = "devfront ready"

devfront/src/locales/ko.toml

@@ -376,6 +376,7 @@ save_error = "저장 실패: {{error}}"
 save_forbidden = "이 RP 설정을 수정할 권한이 없습니다.\n관리자에게 RP 일반 설정 또는 RP 관리자 관계 부여를 요청해 주세요."
 secret_rotated = "Client Secret이 재발급되었습니다."
 secret_not_applicable = "PKCE 앱에는 Client Secret이 없습니다."
+secret_not_applicable_headless = "이 앱은 Headless Login용 signed key 인증을 사용하므로 Client Secret을 사용하지 않습니다."
 secret_unavailable = "SECRET_NOT_AVAILABLE"
 subtitle = "OIDC 자격 증명과 엔드포인트를 관리합니다."
 
@@ -1543,7 +1544,7 @@ private = "Server side App"
 pkce = "PKCE"
 title = "보안 설정"
 headless_login_enable = "Headless Login (자체 로그인 UI 사용)"
-headless_login_enable_help = "Baron SSO 로그인 창을 거치지 않고 애플리케이션 내의 자체 로그인 화면을 직접 구현하고 싶은 경우 활성화합니다."
+headless_login_enable_help = "Baron SSO 로그인 창 대신 RP 자체 로그인 UI를 사용하고, RP backend의 서명 키로 클라이언트를 검증하려는 경우 활성화합니다."
 
 
 [ui.dev.clients.general.public_key]
@@ -1687,6 +1688,7 @@ type = "유형"
 private = "Server side App"
 pkce = "PKCE"
 pkce_headless = "PKCE (Headless Login)"
+private_headless = "Server side App (Headless Login)"
 
 [ui.dev.dashboard]
 ready_badge = "devfront ready"

devfront/src/locales/template.toml

@@ -414,6 +414,7 @@ save_error = ""
 save_forbidden = ""
 secret_rotated = ""
 secret_not_applicable = ""
+secret_not_applicable_headless = ""
 secret_unavailable = ""
 subtitle = ""
 
@@ -1744,6 +1745,7 @@ type = ""
 pkce = ""
 private = ""
 pkce_headless = ""
+private_headless = ""
 
 [ui.dev.dashboard]
 ready_badge = ""