chore: migrate away from next-auth to better-auth

app/[username]/profile/delete-account.tsx

@@ -12,14 +12,14 @@ import {
     AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import { signOut } from '@/lib/auth-client';
 import { Trash2 } from "lucide-react";
-import { signOut } from 'next-auth/react';
 import { useState } from 'react';
 import { toast } from "sonner";
-
+import { useRouter } from "next/navigation";
 export function DeleteAccount({ userId }: { userId: string }) {
     const [isDeleting, setIsDeleting] = useState(false);
-
+    const router = useRouter()
     const handleDeleteAccount = async () => {
         setIsDeleting(true);
         try {
@@ -31,7 +31,9 @@ export function DeleteAccount({ userId }: { userId: string }) {
                 toast.error('Failed to delete account');
             }
 
-            await signOut({ redirectTo: '/' });
+            await signOut()
+
+            router.push('/')
         } catch (error) {
             console.error('Error deleting account:', error);
             toast.error('Failed to delete account');
@@ -68,4 +70,4 @@ export function DeleteAccount({ userId }: { userId: string }) {
             </AlertDialogContent>
         </AlertDialog>
     );
-}
+}

app/[username]/profile/page.tsx

@@ -17,6 +17,7 @@ import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { DeleteAccount } from "./delete-account";
 import { ImageModal } from "./image-modal";
+import { headers } from 'next/headers';
 
 export const dynamic = 'force-dynamic'
 
@@ -118,7 +119,9 @@ export async function generateMetadata(
 }
 
 export default async function ProfilePage({ params }: { params: { username: string } }) {
-    const currentUser = await auth();
+    const currentUser = await auth.api.getSession({
+        headers: headers()
+    });
     const profile = await getUser(params.username, currentUser?.user?.name === params.username);
     const isOwnProfile = currentUser?.user && profile && currentUser.user?.id === profile.id;
 
@@ -210,4 +213,4 @@ export default async function ProfilePage({ params }: { params: { username: stri
             </div>
         </div>
     );
-}
+}

app/actions.ts

@@ -3,10 +3,13 @@
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { revalidatePath } from "next/cache";
+import { headers } from 'next/headers';
 
 export async function deleteUserImage(id: string): Promise<Response> {
     try {
-        const userData = await auth();
+        const userData = await auth.api.getSession({
+            headers: headers()
+        });
         const name = userData?.user?.name || "";
         const userId = userData?.user?.id;
         if (!userData?.user || !userId) return new Response("Not logged in", { status: 401 });
@@ -51,4 +54,4 @@ export async function deleteUserImage(id: string): Promise<Response> {
         console.error(error);
         return new Response("Internal server error", { status: 500 });
     }
-}
+}

app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from "better-auth/next-js";
+import { auth } from "@/lib/auth";
+
+export const { POST, GET } = toNextJsHandler(auth);

app/api/save/get-last-saved/route.ts

@@ -1,9 +1,12 @@
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
+import { headers } from 'next/dist/client/components/headers';
 
-export async function GET(request : Request) { 
+export async function GET(request : Request) {
     try{
-        const userData = await auth();
+        const userData = await auth.api.getSession({
+            headers: headers()
+        });
         const userId = userData?.user?.id;
 
         if(!userData?.user || !userId){
@@ -14,7 +17,7 @@ export async function GET(request : Request) {
             where: { userId },
             orderBy: { updatedAt: "desc" },
         })
-        
+
         if (!lastSavedImage) {
             return new Response(null, { status: 200 });
         }
@@ -23,4 +26,4 @@ export async function GET(request : Request) {
     } catch(error: any){
         return new Response(error.message, { status: 500 });
     }
-}
+}

app/api/save/route.ts

@@ -3,6 +3,7 @@ import { prisma } from "@/lib/prisma";
 import { useLastSavedTime } from "@/store/use-last-save";
 import { diff, Jimp } from 'jimp';
 import { revalidatePath } from "next/cache";
+import { headers } from 'next/headers';
 
 
 export const runtime = "nodejs";
@@ -157,7 +158,9 @@ async function saveOrUpdateUserImage(userId: string, imageUrl: string, identifie
 
 export async function POST(request: Request) {
     try {
-        const userData = await auth();
+        const userData = await auth.api.getSession({
+            headers: headers()
+        });
         const userId = userData?.user?.id;
 
         if (!userData?.user || !userId) {
@@ -195,4 +198,4 @@ export async function POST(request: Request) {
         console.error(error);
         return new Response(error.message, { status: 500 });
     }
-}
+}

app/api/users/route.ts

@@ -1,5 +1,6 @@
-import { auth, signOut } from "@/lib/auth";
+import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
+import { headers } from 'next/headers';
 
 async function deleteImageFromCloudflare(imageId: string): Promise<void> {
     const response = await fetch(
@@ -19,7 +20,9 @@ async function deleteImageFromCloudflare(imageId: string): Promise<void> {
 
 export async function DELETE(request: Request) {
     try {
-        const userData = await auth();
+        const userData = await auth.api.getSession({
+            headers: headers()
+        });
         const { searchParams } = new URL(request.url);
         const userId = searchParams.get("id");
 
@@ -45,7 +48,7 @@ export async function DELETE(request: Request) {
 
         await Promise.all(deleteImagePromises);
 
-        await signOut({ redirect: false });
+        await auth.api.signOut({ headers: headers() })
 
         await prisma.user.delete({ where: { id: userId } });
 
@@ -54,4 +57,4 @@ export async function DELETE(request: Request) {
         console.error("Error deleting account:", error.message);
         return Response.json({ error: error.message }, { status: 500 });
     }
-}
+}

app/community/page.tsx

@@ -2,7 +2,9 @@ import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { Metadata } from "next";
 import { ImageGallery } from "./image-gallery";
-
+import { headers } from 'next/headers';
+import { Button } from '@/components/ui/button';
+import Link from "next/link";
 export const dynamic = 'force-dynamic'
 
 export const metadata: Metadata = {
@@ -84,18 +86,34 @@ async function getAllPublicImages() {
 
 export default async function CommunityPage() {
     const images = await getAllPublicImages();
-    const currentUser = await auth();
+    const currentUser = await auth.api.getSession({
+        headers: headers()
+    });
 
     return (
         <div className="min-h-screen bg-background">
-            <div className="max-w-[100vw] p-4">
-                <ImageGallery
-                    images={images}
-                    currentUserId={currentUser?.user?.name || ""}
-                    title="Community Gallery"
-                    description={`Explore the images shared by our community.`}
-                />
+            <div className="h-[calc(100vh-4rem)] w-full p-4">
+                {images.length > 0 ? (
+                    <ImageGallery
+                        images={images}
+                        currentUserId={currentUser?.user?.name || ""}
+                        title="Community Gallery"
+                        description={`Explore the images shared by our community.`}
+                    />
+                ) : (
+                    <div className="h-full w-full relative bg-gradient-to-br from-primary/25 to-background rounded-lg p-4 sm:p-8 lg:p-12 flex flex-col items-center justify-center border shadow-lg border-primary/20">
+                        <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-4 text-center bg-gradient-to-br from-foreground to-foreground/70 bg-clip-text text-transparent">
+                            Community Gallery
+                        </h1>
+                        <p className="text-muted-foreground text-center max-w-lg mb-8 px-4 text-sm sm:text-base">
+                            Be the first to share your creations with the community! Head over to the Studio to get started.
+                        </p>
+                        <Button variant="stylish" size="lg" asChild>
+                            <Link href="/studio">Go to Studio</Link>
+                        </Button>
+                    </div>
+                )}
             </div>
         </div>
     );
-}
+}

components/auth/sign-in.tsx

@@ -1,12 +1,12 @@
-import { signIn } from "@/lib/auth"
+import { signIn } from "@/lib/auth-client"
 import { Button } from "../ui/button"
 
 export function SignIn() {
     return (
         <form
             action={async () => {
                 "use server"
-                await signIn("github")
+                await signIn.social({ provider: "github" })
             }}
         >
             <Button type="submit">Sign In</Button>