feat: Add email verification and password reset

packages/db/prisma/migrations/20251220175216_add_email_verified/migration.sql

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

packages/db/prisma/schema.prisma

@@ -17,9 +17,10 @@ model User {
   id String @id @default(uuid())
 
   // Credentials
-  email    String     @unique
-  password String?
-  type     AuthMethod
+  email         String     @unique
+  password      String?
+  type          AuthMethod
+  emailVerified Boolean    @default(false)
 
   // Relations
   memberships Membership[]

packages/email/src/emails/EmailVerification.tsx

@@ -0,0 +1,57 @@
+import {Heading, Link, Section, Text} from '@react-email/components';
+import * as React from 'react';
+import {EmailLayout} from '../common/EmailLayout';
+import {Footer} from '../common/Footer';
+import {Header} from '../common/Header';
+
+interface EmailVerificationEmailProps {
+  email: string;
+  verificationUrl: string;
+  landingUrl?: string;
+}
+
+export function EmailVerificationEmail({
+  email = '[email protected]',
+  verificationUrl = 'https://api.useplunk.com/auth/verify-email?token=abc123',
+  landingUrl = 'https://www.useplunk.com',
+}: EmailVerificationEmailProps) {
+  return (
+    <EmailLayout>
+      <Header />
+
+      <Section className="px-8 pb-10 pt-10">
+        <Heading className="mb-2 mt-0 text-2xl font-semibold tracking-tight text-gray-900">
+          Verify your email address
+        </Heading>
+
+        <Text className="mb-8 mt-0 text-base leading-relaxed text-gray-600">
+          Thanks for signing up! Please verify your email address to get started with Plunk.
+        </Text>
+
+        <Section className="mb-8">
+          <Link
+            href={verificationUrl}
+            className="inline-block rounded-md bg-gray-900 px-6 py-3 text-sm font-medium text-white no-underline"
+          >
+            Verify email address
+          </Link>
+        </Section>
+
+        <Section className="mb-8 rounded-lg bg-gray-50 px-6 py-4" style={{border: '1px solid #e5e7eb'}}>
+          <Text className="mb-2 mt-0 text-xs font-medium uppercase tracking-wider text-gray-500">
+            Or copy this link
+          </Text>
+          <Text className="mb-0 mt-0 break-all text-sm text-gray-600">{verificationUrl}</Text>
+        </Section>
+
+        <Text className="mb-0 mt-0 text-sm text-gray-500">
+          This link will expire in 1 hour. If you didn't sign up for Plunk, you can safely ignore this email.
+        </Text>
+      </Section>
+
+      <Footer landingUrl={landingUrl} />
+    </EmailLayout>
+  );
+}
+
+export default EmailVerificationEmail;

packages/email/src/emails/PasswordReset.tsx

@@ -0,0 +1,59 @@
+import {Heading, Link, Section, Text} from '@react-email/components';
+import * as React from 'react';
+import {EmailLayout} from '../common/EmailLayout';
+import {Footer} from '../common/Footer';
+import {Header} from '../common/Header';
+
+interface PasswordResetEmailProps {
+  email: string;
+  resetUrl: string;
+  landingUrl?: string;
+}
+
+export function PasswordResetEmail({
+  email = '[email protected]',
+  resetUrl = 'https://app.useplunk.com/auth/reset-password?token=abc123',
+  landingUrl = 'https://www.useplunk.com',
+}: PasswordResetEmailProps) {
+  return (
+    <EmailLayout>
+      <Header />
+
+      <Section className="px-8 pb-10 pt-10">
+        <Heading className="mb-2 mt-0 text-2xl font-semibold tracking-tight text-gray-900">
+          Reset your password
+        </Heading>
+
+        <Text className="mb-8 mt-0 text-base leading-relaxed text-gray-600">
+          We received a request to reset your password. Click the button below to create a new password.
+        </Text>
+
+        <Section className="mb-8">
+          <Link
+            href={resetUrl}
+            className="inline-block rounded-md bg-gray-900 px-6 py-3 text-sm font-medium text-white no-underline"
+          >
+            Reset password
+          </Link>
+        </Section>
+
+        <Section className="mb-8 rounded-lg bg-amber-50 px-6 py-4" style={{border: '1px solid #fbbf24'}}>
+          <Text className="mb-0 mt-0 text-sm leading-relaxed text-amber-900">
+            This link will expire in 1 hour. If you didn't request a password reset, you can safely ignore this email.
+          </Text>
+        </Section>
+
+        <Section className="mb-8 rounded-lg bg-gray-50 px-6 py-4" style={{border: '1px solid #e5e7eb'}}>
+          <Text className="mb-2 mt-0 text-xs font-medium uppercase tracking-wider text-gray-500">
+            Or copy this link
+          </Text>
+          <Text className="mb-0 mt-0 break-all text-sm text-gray-600">{resetUrl}</Text>
+        </Section>
+      </Section>
+
+      <Footer landingUrl={landingUrl} />
+    </EmailLayout>
+  );
+}
+
+export default PasswordResetEmail;

packages/email/src/emails/index.ts

@@ -1,3 +1,5 @@
 export {ProjectDisabledEmail} from './ProjectDisabled';
 export {BillingLimitWarningEmail} from './BillingLimitWarning';
 export {BillingLimitExceededEmail} from './BillingLimitExceeded';
+export {EmailVerificationEmail} from './EmailVerification';
+export {PasswordResetEmail} from './PasswordReset';

packages/shared/src/schemas/index.ts

@@ -48,9 +48,16 @@ export const AuthenticationSchemas = {
     email,
     password: z.string().min(6),
   }),
-  resetPassword: z.object({
+  verifyEmail: z.object({
+    token: z.string().length(64, 'Invalid verification token'),
+  }),
+  requestPasswordReset: z.object({
     email,
   }),
+  resetPassword: z.object({
+    token: z.string().length(64, 'Invalid reset token'),
+    newPassword: z.string().min(6, 'Password must be at least 6 characters'),
+  }),
 } as const;
 
 export const ProjectSchemas = {