fix(device-agent): use system browser for login to support passkeys

The device agent's embedded Electron BrowserWindow does not support
WebAuthn/passkeys, preventing users with passkeys enabled from signing
in with Google. This switches to opening the system browser (Safari,
Chrome, etc.) for authentication using a localhost callback server and
authorization code exchange pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: tofikwest

apps/portal/src/app/(public)/auth/device-callback/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { Icons } from '@comp/ui/icons';
+import { Card, CardContent, CardHeader, CardTitle } from '@comp/ui/card';
+import { Loader2, CheckCircle2 } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+type Status = 'redirecting' | 'success' | 'error';
+
+export default function DeviceCallbackPage() {
+  const searchParams = useSearchParams();
+  const [status, setStatus] = useState<Status>('redirecting');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  useEffect(() => {
+    const callbackPort = searchParams.get('callback_port');
+    const state = searchParams.get('state');
+
+    if (!callbackPort || !state) {
+      setStatus('error');
+      setErrorMessage('Missing required parameters. Please try signing in again from the Comp AI agent.');
+      return;
+    }
+
+    const port = Number.parseInt(callbackPort, 10);
+    if (Number.isNaN(port) || port < 1 || port > 65535) {
+      setStatus('error');
+      setErrorMessage('Invalid callback port. Please try signing in again from the Comp AI agent.');
+      return;
+    }
+
+    async function exchangeAndRedirect() {
+      try {
+        // Generate an auth code using the authenticated session
+        const response = await fetch('/api/device-agent/auth-code', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ callback_port: port, state }),
+        });
+
+        if (!response.ok) {
+          const data = await response.json().catch(() => ({}));
+          throw new Error(data.error || `Server returned ${response.status}`);
+        }
+
+        const { code } = await response.json();
+
+        // Redirect to the device agent's localhost server
+        window.location.href = `http://localhost:${port}/auth-callback?code=${code}&state=${state}`;
+        setStatus('success');
+      } catch (err) {
+        console.error('Device auth callback failed:', err);
+        setStatus('error');
+        setErrorMessage(
+          err instanceof Error
+            ? err.message
+            : 'Failed to complete sign-in. Please try again from the Comp AI agent.',
+        );
+      }
+    }
+
+    exchangeAndRedirect();
+  }, [searchParams]);
+
+  return (
+    <div className="flex min-h-dvh flex-col text-foreground">
+      <main className="flex flex-1 items-center justify-center p-6">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center space-y-3 pt-10">
+            <Icons.Logo className="h-10 w-10 mx-auto" />
+            <CardTitle className="text-xl tracking-tight text-card-foreground">
+              {status === 'redirecting' && 'Completing sign-in...'}
+              {status === 'success' && 'Sign-in complete!'}
+              {status === 'error' && 'Sign-in failed'}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="text-center pb-10">
+            {status === 'redirecting' && (
+              <div className="flex flex-col items-center gap-3">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  Redirecting to the Comp AI agent...
+                </p>
+              </div>
+            )}
+            {status === 'success' && (
+              <div className="flex flex-col items-center gap-3">
+                <CheckCircle2 className="h-6 w-6 text-green-500" />
+                <p className="text-sm text-muted-foreground">
+                  You can close this tab and return to the Comp AI agent.
+                </p>
+              </div>
+            )}
+            {status === 'error' && (
+              <p className="text-sm text-destructive">
+                {errorMessage}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}

apps/portal/src/app/(public)/auth/page.tsx

@@ -19,10 +19,24 @@ export const metadata: Metadata = {
   title: 'Login | Comp AI',
 };
 
-export default async function Page() {
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const params = await searchParams;
+  const isDeviceAuth = params.device_auth === 'true';
+  const callbackPort = typeof params.callback_port === 'string' ? params.callback_port : undefined;
+  const state = typeof params.state === 'string' ? params.state : undefined;
+
+  const deviceAuthRedirect =
+    isDeviceAuth && callbackPort && state
+      ? `/auth/device-callback?callback_port=${callbackPort}&state=${state}`
+      : undefined;
+
   const defaultSignInOptions = (
     <div className="flex flex-col space-y-2">
-      <OtpSignIn />
+      <OtpSignIn deviceAuthRedirect={deviceAuthRedirect} />
     </div>
   );
 

apps/portal/src/app/api/device-agent/auth-code/route.ts

@@ -0,0 +1,64 @@
+import { auth } from '@/app/lib/auth';
+import { client as kv } from '@comp/kv';
+import { randomBytes } from 'crypto';
+import { type NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const authCodeSchema = z.object({
+  callback_port: z.number().int().min(1).max(65535),
+  state: z.string().min(1),
+});
+
+/**
+ * Generates a short-lived authorization code for the device agent.
+ * Called by the portal frontend after successful login when device_auth=true.
+ * The code can be exchanged for a session token via /api/device-agent/exchange-code.
+ */
+export async function POST(req: NextRequest) {
+  try {
+    const session = await auth.api.getSession({ headers: req.headers });
+
+    if (!session?.user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await req.json();
+    const parsed = authCodeSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: 'Invalid request body', details: parsed.error.flatten() },
+        { status: 400 },
+      );
+    }
+
+    const { state } = parsed.data;
+
+    // Use the raw session token from the database (not the signed cookie value).
+    // The bearer plugin expects the raw token and signs it internally.
+    const sessionToken = session.session.token;
+
+    // Generate a single-use authorization code
+    const code = randomBytes(32).toString('hex');
+
+    // Store in KV with 2-minute expiry
+    await kv.set(
+      `device-auth:${code}`,
+      {
+        sessionToken,
+        userId: session.user.id,
+        state,
+        createdAt: Date.now(),
+      },
+      { ex: 120 },
+    );
+
+    return NextResponse.json({ code });
+  } catch (error) {
+    console.error('Error generating device auth code:', error);
+    return NextResponse.json({ error: 'Failed to generate auth code' }, { status: 500 });
+  }
+}

apps/portal/src/app/api/device-agent/exchange-code/route.ts

@@ -0,0 +1,60 @@
+import { client as kv } from '@comp/kv';
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const exchangeCodeSchema = z.object({
+  code: z.string().min(1),
+});
+
+interface StoredAuthCode {
+  sessionToken: string;
+  userId: string;
+  state: string;
+  createdAt: number;
+}
+
+/**
+ * Exchanges a single-use authorization code for a session token.
+ * No authentication required — the code itself is the proof of auth.
+ * This follows the same pattern as OAuth authorization code exchange.
+ */
+export async function POST(req: Request) {
+  try {
+    const body = await req.json();
+    const parsed = exchangeCodeSchema.safeParse(body);
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: 'Invalid request body', details: parsed.error.flatten() },
+        { status: 400 },
+      );
+    }
+
+    const { code } = parsed.data;
+    const kvKey = `device-auth:${code}`;
+
+    // Fetch and immediately delete (single-use)
+    const stored = await kv.get<StoredAuthCode>(kvKey);
+
+    if (!stored) {
+      return NextResponse.json(
+        { error: 'Invalid or expired authorization code' },
+        { status: 401 },
+      );
+    }
+
+    // Delete immediately to prevent replay
+    await kv.del(kvKey);
+
+    return NextResponse.json({
+      session_token: stored.sessionToken,
+      user_id: stored.userId,
+    });
+  } catch (error) {
+    console.error('Error exchanging device auth code:', error);
+    return NextResponse.json({ error: 'Failed to exchange auth code' }, { status: 500 });
+  }
+}

