feat(auth,ui): support github sign-in in the UI (#2545)

# What does this PR do?
Uses NextAuth to add github sign in support.

## Test Plan
Start server with auth configured as in
https://github.com/meta-llama/llama-stack/pull/2509


https://github.com/user-attachments/assets/61ff7442-f601-4b39-8686-5d0afb3b45ac

llama_stack/ui/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import { authOptions } from "@/lib/auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

llama_stack/ui/app/auth/signin/page.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { signIn, signOut, useSession } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Copy, Check, Home, Github } from "lucide-react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function SignInPage() {
+  const { data: session, status } = useSession();
+  const [copied, setCopied] = useState(false);
+  const router = useRouter();
+
+  const handleCopyToken = async () => {
+    if (session?.accessToken) {
+      await navigator.clipboard.writeText(session.accessToken);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (status === "loading") {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <Card className="w-[400px]">
+        <CardHeader>
+          <CardTitle>Authentication</CardTitle>
+          <CardDescription>
+            {session
+              ? "You are successfully authenticated!"
+              : "Sign in with GitHub to use your access token as an API key"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!session ? (
+            <Button
+              onClick={() => {
+                console.log("Signing in with GitHub...");
+                signIn("github", { callbackUrl: "/auth/signin" }).catch(
+                  (error) => {
+                    console.error("Sign in error:", error);
+                  },
+                );
+              }}
+              className="w-full"
+              variant="default"
+            >
+              <Github className="mr-2 h-4 w-4" />
+              Sign in with GitHub
+            </Button>
+          ) : (
+            <div className="space-y-4">
+              <div className="text-sm text-muted-foreground">
+                Signed in as {session.user?.email}
+              </div>
+
+              {session.accessToken && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">
+                    GitHub Access Token:
+                  </div>
+                  <div className="flex gap-2">
+                    <code className="flex-1 p-2 bg-muted rounded text-xs break-all">
+                      {session.accessToken}
+                    </code>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={handleCopyToken}
+                    >
+                      {copied ? (
+                        <Check className="h-4 w-4" />
+                      ) : (
+                        <Copy className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    This GitHub token will be used as your API key for
+                    authenticated Llama Stack requests.
+                  </div>
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <Button onClick={() => router.push("/")} className="flex-1">
+                  <Home className="mr-2 h-4 w-4" />
+                  Go to Dashboard
+                </Button>
+                <Button
+                  onClick={() => signOut()}
+                  variant="outline"
+                  className="flex-1"
+                >
+                  Sign out
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

llama_stack/ui/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from "@/components/ui/theme-provider";
+import { SessionProvider } from "@/components/providers/session-provider";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ModeToggle } from "@/components/ui/mode-toggle";
 import "./globals.css";
@@ -21,34 +22,38 @@ export const metadata: Metadata = {
 
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/layout/app-sidebar";
+import { SignInButton } from "@/components/ui/sign-in-button";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} font-sans`}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <SidebarProvider>
-            <AppSidebar />
-            <main className="flex flex-col flex-1">
-              {/* Header with aligned elements */}
-              <div className="flex items-center p-4 border-b">
-                <div className="flex-none">
-                  <SidebarTrigger />
+        <SessionProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <SidebarProvider>
+              <AppSidebar />
+              <main className="flex flex-col flex-1">
+                {/* Header with aligned elements */}
+                <div className="flex items-center p-4 border-b">
+                  <div className="flex-none">
+                    <SidebarTrigger />
+                  </div>
+                  <div className="flex-1 text-center"></div>
+                  <div className="flex-none flex items-center gap-2">
+                    <SignInButton />
+                    <ModeToggle />
+                  </div>
                 </div>
-                <div className="flex-1 text-center"></div>
-                <div className="flex-none">
-                  <ModeToggle />
-                </div>
-              </div>
-              <div className="flex flex-col flex-1 p-4">{children}</div>
-            </main>
-          </SidebarProvider>
-        </ThemeProvider>
+                <div className="flex flex-col flex-1 p-4">{children}</div>
+              </main>
+            </SidebarProvider>
+          </ThemeProvider>
+        </SessionProvider>
       </body>
     </html>
   );

llama_stack/ui/app/logs/chat-completions/[id]/page.tsx

@@ -4,11 +4,12 @@ import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { ChatCompletion } from "@/lib/types";
 import { ChatCompletionDetailView } from "@/components/chat-completions/chat-completion-detail";
-import { client } from "@/lib/client";
+import { useAuthClient } from "@/hooks/use-auth-client";
 
 export default function ChatCompletionDetailPage() {
   const params = useParams();
   const id = params.id as string;
+  const client = useAuthClient();
 
   const [completionDetail, setCompletionDetail] =
     useState<ChatCompletion | null>(null);
@@ -45,7 +46,7 @@ export default function ChatCompletionDetailPage() {
     };
 
     fetchCompletionDetail();
-  }, [id]);
+  }, [id, client]);
 
   return (
     <ChatCompletionDetailView

llama_stack/ui/app/logs/responses/[id]/page.tsx

@@ -5,11 +5,12 @@ import { useParams } from "next/navigation";
 import type { ResponseObject } from "llama-stack-client/resources/responses/responses";
 import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
 import { ResponseDetailView } from "@/components/responses/responses-detail";
-import { client } from "@/lib/client";
+import { useAuthClient } from "@/hooks/use-auth-client";
 
 export default function ResponseDetailPage() {
   const params = useParams();
   const id = params.id as string;
+  const client = useAuthClient();
 
   const [responseDetail, setResponseDetail] = useState<OpenAIResponse | null>(
     null,
@@ -109,7 +110,7 @@ export default function ResponseDetailPage() {
     };
 
     fetchResponseDetail();
-  }, [id]);
+  }, [id, client]);
 
   return (
     <ResponseDetailView