ui: Display the authenticated userId by configured userIdClaim

Signed-off-by: Marco Franssen <marco.franssen@gmail.com>

Author: marcofranssen

helm/kagent/templates/ui-deployment.yaml

@@ -64,6 +64,10 @@ spec:
             - name: SSO_REDIRECT_PATH
               value: {{ .Values.ui.auth.ssoRedirectPath | default "/oauth2/start" | quote }}
             {{- end }}
+            {{- with .Values.controller.auth.userIdClaim }}
+            - name: KAGENT_USER_ID_CLAIM
+              value: {{ . | quote }}
+            {{- end }}
             {{- with .Values.ui.additionalForwardedHeaders }}
             - name: KAGENT_ADDITIONAL_FORWARDED_HEADERS
               value: {{ join "," . | quote }}

ui/src/app/actions/auth.ts

@@ -28,3 +28,7 @@ export async function getCurrentUser(): Promise<CurrentUser | null> {
 
   return claims as CurrentUser;
 }
+
+export async function getUserIdClaim(): string {
+  return process.env.KAGENT_USER_ID_CLAIM || "sub";
+}

ui/src/components/AppInitializer.tsx

@@ -3,13 +3,24 @@
 import React, { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { OnboardingWizard } from "./onboarding/OnboardingWizard";
+import { useAuth } from "@/contexts/AuthContext";
+import { useUserStore } from "@/lib/userStore";
 
 const LOCAL_STORAGE_KEY = "kagent-onboarding";
 
 export function AppInitializer({ children }: { children: React.ReactNode }) {
   /** `null` = not read yet (must match server + first client paint to avoid hydration mismatch) */
   const [isOnboarding, setIsOnboarding] = useState<boolean | null>(null);
   const pathname = usePathname();
+  const { user, userIdClaim } = useAuth();
+  const setUserId = useUserStore((s) => s.setUserId);
+
+  useEffect(() => {
+    const identity = user?.[userIdClaim] as string | undefined;
+    if (identity) {
+      setUserId(identity);
+    }
+  }, [user, userIdClaim, setUserId]);
 
   useEffect(() => {
     const hasOnboarded = localStorage.getItem(LOCAL_STORAGE_KEY) === "true";

ui/src/contexts/AuthContext.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import React, { createContext, useContext, useEffect, useState, ReactNode } from "react";
-import { getCurrentUser, CurrentUser } from "@/app/actions/auth";
+import { getCurrentUser, getUserIdClaim, CurrentUser } from "@/app/actions/auth";
 
 interface AuthContextValue {
   user: CurrentUser | null;
+  userIdClaim: string;
   isLoading: boolean;
   error: Error | null;
   refetch: () => Promise<void>;
@@ -14,15 +15,17 @@ const AuthContext = createContext<AuthContextValue | undefined>(undefined);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<CurrentUser | null>(null);
+  const [userIdClaim, setUserIdClaim] = useState<string>("sub");
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
   const fetchUser = async () => {
     setIsLoading(true);
     setError(null);
     try {
-      const currentUser = await getCurrentUser();
+      const [currentUser, claim] = await Promise.all([getCurrentUser(), getUserIdClaim()]);
       setUser(currentUser);
+      setUserIdClaim(claim);
     } catch (e) {
       setError(e instanceof Error ? e : new Error("Failed to fetch user"));
     } finally {
@@ -35,7 +38,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <AuthContext.Provider value={{ user, isLoading, error, refetch: fetchUser }}>
+    <AuthContext.Provider value={{ user, userIdClaim, isLoading, error, refetch: fetchUser }}>
       {children}
     </AuthContext.Provider>
   );