feat(auth): brand the NextAuth signout confirmation page

apps/web/src/app/(app)/components/SidebarUserFooter.tsx

@@ -11,7 +11,6 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
 import { BookOpen, ChevronsUpDown, Download, FileDown, LogOut, UserCog } from 'lucide-react';
-import { signOut } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 
 type User = {
@@ -37,12 +36,8 @@ function getUserInitials(name: string) {
 export default function SidebarUserFooter({ user, isLoading }: SidebarUserFooterProps) {
   const router = useRouter();
 
-  const handleLogout = async () => {
-    try {
-      await fetch('/api/auth/revoke-web-session', { method: 'POST' });
-    } finally {
-      await signOut({ callbackUrl: '/' });
-    }
+  const handleLogout = () => {
+    router.push('/users/sign_out?callbackUrl=%2F');
   };
 
   return (

apps/web/src/app/device-auth/DeviceAuthClient.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { signOut } from 'next-auth/react';
 import { z } from 'zod';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -55,14 +54,10 @@ export function DeviceAuthClient({ code, viewerToken, isAppMode, user }: DeviceA
   const shellClassName = getDeviceAuthShellClassName(isAppMode);
   const outcomeHeaderClassName = getDeviceAuthOutcomeHeaderClassName();
 
-  const handleSignOut = async () => {
+  const handleSignOut = () => {
     setIsSigningOut(true);
-
-    try {
-      await fetch('/api/auth/revoke-web-session', { method: 'POST' });
-    } finally {
-      await signOut({ callbackUrl: getDeviceAuthSignInUrl(code, { app: isAppMode }) });
-    }
+    const callbackUrl = getDeviceAuthSignInUrl(code, { app: isAppMode });
+    window.location.assign(`/users/sign_out?callbackUrl=${encodeURIComponent(callbackUrl)}`);
   };
 
   const redirectToSignIn = () => {

apps/web/src/app/users/sign_out/page.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import { signOut } from 'next-auth/react';
+import { useState } from 'react';
+
+import { AuthPageLayout } from '@/components/auth/AuthPageLayout';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+function safeCallbackUrl(raw: string | null): string {
+  if (!raw) return '/profile';
+  if (!raw.startsWith('/') || raw.startsWith('//')) return '/profile';
+  return raw;
+}
+
+export default function SignOutPage() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const callbackUrl = safeCallbackUrl(params.get('callbackUrl'));
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSignOut = async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      await fetch('/api/auth/revoke-web-session', { method: 'POST' });
+    } finally {
+      await signOut({ callbackUrl });
+    }
+  };
+
+  return (
+    <AuthPageLayout>
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Sign out of Kilo?</CardTitle>
+          <CardDescription>
+            You&apos;ll need to sign in again to access your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent />
+        <CardFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => router.back()}
+            disabled={submitting}
+          >
+            Cancel
+          </Button>
+          <Button type="button" onClick={handleSignOut} disabled={submitting}>
+            {submitting ? 'Signing out…' : 'Sign out'}
+          </Button>
+        </CardFooter>
+      </Card>
+    </AuthPageLayout>
+  );
+}

apps/web/src/components/dev/actions.ts

@@ -33,5 +33,5 @@ export async function nuke() {
     throw new Error('Failed to nuke account. Please try again later.');
   }
 
-  redirect('/api/auth/signout?callbackUrl=/profile');
+  redirect('/users/sign_out?callbackUrl=/profile');
 }

apps/web/src/lib/user/server.ts

@@ -1058,6 +1058,7 @@ export const authOptions: NextAuthOptions = {
   pages: {
     signIn: '/users/sign_in',
     error: '/users/sign_in',
+    signOut: '/users/sign_out',
   },
   debug: !!getEnvVariable('DEBUG_AUTH'),
 };