apps/portal/src/app/components/google-sign-in.tsx

@@ -20,7 +20,12 @@ export function GoogleSignIn({
 
     // Build the callback URL with search params
     const baseURL = window.location.origin;
-    const path = inviteCode ? `/invite/${inviteCode}` : '/';
+    const isDeviceAuth = searchParams?.get('device_auth') === 'true';
+    const path = isDeviceAuth
+      ? '/auth/device-callback'
+      : inviteCode
+        ? `/invite/${inviteCode}`
+        : '/';
     const redirectTo = new URL(path, baseURL);
 
     // Append all search params if they exist
@@ -30,8 +35,6 @@ export function GoogleSignIn({
       });
     }
 
-    console.log('******* redirectTo', redirectTo.toString());
-
     await authClient.signIn.social({
       provider: 'google',
       callbackURL: redirectTo.toString(),

apps/portal/src/app/components/microsoft-sign-in.tsx

@@ -22,7 +22,12 @@ export function MicrosoftSignIn({
     try {
       // Build the callback URL with search params
       const baseURL = window.location.origin;
-      const path = inviteCode ? `/invite/${inviteCode}` : '/';
+      const isDeviceAuth = searchParams?.get('device_auth') === 'true';
+      const path = isDeviceAuth
+        ? '/auth/device-callback'
+        : inviteCode
+          ? `/invite/${inviteCode}`
+          : '/';
       const redirectTo = new URL(path, baseURL);
 
       // Append all search params if they exist

apps/portal/src/app/components/otp-form.tsx

@@ -24,9 +24,10 @@ type OtpFormValues = z.infer<typeof otpFormSchema>;
 
 interface OtpFormProps {
   email: string;
+  deviceAuthRedirect?: string;
 }
 
-export function OtpForm({ email }: OtpFormProps) {
+export function OtpForm({ email, deviceAuthRedirect }: OtpFormProps) {
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   const form = useForm<OtpFormValues>({
@@ -40,7 +41,7 @@ export function OtpForm({ email }: OtpFormProps) {
   const { execute, isExecuting } = useAction(login, {
     onSuccess: () => {
       toast.success('OTP verified');
-      router.push('/');
+      router.push(deviceAuthRedirect || '/');
     },
     onError: (error) => {
       toast.error(error.error.serverError as string);

apps/portal/src/app/components/otp.tsx

@@ -19,9 +19,10 @@ const formSchema = z.object({
 
 type Props = {
   className?: string;
+  deviceAuthRedirect?: string;
 };
 
-export function OtpSignIn({ className }: Props) {
+export function OtpSignIn({ className, deviceAuthRedirect }: Props) {
   const [isLoading, setLoading] = useState(false);
   const [isSent, setSent] = useState(false);
   const [_email, setEmail] = useState<string>();
@@ -56,7 +57,7 @@ export function OtpSignIn({ className }: Props) {
   if (isSent) {
     return (
       <div className={cn('flex flex-col space-y-4', className)}>
-        <OtpForm email={_email ?? ''} />
+        <OtpForm email={_email ?? ''} deviceAuthRedirect={deviceAuthRedirect} />
       </div>
     );
   }