feat: resend

Author: luannguyenQV

apps/web/.env.example

@@ -0,0 +1,13 @@
+NEXTAUTH_SECRET=
+NEXTAUTH_URL=
+
+NEXT_PUBLIC_FRONTEND_URL=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+JWT_SECRET=
+
+NEXT_PUBLIC_FB_APP_ID=
+
+RESEND_AUDIENCE_ID=

apps/web/@/actions/auth/index.ts

@@ -4,6 +4,8 @@ import bcryptjs from "bcryptjs"
 import { signIn, signOut } from "configs/auth"
 import { Prisma } from "database"
 import { createUser } from "database/src/users/queries"
+import { sendEmail } from "emails"
+import VerifyEmail from "emails/verify-email"
 
 import { redirect } from "@/utils/navigation"
 
@@ -42,8 +44,31 @@ export const signUp = async (
       },
     })
 
+    console.log("create user...successfully")
+
+    // create verification code
+    const token = crypto.randomUUID()
+    await prisma.verificationToken.create({
+      data: {
+        token, // 6 digits code
+        identifier: email,
+        expires: new Date(Date.now() + 1000 * 60 * 60 * 24), // 1 day
+      },
+    })
+
+    console.log("verification token...successfully")
+
     // send email
+    await sendEmail({
+      email,
+      subject: "Welcome to Next Forum",
+      react: VerifyEmail({
+        token,
+        email,
+      }),
+    })
   } catch (error) {
+    console.error("signUp.error", error)
     if (error?.error?.code === "P2002") {
       return {
         formErrors: null,

apps/web/@/libs/resend/index.tsx

@@ -0,0 +1,30 @@
+import { Resend } from "resend"
+
+const resendApiKey = process.env.RESEND_API_KEY
+
+export const resend = resendApiKey ? new Resend(resendApiKey) : null
+
+export async function subscribe({ email, name }: { email: string; name?: string | null }) {
+  const audienceId = process.env.RESEND_AUDIENCE_ID
+
+  if (!audienceId) {
+    console.error("RESEND_AUDIENCE_ID is not set in the .env. Skipping.")
+    return
+  }
+
+  return await resend?.contacts.create({
+    email,
+    ...(name && {
+      firstName: name.split(" ")[0],
+      lastName: name.split(" ").slice(1).join(" "),
+    }),
+    audienceId: process.env.RESEND_AUDIENCE_ID as string,
+  })
+}
+
+export async function unsubscribe({ email }: { email: string }) {
+  return await resend?.contacts.remove({
+    email,
+    audienceId: process.env.RESEND_AUDIENCE_ID as string,
+  })
+}

apps/web/@/molecules/auth/sign-up/index.tsx

@@ -3,25 +3,18 @@
 import Link from "next/link"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Prisma } from "database"
-import { GithubIcon } from "lucide-react"
 import { useTranslations } from "next-intl"
-import { useFormState } from "react-dom"
 import { useForm } from "react-hook-form"
 import { toast } from "react-toastify"
 import {
   Button,
-  Card,
-  CardContent,
-  CardFooter,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
-  Label,
   Typography,
 } from "ui"
 import { z } from "zod"

apps/web/app/[lang]/(auth)/verify-email/index.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useSearchParams } from "next/navigation"
+
+export default function VerifyEmail() {
+  const searchParams = useSearchParams()
+  const code = searchParams.get("code")
+
+  return <div>Verify Email</div>
+}

apps/web/emails/index.ts

@@ -4,7 +4,7 @@ import { render } from "@react-email/components"
 import nodemailer from "nodemailer"
 import { CreateEmailOptions } from "resend"
 
-import { resend } from "@/lib/resend"
+import { resend } from "@/libs/resend"
 
 // Send email using SMTP (Recommended for local development)
 const sendEmailViaSMTP = async ({
@@ -63,18 +63,21 @@ export const sendEmailViaResend = async ({
   return await resend.emails.send({
     to: email,
     from:
-      from || (marketing ? "Steven from Dub.co <steven@ship.dub.co>" : "Dub.co <system@dub.co>"),
+      from ||
+      (marketing
+        ? "Luan Nguyen from codeforstartup.com <support@codeforstartup.com>"
+        : "codeforstartup.com <support@codeforstartup.com>"),
     bcc: bcc,
     ...(!replyToFromEmail && {
-      replyTo: "support@dub.co",
+      replyTo: "support@codeforstartup.com",
     }),
     subject: subject,
     text: text,
     react: react,
     scheduledAt,
     ...(marketing && {
       headers: {
-        "List-Unsubscribe": "https://app.dub.co/account/settings",
+        "List-Unsubscribe": process.env.NEXT_PUBLIC_FRONTEND_URL,
       },
     }),
   })
@@ -97,6 +100,8 @@ export const sendEmail = async ({
   marketing?: boolean
 }) => {
   if (resend) {
+    console.info("sendmail...", email)
+
     return await sendEmailViaResend({
       email,
       subject,

apps/web/emails/verify-email.tsx

@@ -12,7 +12,7 @@ import {
   Text,
 } from "@react-email/components"
 
-export default function VerifyEmail({}) {
+export default function VerifyEmail({ token, email }: { token: string; email: string }) {
   return (
     <Html>
       <Head />
@@ -29,7 +29,7 @@ export default function VerifyEmail({}) {
             </Text>
             <Section className="my-8">
               <Link
-                href=""
+                href={`${process.env.NEXT_PUBLIC_APP_URL}/auth/verify-email?code=${token}&email=${email}`}
                 className="align-center flex w-[100%] justify-center rounded-sm bg-[tomato] py-2 text-center font-medium text-white"
               >
                 GET STARTED

apps/web/tsconfig.json

@@ -14,6 +14,9 @@
         "@/*",
         "./src/*",
         "assets/*"
+      ],
+      "emails/*": [
+        "./emails/*"
       ]
     }
   },