Aditya/feat/signup email

.env.template

@@ -14,4 +14,6 @@ SENDGRID_SENDER_ID=""
 
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="change-me"
-NEXTAUTH_ROOT_DOMAIN="http://localhost"
+NEXTAUTH_ROOT_DOMAIN="http://localhost"
+
+SECRET_LINK="http://localhost:3000/verify-email/"

package.json

@@ -11,8 +11,10 @@
   "dependencies": {
     "@prisma/client": "^5.9.1",
     "@sendgrid/mail": "^8.1.0",
+    "@types/jsonwebtoken": "^9.0.6",
     "bcrypt": "^5.1.1",
-    "eclipse-components": "^0.0.141",
+    "eclipse-components": "^0.0.149",
+    "jsonwebtoken": "^9.0.2",
     "next": "14.1.0",
     "next-auth": "^4.24.5",
     "prisma": "^5.9.1",
@@ -31,4 +33,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}

prisma/migrations/20240312222610_add_email_verification_auth_table/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Auth" ADD COLUMN     "emailVerified" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -31,6 +31,8 @@ model Auth {
 
   createdAt DateTime @default(now()) @db.Timestamp(0)
   updatedAt DateTime @default(now()) @updatedAt @db.Timestamp(0)
+
+  emailVerified Boolean @default(false)
 }
 
 model MailingList {

src/app/api/auth/signup/route.ts

@@ -1,6 +1,8 @@
 import { prisma } from "@/lib/prisma";
 import bcrypt from "bcrypt";
 import { NextResponse } from "next/server";
+import {tokenGeneration} from "@/app/api/auth/signup/verifyEmail";
+import internal from "stream";
 
 /**
  *
@@ -60,6 +62,7 @@ export async function POST(request: Request) {
 
     console.log(email, " Account Created");
 
+    await tokenGeneration(newUser.id, email);
     return NextResponse.json({ user: newUser }, { status: 201 });
   }
 
@@ -80,5 +83,6 @@ export async function POST(request: Request) {
 
   console.log(email, " Account Created");
 
+  await tokenGeneration(newUser.id, email);
   return NextResponse.json({ user: newUser }, { status: 201 });
 }

src/app/api/auth/signup/verifyEmail.ts

@@ -0,0 +1,15 @@
+import jwt from "jsonwebtoken";
+import { sendEmail } from "@/lib/email";
+import { send } from "process";
+
+export async function tokenGeneration(userId:string, email:string) {
+  const secret = process.env.NEXTAUTH_SECRET as string;
+
+  const token = jwt.sign({userId, email}, secret, {expiresIn: "7d"});
+  const link = process.env.SECRET_LINK + token;
+
+  const subject = "Verify your email";
+  const body = `Click this link to verify your email: ${link}`;
+
+  await sendEmail(email, subject, body);
+}

src/app/login/LoginForm.tsx

@@ -3,7 +3,7 @@
 import {
   TextField,
   Button,
-  EclipseLogoLong,
+  EclipseLogoTextOrbGlow,
   Notification,
 } from "eclipse-components";
 import { signIn } from "next-auth/react";
@@ -22,7 +22,7 @@ export default function LoginForm() {
 
   return (
     <>
-      <EclipseLogoLong className="h-32 md:h-40" />
+      <EclipseLogoTextOrbGlow className="h-32 md:h-40" />
       <form
         onSubmit={async (e) => {
           e.preventDefault();

src/app/signup/SignupForm.tsx

@@ -3,7 +3,7 @@
 import {
   TextField,
   Button,
-  EclipseLogoLong,
+  EclipseLogoTextOrbGlow,
   Notification,
 } from "eclipse-components";
 import { signIn } from "next-auth/react";
@@ -18,7 +18,7 @@ export default function SignupForm() {
   const searchParams = useSearchParams();
   return (
     <>
-      <EclipseLogoLong className="h-32 md:h-40" />
+      <EclipseLogoTextOrbGlow className="h-32 md:h-40" />
       <form
         onSubmit={async (e) => {
           e.preventDefault();

src/app/verify-email/[jwt]/page.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { useEffect, useState } from "react";
+import {
+  LoadingSpinner,
+  EclipseLogoTextOrbGlow,
+  StarBackground,
+  MainWrapper
+ } from "eclipse-components";
+import {verifyUserToken} from "./verifyUserToken"
+
+
+export default function Home({ params }: { params: { jwt: string } }) {
+  return (
+      <Components token={params.jwt as string} />
+  );
+}
+
+enum Status {
+  IDLE,
+  LOADING,
+  SUCCESS,
+  ERROR,
+}
+
+interface Props {
+  token: string;
+}
+
+function Components(props: Props) {
+
+  const [status, setStatus] = useState<Status>(Status.LOADING);
+  const [error, setError] = useState<string>("");
+
+  const userToken = props.token;
+
+  async function fetchVerification(userToken: string){
+    const verification = await verifyUserToken(userToken);
+    if (verification.success) {
+      setStatus(Status.SUCCESS);
+    }
+    else {
+      setStatus(Status.ERROR);
+      setError(verification.error as string);
+    }
+  }
+
+  useEffect(() => {
+    fetchVerification(userToken);
+  }, [userToken]);
+
+
+  return (
+    <>
+    <StarBackground />
+    <MainWrapper>
+      <EclipseLogoTextOrbGlow className="h-16 md:h-40" />
+
+
+      {status === Status.LOADING && <LoadingSpinner /> }
+      {status === Status.SUCCESS && <p>Your email has been verified</p>}
+      {status === Status.ERROR &&
+        <p>{error}</p>
+      }
+
+    </MainWrapper>
+    </>
+  );
+}