feat(adk-ui): auto-login for local dev (localtest.me) (#122)

* feat(adk-ui): auto-login for local dev (localtest.me)

Closes #120

Signed-off-by: Tomas Weiss <tomas.weiss2@gmail.com>

* docs: note Keycloak default auth and admin/admin creds in quickstart

Signed-off-by: Tomas Weiss <tomas.weiss2@gmail.com>

* fix(adk-ui): address PR review comments

Signed-off-by: Tomas Weiss <tomas.weiss2@gmail.com>

* refactor(adk-ui): address Petr's PR review comments

- move localDevUserSchema/LocalDevUser to types.ts
- simplify jwt callback
- remove theme param from sign-in handlers and AutoSignIn

Signed-off-by: Tomas Weiss <tomas.weiss2@gmail.com>

---------

Signed-off-by: Tomas Weiss <tomas.weiss2@gmail.com>

Author: tomkis

CLAUDE.md

@@ -12,6 +12,10 @@ All commits must be signed off for DCO compliance (`git commit --signoff`).
 
 - `mise run adk-server:migrations:run` run migrations
 
+## Docs
+
+- Only edit docs under `docs/development/`, never `docs/stable/`
+
 ## Development rules
 
 - When working in adk-server make sure you always test the behaviour using the adk-server debugging approach

apps/adk-ui/src/app/(auth)/auth.ts

@@ -5,17 +5,77 @@
 
 import NextAuth from 'next-auth';
 import type { OIDCConfig } from 'next-auth/providers';
+import Credentials from 'next-auth/providers/credentials';
+import { z } from 'zod';
 
 import { runtimeConfig } from '#contexts/App/runtime-config.ts';
 import { routes } from '#utils/router.ts';
 
-import type { ProviderConfig, ProviderWithId } from './types';
-import { providerConfigSchema } from './types';
+import type { LocalDevUser, ProviderConfig, ProviderWithId } from './types';
+import { localDevUserSchema, providerConfigSchema } from './types';
 import { getTokenRefreshSchedule, jwtWithRefresh, RefreshTokenError } from './utils';
 
 export const AUTH_COOKIE_NAME = 'adk-auth-token';
 
-const { isAuthEnabled } = runtimeConfig;
+const { isAuthEnabled, isLocalDevAutoLogin } = runtimeConfig;
+
+const oidcConfigSchema = z.object({
+  issuer: z.string(),
+  clientId: z.string(),
+  clientSecret: z.string(),
+});
+
+function createLocalDevCredentialsProvider(config: z.infer<typeof oidcConfigSchema>) {
+  return Credentials({
+    id: 'local-dev',
+    name: 'Local Dev',
+    credentials: {
+      username: { label: 'Username', type: 'text' },
+      password: { label: 'Password', type: 'password' },
+    },
+    authorize: async (credentials) => {
+      const { username, password } = z
+        .object({
+          username: z.string(),
+          password: z.string(),
+        })
+        .parse(credentials);
+
+      const tokenEndpoint = `${config.issuer.replace(/\/$/, '')}/protocol/openid-connect/token`;
+
+      console.info(`[local-dev] fetching token from ${tokenEndpoint} for user "${username}"`);
+      const response = await fetch(tokenEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({
+          grant_type: 'password',
+          client_id: config.clientId,
+          client_secret: config.clientSecret,
+          username,
+          password,
+          scope: 'openid email profile',
+        }),
+      });
+
+      if (!response.ok) {
+        const body = await response.text();
+        console.error(`[local-dev] token request failed: ${response.status} ${response.statusText} — ${body}`);
+        return null;
+      }
+
+      const tokens = await response.json();
+      console.info(`[local-dev] token request succeeded, expires_in=${tokens.expires_in}`);
+      return {
+        id: username,
+        name: username,
+        access_token: tokens.access_token,
+        refresh_token: tokens.refresh_token,
+        expires_in: tokens.expires_in,
+        expires_at: Math.floor(Date.now() / 1000 + tokens.expires_in),
+      } satisfies LocalDevUser;
+    },
+  });
+}
 
 function createOIDCProvider(config: ProviderConfig): OIDCConfig<unknown> {
   const useInternalBackChannel = config.external_issuer && config.external_issuer !== config.issuer;
@@ -86,13 +146,33 @@ export function getProvider(): ProviderWithId | null {
   }
 }
 
+function assembleProviders(oidcProvider: ProviderWithId | null) {
+  if (isLocalDevAutoLogin) {
+    return [
+      createLocalDevCredentialsProvider(
+        oidcConfigSchema.parse({
+          issuer: process.env.OIDC_PROVIDER_ISSUER,
+          clientId: process.env.OIDC_PROVIDER_CLIENT_ID,
+          clientSecret: process.env.OIDC_PROVIDER_CLIENT_SECRET,
+        }),
+      ),
+    ];
+  }
+
+  if (oidcProvider) {
+    return [oidcProvider];
+  }
+
+  return [];
+}
+
 const provider = getProvider();
 
 // Prevents nextauth errors when authentication is disabled and NEXTAUTH_SECRET is not provided
 export const AUTH_SECRET = isAuthEnabled ? process.env.NEXTAUTH_SECRET : 'dummy_secret';
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
-  providers: provider ? [provider] : [],
+  providers: assembleProviders(provider),
   pages: {
     signIn: routes.signIn(),
   },
@@ -113,18 +193,18 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
     authorized: ({ auth }) => {
       return isAuthEnabled ? Boolean(auth) : true;
     },
