modified: src/app/page.tsx

new file:   src/components/Auth.tsx
modified:   src/trpc/server.ts

src/app/page.tsx

@@ -4,6 +4,7 @@ import { HydrateClient } from "~/trpc/server";
 import FileGrid from "~/app/_components/FileGrid";
 import UploadForm from "~/app/_components/UploadForm";
 import { Toaster } from "react-hot-toast";
+import { signIn, signOut } from "next-auth/react";
 
 export default async function Home() {
   const session = await auth();
@@ -42,14 +43,12 @@ export default async function Home() {
           )}
           {!session?.user && (
           <div className="flex flex-col items-center gap-2">
-            <div className="flex flex-col items-center justify-center gap-4">
+            <button
-              <Link
+              onClick={() => (session ? signOut() : signIn())}
-                href={session ? "/api/auth/signout" : "/api/auth/signin"}
               className="rounded-full bg-white/10 px-10 py-3 font-semibold no-underline transition hover:bg-white/20"
             >
               {session ? "Sign out" : "Sign in"}
-              </Link>
+            </button>
-            </div>
           </div>
           )}
         </div>

src/trpc/server.ts

@@ -8,6 +8,7 @@ import { createCaller, type AppRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";
 import { createQueryClient } from "./query-client";
 
+
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
  * handling a tRPC call from a React Server Component.