feat: Added email verification system

app/(app)/settings/_client.tsx

@@ -4,14 +4,16 @@ import { useEffect, useState } from "react";
 import { Description, Field, Label, Switch } from "@headlessui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { SubmitHandler } from "react-hook-form";
-import { useForm } from "react-hook-form";
+import { set, useForm } from "react-hook-form";
 import { api } from "@/server/trpc/react";
 import { toast } from "sonner";
 import type { saveSettingsInput } from "@/schema/profile";
 import { saveSettingsSchema } from "@/schema/profile";
 
 import { uploadFile } from "@/utils/s3helpers";
 import type { user } from "@/server/db/schema";
+import { Button } from "@/components/ui-components/button";
+import { CheckCheck, Loader, Loader2 } from "lucide-react";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -27,6 +29,8 @@ type User = Pick<
   | "emailNotifications"
   | "newsletter"
   | "image"
+  | "email"
+  | "id"
 >;
 
 type ProfilePhoto = {
@@ -42,7 +46,11 @@ const Settings = ({ profile }: { profile: User }) => {
     formState: { errors },
   } = useForm<saveSettingsInput>({
     resolver: zodResolver(saveSettingsSchema),
-    defaultValues: { ...profile, username: profile.username || "" },
+    defaultValues: {
+      ...profile,
+      username: profile.username || "",
+      email: profile.email || "",
+    },
   });
 
   const bio = watch("bio");
@@ -52,6 +60,9 @@ const Settings = ({ profile }: { profile: User }) => {
 
   const [emailNotifications, setEmailNotifications] = useState(eNotifications);
   const [weeklyNewsletter, setWeeklyNewsletter] = useState(newsletter);
+  const [newEmail, setNewEmail] = useState("");
+  const [sendForVerification, setSendForVerification] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const [profilePhoto, setProfilePhoto] = useState<ProfilePhoto>({
     status: "idle",
@@ -127,6 +138,44 @@ const Settings = ({ profile }: { profile: User }) => {
     }
   };
 
+  const handleNewEmailUpdate = async () => {
+    setLoading(true);
+    try {
+      await fetch("/api/update_email", {
+        method: "POST",
+        body: JSON.stringify({ userId: profile.id, newEmail }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+        .then((res) => res.json())
+        .then((res) => {
+          console.log(res);
+          if (res.status === 400) {
+            setLoading(false);
+            toast.error(
+              "Something went wrong while sending the verification link",
+            );
+          } else {
+            toast.success(
+              "Verification link has been sent to your new email address.",
+            );
+            setLoading(false);
+            setSendForVerification(true);
+          }
+        })
+        .catch((error) => {
+          setLoading(false);
+          toast.error(
+            "Something went wrong while sending the verification link.",
+          );
+        });
+    } catch (error) {
+      setLoading(false);
+      toast.error("Something went wrong while sending the verification link.");
+    }
+  };
+
   return (
     <div className="old-input py-8">
       <div className="mx-auto flex w-full max-w-2xl flex-grow flex-col justify-center px-4 sm:px-6 lg:col-span-9">
@@ -338,6 +387,65 @@ const Settings = ({ profile }: { profile: User }) => {
                     </div>
                   </div>
                 </div>
+                <div className="mt-6 text-neutral-600 dark:text-neutral-400">
+                  <h2 className="text-xl font-bold tracking-tight text-neutral-800 dark:text-white">
+                    Update email
+                  </h2>
+                  <p className="mt-1 text-sm">Change your email here.</p>
+                  <div className="mt-2 flex flex-col gap-2">
+                    <div className="flex flex-col">
+                      <label htmlFor="currEmail">Current email</label>
+                      <div>
+                        <input
+                          type="email"
+                          id="currEmail"
+                          {...register("email")}
+                          disabled
+                        />
+                      </div>
+                    </div>
+                    <div className="flex flex-col">
+                      <label htmlFor="newEmail">Update email</label>
+                      <div>
+                        <input
+                          type="email"
+                          id="newEmail"
+                          onChange={(e) => setNewEmail(e.target.value)}
+                          value={newEmail}
+                        />
+                      </div>
+                    </div>
+                    {!sendForVerification ? (
+                      <Button
+                        className="w-[200px]"
+                        disabled={newEmail || loading ? false : true}
+                        onClick={handleNewEmailUpdate}
+                      >
+                        {loading && (
+                          <Loader className="text-primary h-4 w-4 animate-spin" />
+                        )}
+                        Send verification link
+                      </Button>
+                    ) : (
+                      <div className="mt-2 flex flex-row gap-2">
+                        <h2 className="flex items-center gap-2 text-sm italic text-green-400">
+                          <CheckCheck />
+                          Verification link sent
+                        </h2>
+                        <Button
+                          className="w-[200px]"
+                          disabled={newEmail || loading ? false : true}
+                          onClick={handleNewEmailUpdate}
+                        >
+                          {loading && (
+                            <Loader className="text-primary h-8 w-8 animate-spin" />
+                          )}
+                          Resend verification link
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                </div>
                 <div className="divide-y divide-neutral-200 pt-6">
                   <div>
                     <div className="text-neutral-600 dark:text-neutral-400">

app/(app)/settings/page.tsx

@@ -23,6 +23,7 @@ export default async function Page() {
 
   const existingUser = await db.query.user.findFirst({
     columns: {
+      id: true,
       name: true,
       username: true,
       bio: true,
@@ -31,6 +32,7 @@ export default async function Page() {
       emailNotifications: true,
       newsletter: true,
       image: true,
+      email: true,
     },
     where: (users, { eq }) => eq(users.id, session.user!.id),
   });
@@ -50,6 +52,7 @@ export default async function Page() {
       .set({ username: initialUsername })
       .where(eq(user.id, session.user.id))
       .returning({
+        id: user.id,
         name: user.name,
         username: user.username,
         bio: user.bio,
@@ -58,6 +61,7 @@ export default async function Page() {
         emailNotifications: user.emailNotifications,
         newsletter: user.newsletter,
         image: user.image,
+        email: user.email,
       });
     return <Content profile={newUser} />;
   }

app/api/update_email/route.ts

@@ -0,0 +1,25 @@
+import {
+  generateEmailToken,
+  sendVerificationEmail,
+  storeTokenInDb,
+} from "@/utils/emailToken";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest, res: NextResponse) {
+  const { userId, newEmail } = await req.json();
+
+  if (!newEmail || !userId)
+    return NextResponse.json({ message: "Invalid request" }, { status: 400 });
+
+  const token = generateEmailToken();
+  const expiresAt = new Date(Date.now() + 1000 * 60 * 60); //1 hour
+
+  await storeTokenInDb(userId, token, expiresAt, newEmail);
+
+  await sendVerificationEmail(newEmail, token);
+
+  return NextResponse.json(
+    { message: "Verification email sent" },
+    { status: 200 },
+  );
+}

app/api/verify_email/route.ts

@@ -0,0 +1,33 @@
+import {
+  deleteTokenFromDb,
+  getTokenFromDb,
+  updateEmail,
+} from "@/utils/emailToken";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function POST(req: NextRequest, res: NextResponse) {
+  const token = req.nextUrl.searchParams.get("token");
+  const { userId } = await req.json();
+
+  if (!token)
+    return NextResponse.json({ message: "Invalid request" }, { status: 400 });
+
+  const tokenFromDb = await getTokenFromDb(token, userId);
+
+  console.log("tokenFromDb", tokenFromDb);
+  if (!tokenFromDb.length)
+    return NextResponse.json({ message: "Invalid token" }, { status: 400 });
+
+  const { expiresAt, email } = tokenFromDb[0];
+  if (expiresAt < new Date())
+    return NextResponse.json({ message: "Token expired" }, { status: 400 });
+
+  await updateEmail(userId, email);
+
+  await deleteTokenFromDb(token);
+
+  return NextResponse.json(
+    { message: "Email successfully verified" },
+    { status: 200 },
+  );
+}

app/verify_email/_client.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Button } from "@headlessui/react";
+import { AlertCircle, CheckCircle, Loader } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+function Content({ userId }: { userId: string }) {
+  const params = useSearchParams();
+  const router = useRouter();
+  const [status, setStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [message, setMessage] = useState("");
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const tokenParam = params.get("token");
+    if (tokenParam && !token) {
+      setToken(tokenParam);
+    }
+  }, [params, token]);
+
+  useEffect(() => {
+    const verifyEmail = async () => {
+      if (!token) {
+        setStatus("error");
+        setMessage(
+          "No verification token found. Please check your email for the correct link.",
+        );
+        return;
+      }
+      setStatus("loading");
+
+      try {
+        const res = await fetch(`/api/verify_email?token=${token}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ userId }),
+        });
+        const data = await res.json();
+        console.log("data", data);
+        if (res.ok) {
+          setStatus("success");
+        } else {
+          setStatus("error");
+        }
+        setMessage(data.message);
+      } catch (error) {
+        setStatus("error");
+        setMessage(
+          "An error occurred during verification. Please try again later.",
+        );
+      }
+    };
+
+    verifyEmail();
+  }, [token]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+      <div className="w-[350px] rounded-lg border bg-white shadow-sm">
+        <div className="flex flex-col space-y-1.5 p-6 text-center">
+          <div className="text-2xl font-bold">Email Verification</div>
+          <div className="text-gray-400">Verifying your email address</div>
+        </div>
+        <div className="min-h-12 p-6 pt-0">
+          {status === "loading" && (
+            <div className="flex flex-col items-center justify-center py-4">
+              <Loader className="text-primary h-4 w-4 animate-spin" />
+              <p className="text-muted-foreground mt-2 text-sm">
+                Verifying your email...
+              </p>
+            </div>
+          )}
+          {status === "success" && (
+            <div className="flex flex-col items-center justify-center py-4">
+              <CheckCircle className="h-8 w-8 text-green-500" />
+              <p className="mt-2 text-center text-sm">{message}</p>
+            </div>
+          )}
+          {status === "error" && (
+            <div className="flex flex-col items-center justify-center py-4">
+              <AlertCircle className="h-8 w-8 text-red-500" />
+              <p className="mt-2 text-center text-sm">{message}</p>
+            </div>
+          )}
+        </div>
+        {status === "success" && (
+          <div className="flex items-center justify-center p-6 pt-0">
+            <Button
+              onClick={() => router.push("/settings")}
+              className="mt-4 h-10 rounded-md bg-gray-200 px-4 py-2 transition-colors hover:bg-gray-300"
+            >
+              Return to Settings
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Content;

app/verify_email/page.tsx

@@ -0,0 +1,30 @@
+import { getServerAuthSession } from "@/server/auth";
+import { redirect } from "next/navigation";
+import React from "react";
+import Content from "./_client";
+import { db } from "@/server/db";
+
+export const metadata = {
+  title: "Verify Email",
+};
+
+export default async function Page() {
+  const session = await getServerAuthSession();
+  console.log("session", session);
+  if (!session || !session.user) {
+    redirect("/not-found");
+  }
+
+  const existingUser = await db.query.user.findFirst({
+    columns: {
+      id: true,
+    },
+    where: (users, { eq }) => eq(users.id, session.user!.id),
+  });
+
+  if (!existingUser) {
+    redirect("/not-found");
+  }
+
+  return <Content userId={existingUser.id} />;
+}