Merge pull request #54 from scape76/add-user-results-to-db

Keep track of user's records (challenge results) in database

Author: webdevcody

.env.example

@@ -8,5 +8,8 @@ DATABASE_URL="postgresql://postgres:example@localhost:5432/postgres"
 GITHUB_CLIENT_ID="63b03dd1a029181eede8"
 GITHUB_CLIENT_SECRET="fe61fec0056b571d01d0a1e25945904237d164e8"
 
+# to generate, run 
+# openssl rand -base64 172 | tr -d '\n'
+# in your terminal
 NEXTAUTH_SECRET="my_ultra_secure_nextauth_secret"
 NEXTAUTH_URL="http://localhost:3000"

next.config.js

@@ -3,6 +3,9 @@ const nextConfig = {
   images: {
     domains: ["avatars.githubusercontent.com"],
   },
+  experimental: {
+    serverActions: true,
+  },
 };
 
 module.exports = nextConfig;

prisma/schema.prisma

@@ -16,6 +16,7 @@ model User {
   image         String?
   accounts      Account[]
   sessions      Session[]
+  results       Result[]
 }
 
 // Necessary for Next auth
@@ -52,3 +53,10 @@ model VerificationToken {
 
   @@unique([identifier, token])
 }
+
+model Result {
+  id        String @id @default(cuid())
+  takenTime String
+  userId    String
+  user      User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+}

src/app/_actions/result.ts

@@ -0,0 +1,20 @@
+"use server";
+
+import { User } from "@prisma/client";
+import { prisma } from "@/lib/prisma";
+
+export async function saveUserResult(input: {
+  userId: User["id"];
+  timeTaken: string | number;
+}) {
+  if (typeof input.timeTaken !== "string" && typeof input.timeTaken !== "number") {
+    throw new Error("Invalid input.");
+  }
+
+  await prisma.result.create({
+    data: {
+      userId: input.userId,
+      takenTime: input.timeTaken.toString(),
+    },
+  });
+}

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

@@ -13,21 +13,49 @@ declare module "next-auth" {
 
 export const nextAuthOptions = {
   adapter: PrismaAdapter(prisma),
+  session: {
+    strategy: 'jwt',
+  },
+  secret: process.env.NEXTAUTH_SECRET!,
   providers: [
     GithubProvider({
       clientId: process.env.GITHUB_CLIENT_ID!,
       clientSecret: process.env.GITHUB_CLIENT_SECRET!,
     }),
   ],
   callbacks: {
-    session({ session, user }) {
-      if (session.user) {
-        session.user.id = user.id;
+    async jwt({ token, user }) {
+      const dbUser = await prisma.user.findFirst({
+        where: {
+          email: token.email,
+        },
+      });
+
+      if (!dbUser) {
+        if (user) {
+          token.id = user.id;
+        }
+        return token;
+      }
+
+      return {
+        id: dbUser.id,
+        name: dbUser.name,
+        email: dbUser.email,
+        picture: dbUser.image,
+      };
+    },
+    async session({ token, session }) {
+      if (token) {
+        session.user.id = token.id;
+        session.user.name = token.name;
+        session.user.email = token.email;
+        session.user.image = token.picture;
       }
 
       return session;
-    }
-  }
+    },
+  },
 } satisfies AuthOptions;
 
 const handler = NextAuth(nextAuthOptions);

src/app/page.tsx

@@ -1,7 +1,7 @@
 import Header from "@/components/header";
 import { Button } from "@/components/ui/button";
 import { LoginButton, LogoutButton } from "@/components/ui/buttons";
-import { getSession } from "@/lib/getSession";
+import { getSession } from "@/lib/session";
 import { prisma } from "@/lib/prisma";
 import Image from "next/image";
 

src/app/race/page.tsx

@@ -1,10 +1,15 @@
 import TypingCode from "@/components/typing/typingCode";
+import { getCurrentUser } from "@/lib/session";
 
 export default async function Race() {
+  const user = await getCurrentUser();
+
+  console.log(user);
+
   return (
     <>
       <main className="flex min-h-screen flex-col items-center justify-between p-24">
-        <TypingCode />
+        <TypingCode user={user}/>
       </main>
     </>
   );

src/components/typing/typingCode.tsx

@@ -3,12 +3,18 @@
 import { useState, useEffect } from "react";
 
 import DisplayedCode from "./displayedCode";
+import type { User } from "next-auth";
+import { saveUserResult } from "@/app/_actions/result";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 
 const code = `printf("hello world")`;
 
-export default function TypingCode() {
+interface TypingCodeProps {
+  user?: User;
+}
+
+export default function TypingCode({ user }: TypingCodeProps) {
   const [input, setInput] = useState("");
   const [startTime, setStartTime] = useState<Date | null>(null);
   const [endTime, setEndTime] = useState<Date | null>(null);
@@ -20,6 +26,8 @@ export default function TypingCode() {
       const timeTaken: number =
         (endTime.getTime() - startTime.getTime()) / 1000;
 
+      if (user) saveUserResult({ userId: user.id, timeTaken });
+
       console.log("Time taken:", timeTaken);
     }
   }, [endTime, startTime]);

src/lib/getSession.ts src/lib/session.tssrc/lib/getSession.ts renamed to src/lib/session.ts

@@ -4,3 +4,9 @@ import { getServerSession } from "next-auth";
 export function getSession() {
   return getServerSession(nextAuthOptions);
 }
+
+export async function getCurrentUser() {
+  const session = await getSession();
+
+  return session?.user;
+}

src/types/next-auth.d.ts

@@ -0,0 +1,17 @@
+import type { User } from "next-auth";
+
+type UserId = string;
+
+declare module "next-auth/jwt" {
+  interface JWT {
+    id: UserId;
+  }
+}
+
+declare module "next-auth" {
+  interface Session {
+    user: User & {
+      id: UserId;
+    };
+  }
+}