setup react email and nodemailer

2026-02-10 20:02:26 +00:00 · 2024-10-03 20:55:54 -04:00
parent c9d98a8e8c
commit 57ebc0e525
11 changed files with 2497 additions and 4754 deletions
--- a/server/emails/index.ts
+++ b/server/emails/index.ts
@@ -0,0 +1,33 @@
+export * from "@server/emails/sendEmail";
+
+import nodemailer from "nodemailer";
+import environment from "@server/environment";
+import logger from "@server/logger";
+
+function createEmailClient() {
+    if (
+        !environment.EMAIL_SMTP_HOST ||
+        !environment.EMAIL_SMTP_PORT ||
+        !environment.EMAIL_SMTP_USER ||
+        !environment.EMAIL_SMTP_PASS
+    ) {
+        logger.warn(
+            "Email SMTP configuration is missing. Emails will not be sent.",
+        );
+        return;
+    }
+
+    return nodemailer.createTransport({
+        host: environment.EMAIL_SMTP_HOST,
+        port: environment.EMAIL_SMTP_PORT,
+        secure: false,
+        auth: {
+            user: environment.EMAIL_SMTP_USER,
+            pass: environment.EMAIL_SMTP_PASS,
+        },
+    });
+}
+
+export const emailClient = createEmailClient();
+
+export default emailClient;
--- a/server/emails/sendEmail.ts
+++ b/server/emails/sendEmail.ts
@@ -0,0 +1,33 @@
+import { render } from "@react-email/components";
+import { ReactElement } from "react";
+import emailClient from "@server/emails";
+import logger from "@server/logger";
+
+export async function sendEmail(
+    template: ReactElement,
+    opts: {
+        from: string;
+        to: string;
+        subject: string;
+    },
+) {
+    if (!emailClient) {
+        logger.warn("Email client not configured, skipping email send");
+        return;
+    }
+
+    const emailHtml = await render(template);
+
+    const options = {
+        from: opts.from,
+        to: opts.to,
+        subject: opts.subject,
+        html: emailHtml,
+    };
+
+    await emailClient.sendMail(options);
+
+    logger.debug(`Sent email to ${opts.to}`);
+}
+
+export default sendEmail;
--- a/server/emails/templates/verifyEmailCode.tsx
+++ b/server/emails/templates/verifyEmailCode.tsx
@@ -0,0 +1,63 @@
+import {
+    Body,
+    Container,
+    Head,
+    Heading,
+    Html,
+    Preview,
+    Section,
+    Text,
+    Tailwind,
+} from "@react-email/components";
+import * as React from "react";
+
+interface VerifyEmailProps {
+    username?: string;
+    verificationCode: string;
+}
+
+export const VerifyEmail = ({
+    username,
+    verificationCode,
+}: VerifyEmailProps) => {
+    const previewText = `Verify your email, ${username}`;
+
+    return (
+        <Html>
+            <Head />
+            <Preview>{previewText}</Preview>
+            <Tailwind>
+                <Body className="font-sans">
+                    <Container className="bg-white border border-solid border-gray-200 p-6 max-w-lg mx-auto my-8">
+                        <Heading className="text-2xl font-semibold text-gray-800 text-center">
+                            Verify Your Email
+                        </Heading>
+                        <Text className="text-base text-gray-700 mt-4">
+                            Hi {username || "there"},
+                        </Text>
+                        <Text className="text-base text-gray-700 mt-2">
+                            You’ve requested to verify your email. Please use
+                            the verification code below:
+                        </Text>
+                        <Section className="text-center my-6">
+                            <Text className="inline-block bg-gray-100 text-xl font-bold text-gray-900 py-2 px-4 border border-gray-300 rounded-md">
+                                {verificationCode}
+                            </Text>
+                        </Section>
+                        <Text className="text-base text-gray-700 mt-2">
+                            If you didn’t request this, you can safely ignore
+                            this email.
+                        </Text>
+                        <Text className="text-sm text-gray-500 mt-6">
+                            Best regards,
+                            <br />
+                            Fossorial
+                        </Text>
+                    </Container>
+                </Body>
+            </Tailwind>
+        </Html>
+    );
+};
+
+export default VerifyEmail;