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

@@ -1,2 +1,3 @@
 import { handlers } from "@/auth" // Referring to the auth.ts we just created
 export const { GET, POST } = handlers
+

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { SessionProvider } from "next-auth/react";
 
 const inter = Inter({ subsets: ["latin"] });
 

app/page.tsx

@@ -1,22 +1,14 @@
 import { getUsers } from "@/drizzle/db";
-import Image from "next/image";
-import avatar from "../public/leverpostej.jpg";
 import SignIn from "@/components/SignIn";
+import { auth } from "@/auth";
+import { Session } from "next-auth";
 
 export default async function Home() {
   const users = await getUsers();
-  console.log(users);
-  const name = users[0] ? users[0].name : "guest";
+  const session: Session | null = await auth();
   return (
     <main className="bg-black text-white">
-      <h1>Hello {name}!</h1>
-      <Image
-        src={avatar}
-        width={100}
-        height={100}
-        alt={`Picture of ${users[0].name}`}
-      />
-      <SignIn />
+      <SignIn session={session} />
     </main>
   );
 }

components/SignIn.tsx

@@ -1,14 +1,31 @@
-import { signIn } from "@/auth"
+"use client";
 
-export default async function SignIn() {
-  return (
-    <form
-      action={async () => {
-        "use server"
-        await signIn("github")
-      }}
-    >
+import { signIn, signOut } from "next-auth/react";
+import { SyntheticEvent } from "react";
+import { Session } from "next-auth";
+
+interface SignInProps {
+  session: Session | null;
+}
+
+export default async function SignIn({ session }: SignInProps) {
+  const handleSignIn = async (event: SyntheticEvent) => {
+    event.preventDefault();
+    await signIn("github");
+  };
+
+  const handleSignOut = async (event: SyntheticEvent) => {
+    event.preventDefault();
+    await signOut();
+  };
+
+  return session?.user ? (
+    <form onSubmit={handleSignOut}>
+      <button type="submit">Sign out</button>
+    </form>
+  ) : (
+    <form onSubmit={handleSignIn}>
       <button type="submit">Sign in with GitHub</button>
     </form>
-  )
+  );
 }

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@next/env": "^14.2.3",
+        "@types/next-auth": "^3.15.0",
         "@vercel/postgres": "^0.8.0",
         "drizzle-orm": "^0.30.10",
         "next": "14.2.3",
@@ -1327,6 +1328,15 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/next-auth": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/@types/next-auth/-/next-auth-3.15.0.tgz",
+      "integrity": "sha512-ZVfejlu81YiIRX1m0iKAfvZ3nK7K9EyZWhNARNKsFop8kNAgEvMnlKpTpwN59xkK2OhyWLagPuiDAVBYSO9jSA==",
+      "deprecated": "This is a stub types definition. next-auth provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "next-auth": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@next/env": "^14.2.3",
+    "@types/next-auth": "^3.15.0",
     "@vercel/postgres": "^0.8.0",
     "drizzle-orm": "^0.30.10",
     "next": "14.2.3",