-    jwt: async ({ token, account, trigger, session }) => {
+    jwt: async ({ token, account, user, trigger, session }) => {
       if (trigger === 'update') {
         token.name = session.user.name;
       }
 
-      // pull the id token out of the account on signIn
       if (account) {
-        token.accessToken = account.access_token;
+        const src = account.type === 'credentials' ? localDevUserSchema.parse(user) : account;
+        token.accessToken = src.access_token;
         token.provider = account.provider;
-        token.refreshToken = account.refresh_token;
-        token.expiresIn = account.expires_in;
-        token.expiresAt = account.expires_at;
+        token.refreshToken = src.refresh_token;
+        token.expiresIn = src.expires_in;
+        token.expiresAt = src.expires_at;
         token.refreshSchedule = getTokenRefreshSchedule(token.expiresAt);
       }
 

apps/adk-ui/src/app/(auth)/types.ts

@@ -30,3 +30,14 @@ export const providerConfigSchema = z.preprocess((val) => {
 export type ProviderConfig = z.infer<typeof providerConfigSchema>;
 
 export type ProviderWithId = Provider & { id: string };
+
+export const localDevUserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  access_token: z.string(),
+  refresh_token: z.string(),
+  expires_in: z.number(),
+  expires_at: z.number(),
+});
+
+export type LocalDevUser = z.infer<typeof localDevUserSchema>;

apps/adk-ui/src/contexts/App/runtime-config.ts

@@ -22,5 +22,7 @@ export const runtimeConfig: RuntimeConfig = {
     defaults: contextTokenPermissionsDefaults,
   }),
   isAuthEnabled: process.env.OIDC_ENABLED !== 'false',
+  isLocalDevAutoLogin:
+    process.env.OIDC_ENABLED !== 'false' && (process.env.OIDC_PROVIDER_ISSUER?.includes('localtest.me') ?? false),
   appName: process.env.APP_NAME || 'Kagenti ADK',
 };

apps/adk-ui/src/contexts/App/types.ts

@@ -14,5 +14,6 @@ export interface RuntimeConfig {
   featureFlags: FeatureFlags;
   contextTokenPermissions: ContextTokenPermissions;
   isAuthEnabled: boolean;
+  isLocalDevAutoLogin: boolean;
   appName: string;
 }

apps/adk-ui/src/modules/auth/components/AutoSignIn.tsx

@@ -6,18 +6,13 @@
 'use client';
 import { useEffect } from 'react';
 
-import { useTheme } from '#contexts/Theme/index.ts';
-import type { ThemePreference } from '#contexts/Theme/theme-context.ts';
-
 interface Props {
-  signIn: (theme: ThemePreference) => Promise<void>;
+  signIn: () => Promise<void>;
 }
 
 export function AutoSignIn({ signIn }: Props) {
-  const { themePreference } = useTheme();
-
   useEffect(() => {
-    void signIn(themePreference);
-  }, [signIn, themePreference]);
+    void signIn();
+  }, [signIn]);
   return <div>Redirecting to login...</div>;
 }

apps/adk-ui/src/modules/auth/components/SignInProviders.tsx

@@ -7,7 +7,7 @@ import { redirect } from 'next/navigation';
 import { AuthError } from 'next-auth';
 
 import { auth, getProvider, signIn } from '#app/(auth)/auth.ts';
-import type { ThemePreference } from '#contexts/Theme/theme-context.ts';
+import { runtimeConfig } from '#contexts/App/runtime-config.ts';
 import { routes } from '#utils/router.ts';
 
 import { AuthErrorPage } from './AuthErrorPage';
@@ -31,17 +31,23 @@ export async function SignInProviders({ callbackUrl = routes.home() }: Props) {
     return <AuthErrorPage callbackUrl={callbackUrl} />;
   }
 
-  return <AutoSignIn signIn={handleSignIn.bind(null, { providerId: authProvider.id, redirectTo: callbackUrl })} />;
+  const signInAction = runtimeConfig.isLocalDevAutoLogin
+    ? handleLocalDevSignIn.bind(null, callbackUrl)
+    : handleSignIn.bind(null, { providerId: authProvider.id, redirectTo: callbackUrl });
+
+  return <AutoSignIn signIn={signInAction} />;
+}
+
+async function handleLocalDevSignIn(redirectTo: string) {
+  'use server';
+  await signIn('local-dev', { username: 'admin', password: 'admin', redirectTo });
 }
 
-async function handleSignIn(
-  { providerId, redirectTo }: { providerId: string; redirectTo: string },
-  theme: ThemePreference,
-) {
+async function handleSignIn({ providerId, redirectTo }: { providerId: string; redirectTo: string }) {
   'use server';
 
   try {
-    await signIn(providerId, { redirectTo }, { kc_theme: theme });
+    await signIn(providerId, { redirectTo });
   } catch (error) {
     // Sign-in can fail for a number of reasons, such as the user not existing, or the user not having the correct role.
     // In some cases, you may want to redirect to a custom error.

docs/development/introduction/quickstart.mdx

@@ -182,6 +182,10 @@ kagenti-adk info chat                   # View agent details
 kagenti-adk --help                      # See all options
 ```
 
+<Info>
+The default installation includes Keycloak for authentication. When accessing the web UI locally, you will be automatically logged in. To log in manually or access Keycloak directly, use the default credentials: `admin` / `admin`.
+</Info>
+
 ## Platform Management
 
 ```sh