refactor: migrate auth pages to better-auth client

src/app/auth/signin/page.tsx

@@ -1,15 +1,35 @@
-import { signIn, auth } from "@/auth"
+"use client"
+
+import { signIn, useSession } from "@/lib/auth-client"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { redirect } from "next/navigation"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 
-export default async function SignInPage() {
+export default function SignInPage() {
-  const session = await auth()
+  const { data: session, isPending } = useSession()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (session?.user) {
+      router.push("/")
+    }
+  }, [session, router])
+
+  const handleSignIn = async () => {
+    await signIn.social({
+      provider: "authentik",
+      callbackURL: "/",
+    })
+  }
+
+  if (isPending) {
+    return null
+  }
 
-  // If already signed in, redirect to home
   if (session?.user) {
-    redirect("/")
+    return null
   }
 
   return (
@@ -22,16 +42,9 @@ export default async function SignInPage() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <form
+          <Button onClick={handleSignIn} className="w-full" size="lg">
-            action={async () => {
+            Continue with Authentik
-              "use server"
+          </Button>
-              await signIn("authentik", { redirectTo: "/" })
-            }}
-          >
-            <Button type="submit" className="w-full" size="lg">
-              Continue with Authentik
-            </Button>
-          </form>
 
           <div className="text-center">
             <Link href="/" className="text-sm text-muted-foreground hover:underline">

src/app/auth/signout/page.tsx

@@ -1,14 +1,29 @@
-import { signOut, auth } from "@/auth"
+"use client"
+
+import { signOut, useSession } from "@/lib/auth-client"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { redirect } from "next/navigation"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 
-export default async function SignOutPage() {
+export default function SignOutPage() {
-  const session = await auth()
+  const { data: session, isPending } = useSession()
+  const router = useRouter()
 
-  if (!session) {
+  useEffect(() => {
-    redirect("/")
+    if (!session) {
+      router.push("/")
+    }
+  }, [session, router])
+
+  const handleSignOut = async () => {
+    await signOut()
+    router.push("/")
+  }
+
+  if (isPending || !session) {
+    return null
   }
 
   return (
@@ -27,16 +42,9 @@ export default async function SignOutPage() {
           </div>
 
           <div className="grid grid-cols-2 gap-3">
-            <form
+            <Button onClick={handleSignOut} variant="destructive" className="w-full">
-              action={async () => {
+              Sign Out
-                "use server"
+            </Button>
-                await signOut({ redirectTo: "/" })
-              }}
-            >
-              <Button type="submit" variant="destructive" className="w-full">
-                Sign Out
-              </Button>
-            </form>
 
             <Button variant="outline" asChild>
               <Link href="/">Cancel</Link>

src/components/sign-in.tsx

@@ -1,20 +1,20 @@
 "use client"
 
-import { signOut, useSession } from "next-auth/react"
+import { signOut, useSession } from "@/lib/auth-client"
 import { Button } from "@/components/ui/button"
 import { useRouter } from "next/navigation"
 
 export default function SignIn() {
-  const { data: session, status } = useSession()
+  const { data: session, isPending } = useSession()
   const router = useRouter()
 
   const handleSignOut = async () => {
-    await signOut({ redirect: false })
+    await signOut()
     router.push("/")
     router.refresh()
   }
 
-  if (status === "loading") {
+  if (isPending) {
     return <div className="h-8 w-16 bg-muted animate-pulse rounded"></div>
   }