feature/6 - working on connecting next-auth with prisma

Author: webdevcody

.env.example

@@ -1,8 +1,8 @@
 DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"
 
 # Next Auth Discord Provider
-GITHUB_CLIENT_ID=""
-GITHUB_CLIENT_SECRET=""
+GITHUB_CLIENT_ID="63b03dd1a029181eede8"
+GITHUB_CLIENT_SECRET="fe61fec0056b571d01d0a1e25945904237d164e8"
 
 NEXTAUTH_SECRET="my_ultra_secure_nextauth_secret"
 NEXTAUTH_URL="http://localhost:3000"

docker-compose.yml

@@ -1,6 +1,6 @@
 version: "3.9"
 services:
-  bg-db:
+  code-racer-db:
     image: postgres
     restart: always
     container_name: code-racer-postgres

package-lock.json

@@ -9,16 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@auth/prisma-adapter": "^1.0.0",
+    "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^4.16.2",
     "@radix-ui/react-slot": "^1.0.2",
-    "@types/node": "20.4.1",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
-    "eslint": "8.44.0",
-    "eslint-config-next": "13.4.9",
     "lucide-react": "^0.259.0",
     "next": "13.4.9",
     "next-auth": "^4.22.1",
@@ -31,6 +28,11 @@
     "typescript": "5.1.6"
   },
   "devDependencies": {
-    "prisma": "^4.16.2"
+    "prisma": "^4.16.2",
+    "@types/node": "20.4.1",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "eslint": "8.44.0",
+    "eslint-config-next": "13.4.9"
   }
 }

package.json

@@ -8,7 +8,47 @@ datasource db {
 }
 
 model User {
-  id        Int      @id @default(autoincrement())
-  createdAt DateTime @default(now())
-  name      String?
+  id            String    @id @default(cuid())
+  createdAt     DateTime  @default(now())
+  name          String?
+  email         String?   @unique
+  emailVerified DateTime?
+  image         String?
+  accounts      Account[]
+  sessions      Session[]
+}
+
+// Necessary for Next auth
+model Account {
+  id                String  @id @default(cuid())
+  userId            String
+  type              String
+  provider          String
+  providerAccountId String
+  refresh_token     String? @db.Text
+  access_token      String? @db.Text
+  expires_at        Int?
+  token_type        String?
+  scope             String?
+  id_token          String? @db.Text
+  session_state     String?
+  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+}
+
+model Session {
+  id           String   @id @default(cuid())
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+model VerificationToken {
+  identifier String
+  token      String   @unique
+  expires    DateTime
+
+  @@unique([identifier, token])
 }

prisma/schema.prisma

@@ -1,13 +1,18 @@
+import { prisma } from "@/lib/prisma";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import NextAuth from "next-auth";
 import GithubProvider from "next-auth/providers/github";
 
-const handler = NextAuth({
+export const nextAuthOptions = {
+  adapter: PrismaAdapter(prisma),
   providers: [
     GithubProvider({
       clientId: process.env.GITHUB_CLIENT_ID!,
       clientSecret: process.env.GITHUB_CLIENT_SECRET!,
     }),
   ],
-});
+};
+
+const handler = NextAuth(nextAuthOptions);
 
 export { handler as GET, handler as POST };

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

@@ -1,33 +1,31 @@
 import { Button } from "@/components/ui/button";
 import { LoginButton, LogoutButton } from "@/components/ui/buttons";
+import { getSession } from "@/lib/getSession";
 import { prisma } from "@/lib/prisma";
-import { getServerSession } from "next-auth";
 import Image from "next/image";
 
 export default async function Home() {
-    const users = await prisma.user.findMany();
-    console.log(users);
-    const session = await getServerSession();
-    return (
-        <main className="flex min-h-screen flex-col items-center justify-between p-24">
-            <Button>Button</Button>
-            {session ? (
-                <div className="flex space-x-2 items-center">
-                    <Image
-                        className="rounded-full"
-                        src={session?.user?.image!}
-                        alt="user avatar"
-                        height={40}
-                        width={40}
-                    />
-                    <p className="text-gray-700 font-bold">
-                        {session?.user?.name}
-                    </p>
-                    <LogoutButton />
-                </div>
-            ) : (
-                <LoginButton />
-            )}
-        </main>
-    );
+  const users = await prisma.user.findMany();
+  const session = await getSession();
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <Button>Button</Button>
+      {session ? (
+        <div className="flex space-x-2 items-center">
+          <Image
+            className="rounded-full"
+            src={session?.user?.image!}
+            alt="user avatar"
+            height={40}
+            width={40}
+          />
+          <p className="text-gray-700 font-bold">{session?.user?.name}</p>
+          <LogoutButton />
+        </div>
+      ) : (
+        <LoginButton />
+      )}
+    </main>
+  );
 }

src/app/page.tsx

@@ -0,0 +1,6 @@
+import { nextAuthOptions } from "@/app/api/auth/[...nextauth]/route";
+import { getServerSession } from "next-auth";
+
+export function getSession() {
+  return getServerSession(nextAuthOptions);
+}

src/lib/getSession.ts

@@ -1,9 +1,9 @@
-import { PrismaClient } from '@prisma/client'
+import { PrismaClient } from "@prisma/client";
 
 const globalForPrisma = globalThis as unknown as {
-  prisma: PrismaClient | undefined
-}
+  prisma: PrismaClient | undefined;
+};
 
-export const prisma = globalForPrisma.prisma ?? new PrismaClient()
+export const prisma = globalForPrisma.prisma ?? new PrismaClient();
 
-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;