Finally have all email verification / password reset auth flows working!

2025-09-24 13:52:11 -05:00
parent 914c45dca4
commit ab278c2ae8
21 changed files with 1013 additions and 267 deletions
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -35,7 +35,7 @@
    "react-dom": "19.1.0",
    "react-native": "0.81.4",
    "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.1.0",
+    "react-native-reanimated": "~4.1.1",
    "react-native-safe-area-context": "~5.6.1",
    "react-native-screens": "~4.16.0",
    "react-native-web": "~0.21.1",
--- a/apps/next/package.json
+++ b/apps/next/package.json
@@ -32,8 +32,9 @@
    "clsx": "^2.1.1",
    "convex": "^1.27.3",
    "eslint-plugin-prettier": "^5.5.4",
+    "input-otp": "^1.4.2",
    "lucide-react": "^0.542.0",
-    "next": "^15.5.3",
+    "next": "^15.5.4",
    "next-plausible": "^3.12.4",
    "next-themes": "^0.4.6",
    "radix-ui": "^1.4.3",
@@ -55,9 +56,9 @@
    "@types/react": "^19.1.13",
    "@types/react-dom": "^19.1.9",
    "dotenv": "^16.6.1",
-    "eslint-config-next": "^15.5.3",
+    "eslint-config-next": "^15.5.4",
    "npm-run-all": "^4.1.5",
    "tailwindcss": "^4.1.13",
-    "tw-animate-css": "^1.3.8"
+    "tw-animate-css": "^1.4.0"
  }
 }
--- a/apps/next/src/app/(auth)/forgot-password/layout.tsx
+++ b/apps/next/src/app/(auth)/forgot-password/layout.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+
+export const generateMetadata = (): Metadata => {
+  return {
+    title: 'Forgot Password',
+  };
+};
+
+const ProfileLayout = ({
+  children,
+}: Readonly<{ children: React.ReactNode }>) => {
+  return <div>{children}</div>;
+};
+export default ProfileLayout;
--- a/apps/next/src/app/(auth)/forgot-password/page.tsx
+++ b/apps/next/src/app/(auth)/forgot-password/page.tsx
@@ -0,0 +1,298 @@
+'use client';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useAuthActions } from '@convex-dev/auth/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  SubmitButton,
+  InputOTPSeparator,
+} from '@/components/ui';
+import { toast } from 'sonner';
+import { PASSWORD_MIN, PASSWORD_MAX } from '@/lib/types';
+
+const forgotPasswordSchema = z.object({
+  email: z.email({ message: 'Invalid email.' }),
+});
+
+const resetVerificationSchema = z
+  .object({
+    code: z.string({ message: 'Invalid code.' }),
+    newPassword: z
+      .string()
+      .min(PASSWORD_MIN, {
+        message: `Password must be at least ${PASSWORD_MIN} characters.`,
+      })
+      .max(PASSWORD_MAX, {
+        message: `Password must be no more than ${PASSWORD_MAX} characters.`,
+      })
+      .regex(/^\S+$/, {
+        message: 'Password must not contain whitespace.',
+      })
+      .regex(/[0-9]/, {
+        message: 'Password must contain at least one digit.',
+      })
+      .regex(/[a-z]/, {
+        message: 'Password must contain at least one lowercase letter.',
+      })
+      .regex(/[A-Z]/, {
+        message: 'Password must contain at least one uppercase letter.',
+      })
+      .regex(/[\p{P}\p{S}]/u, {
+        message: 'Password must contain at least one symbol.',
+      }),
+    confirmPassword: z.string().min(PASSWORD_MIN, {
+      message: `Password must be at least ${PASSWORD_MIN} characters.`,
+    }),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Passwords do not match!',
+    path: ['confirmPassword'],
+  });
+
+const ForgotPassword = () => {
+  const { signIn } = useAuthActions();
+  const [flow, setFlow] = useState<'reset' | 'reset-verification'>('reset');
+  const [email, setEmail] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [code, setCode] = useState<string>('');
+  const router = useRouter();
+
+  const forgotPasswordForm = useForm<z.infer<typeof forgotPasswordSchema>>({
+    resolver: zodResolver(forgotPasswordSchema),
+    defaultValues: { email },
+  });
+
+  const resetVerificationForm = useForm<
+    z.infer<typeof resetVerificationSchema>
+  >({
+    resolver: zodResolver(resetVerificationSchema),
+    defaultValues: { code, newPassword: '', confirmPassword: '' },
+  });
+
+  const handleForgotPasswordSubmit = async (
+    values: z.infer<typeof forgotPasswordSchema>,
+  ) => {
+    const formData = new FormData();
+    formData.append('email', values.email);
+    formData.append('flow', flow);
+    setLoading(true);
+    try {
+      await signIn('password', formData).then(() => {
+        setEmail(values.email);
+        setFlow('reset-verification');
+      });
+    } catch (error) {
+      console.error('Error resetting password: ', error);
+      toast.error('Error resetting password.');
+    } finally {
+      forgotPasswordForm.reset();
+      setLoading(false);
+    }
+  };
+
+  const handleResetVerificationSubmit = async (
+    values: z.infer<typeof resetVerificationSchema>,
+  ) => {
+    const formData = new FormData();
+    formData.append('code', code);
+    formData.append('newPassword', values.newPassword);
+    formData.append('email', email);
+    formData.append('flow', flow);
+    setLoading(true);
+    try {
+      await signIn('password', formData);
+      router.push('/');
+    } catch (error) {
+      console.error('Error resetting password: ', error);
+      toast.error('Error resetting password.');
+    } finally {
+      resetVerificationForm.reset();
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className='flex flex-col items-center'>
+      <Card className='p-4 bg-card/25 min-h-[400px] w-sm lg:w-md'>
+        <CardHeader className='flex flex-col gap-4 items-center'>
+          {flow === 'reset' ? (
+            <>
+              <CardTitle className='font-bold text-2xl'>
+                Forgot Password
+              </CardTitle>
+              <CardDescription>
+                Enter your email address and we will send you a link to reset
+                your password.
+              </CardDescription>
+            </>
+          ) : (
+            <>
+              <CardTitle className='font-bold text-2xl'>
+                Reset Password
+              </CardTitle>
+              <CardDescription>
+                Enter your code and new password and we will reset your
+                password.
+              </CardDescription>
+            </>
+          )}
+        </CardHeader>
+        <CardContent>
+          <Card className='bg-card/50'>
+            <CardContent>
+              {flow === 'reset' ? (
+                <Form {...forgotPasswordForm}>
+                  <form
+                    onSubmit={forgotPasswordForm.handleSubmit(
+                      handleForgotPasswordSubmit,
+                    )}
+                    className='flex flex-col space-y-4'
+                  >
+                    <FormField
+                      control={forgotPasswordForm.control}
+                      name='email'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='text-xl'>Email</FormLabel>
+                          <FormControl>
+                            <Input
+                              type='email'
+                              placeholder='you@example.com'
+                              {...field}
+                            />
+                          </FormControl>
+                          <div className='flex flex-col w-full items-center'>
+                            <FormMessage className='w-5/6 text-center' />
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                    <SubmitButton
+                      disabled={loading}
+                      pendingText='Sending Email...'
+                      className='text-xl font-semibold w-2/3 mx-auto'
+                    >
+                      Send Email
+                    </SubmitButton>
+                  </form>
+                </Form>
+              ) : (
+                <Form {...resetVerificationForm}>
+                  <form
+                    onSubmit={resetVerificationForm.handleSubmit(
+                      handleResetVerificationSubmit,
+                    )}
+                    className='flex flex-col space-y-4'
+                  >
+                    <FormField
+                      control={resetVerificationForm.control}
+                      name='code'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='text-xl'>Code</FormLabel>
+                          <FormControl>
+                            <InputOTP
+                              maxLength={6}
+                              {...field}
+                              value={code}
+                              onChange={(value) => setCode(value)}
+                            >
+                              <InputOTPGroup>
+                                <InputOTPSlot index={0} />
+                                <InputOTPSlot index={1} />
+                                <InputOTPSlot index={2} />
+                                <InputOTPSeparator />
+                                <InputOTPSlot index={3} />
+                                <InputOTPSlot index={4} />
+                                <InputOTPSlot index={5} />
+                              </InputOTPGroup>
+                            </InputOTP>
+                          </FormControl>
+                          <FormDescription>
+                            Please enter the one-time password sent to your
+                            phone.
+                          </FormDescription>
+                          <div className='flex flex-col w-full items-center'>
+                            <FormMessage className='w-5/6 text-center' />
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={resetVerificationForm.control}
+                      name='newPassword'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='text-xl'>
+                            New Password
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              type='password'
+                              placeholder='Your password'
+                              {...field}
+                            />
+                          </FormControl>
+                          <div className='flex flex-col w-full items-center'>
+                            <FormMessage className='w-5/6 text-center' />
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={resetVerificationForm.control}
+                      name='confirmPassword'
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className='text-xl'>
+                            Confirm Passsword
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              type='password'
+                              placeholder='Confirm your password'
+                              {...field}
+                            />
+                          </FormControl>
+                          <div className='flex flex-col w-full items-center'>
+                            <FormMessage className='w-5/6 text-center' />
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                    <SubmitButton
+                      disabled={loading}
+                      pendingText='Resetting Password...'
+                      className='text-xl font-semibold w-2/3 mx-auto'
+                    >
+                      Reset Password
+                    </SubmitButton>
+                  </form>
+                </Form>
+              )}
+            </CardContent>
+          </Card>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+export default ForgotPassword;
--- a/apps/next/src/app/(auth)/signin/page.tsx
+++ b/apps/next/src/app/(auth)/signin/page.tsx
@@ -12,11 +12,16 @@ import {
  CardContent,
  Form,
  FormControl,
+  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
  Separator,
  SubmitButton,
  Tabs,
@@ -45,7 +50,7 @@ const signUpFormSchema = z
    name: z.string().min(2, {
      message: 'Name must be at least 2 characters.',
    }),
-    email: z.string().email({
+    email: z.email({
      message: 'Please enter a valid email address.',
    }),
    password: z
@@ -80,9 +85,17 @@ const signUpFormSchema = z
    path: ['confirmPassword'],
  });

+const verifyEmailFormSchema = z.object({
+  code: z.string({ message: 'Invalid code.' }),
+});
+
 const SignIn = () => {
  const { signIn } = useAuthActions();
-  const [flow, setFlow] = useState<'signIn' | 'signUp'>('signIn');
+  const [flow, setFlow] = useState<'signIn' | 'signUp' | 'email-verification'>(
+    'signIn',
+  );
+  const [email, setEmail] = useState<string>('');
+  const [code, setCode] = useState<string>('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();

@@ -95,12 +108,17 @@ const SignIn = () => {
    resolver: zodResolver(signUpFormSchema),
    defaultValues: {
      name: '',
-      email: '',
+      email,
      password: '',
      confirmPassword: '',
    },
  });

+  const verifyEmailForm = useForm<z.infer<typeof verifyEmailFormSchema>>({
+    resolver: zodResolver(verifyEmailFormSchema),
+    defaultValues: { code },
+  });
+
  const handleSignIn = async (values: z.infer<typeof signInFormSchema>) => {
    const formData = new FormData();
    formData.append('email', values.email);
@@ -108,13 +126,12 @@ const SignIn = () => {
    formData.append('flow', flow);
    setLoading(true);
    try {
-      await signIn('password', formData);
-      signInForm.reset();
-      router.push('/');
+      await signIn('password', formData).then(() => router.push('/'));
    } catch (error) {
      console.error('Error signing in:', error);
      toast.error('Error signing in.');
    } finally {
+      signInForm.reset();
      setLoading(false);
    }
  };
@@ -129,17 +146,107 @@ const SignIn = () => {
    try {
      if (values.confirmPassword !== values.password)
        throw new ConvexError('Passwords do not match.');
-      await signIn('password', formData);
-      signUpForm.reset();
-      router.push('/');
+      await signIn('password', formData).then(() => {
+        setEmail(values.email);
+        setFlow('email-verification');
+      });
    } catch (error) {
      console.error('Error signing up:', error);
      toast.error('Error signing up.');
    } finally {
+      signUpForm.reset();
      setLoading(false);
    }
  };

+  const handleVerifyEmail = async (
+    values: z.infer<typeof verifyEmailFormSchema>,
+  ) => {
+    const formData = new FormData();
+    formData.append('code', code);
+    formData.append('flow', flow);
+    formData.append('email', email);
+    setLoading(true);
+    try {
+      await signIn('password', formData).then(() => router.push('/'));
+    } catch (error) {
+      console.error('Error verifying email:', error);
+      toast.error('Error verifying email.');
+    } finally {
+      verifyEmailForm.reset();
+      setLoading(false);
+    }
+  };
+
+  if (flow === 'email-verification') {
+    return (
+      <div className='flex flex-col items-center'>
+        <Card className='p-4 bg-card/25 min-h-[720px] w-md'>
+          <CardContent>
+            <div className='text-center mb-6'>
+              <h2 className='text-2xl font-bold'>Verify Your Email</h2>
+              <p className='text-muted-foreground'>We sent a code to {email}</p>
+            </div>
+            <Form {...verifyEmailForm}>
+              <form
+                onSubmit={verifyEmailForm.handleSubmit(handleVerifyEmail)}
+                className='flex flex-col space-y-8'
+              >
+                <FormField
+                  control={verifyEmailForm.control}
+                  name='code'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className='text-xl'>Code</FormLabel>
+                      <FormControl>
+                        <InputOTP
+                          maxLength={6}
+                          value={code}
+                          onChange={(value) => setCode(value)}
+                        >
+                          <InputOTPGroup>
+                            <InputOTPSlot index={0} />
+                            <InputOTPSlot index={1} />
+                            <InputOTPSlot index={2} />
+                            <InputOTPSeparator />
+                            <InputOTPSlot index={3} />
+                            <InputOTPSlot index={4} />
+                            <InputOTPSlot index={5} />
+                          </InputOTPGroup>
+                        </InputOTP>
+                      </FormControl>
+                      <FormDescription>
+                        Please enter the one-time password sent to your email.
+                      </FormDescription>
+                      <div className='flex flex-col w-full items-center'>
+                        <FormMessage className='w-5/6 text-center' />
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <SubmitButton
+                  disabled={loading}
+                  pendingText='Signing Up...'
+                  className='text-xl font-semibold w-2/3 mx-auto'
+                >
+                  Verify Email
+                </SubmitButton>
+              </form>
+            </Form>
+            <div className='text-center mt-4'>
+              <button
+                onClick={() => setFlow('signUp')}
+                className='text-sm text-muted-foreground hover:underline'
+              >
+                Back to Sign Up
+              </button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
  return (
    <div className='flex flex-col items-center'>
      <Card className='p-4 bg-card/25 min-h-[720px] w-md'>
--- a/apps/next/src/components/layout/status/table/index.tsx
+++ b/apps/next/src/components/layout/status/table/index.tsx
@@ -113,7 +113,7 @@ export const StatusTable = ({
  return (
    <div className={containerCn}>
      <div className={headerCn}>
-        <div className='flex items-center gap-2'>
+        <div className='flex flex-col w-full gap-2 items-end'>
          {!tvMode && (
            <div className='flex flex-row gap-2 text-xs'>
              <p className='text-muted-foreground'>Tired of the old table? </p>
--- a/apps/next/src/components/ui/index.tsx
+++ b/apps/next/src/components/ui/index.tsx
@@ -55,6 +55,12 @@ export {
  ImageCropReset,
 } from './shadcn-io/image-crop';
 export { Input } from './input';
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from './input-otp';
 export { Label } from './label';
 export {
  Pagination,
--- a/apps/next/src/components/ui/input-otp.tsx
+++ b/apps/next/src/components/ui/input-otp.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot='input-otp'
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='input-otp-group'
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot='input-otp-slot'
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink bg-foreground h-4 w-px duration-1000' />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot='input-otp-separator' role='separator' {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/bun.lock
+++ b/bun.lock
--- a/packages/backend/convex/_generated/api.d.ts
+++ b/packages/backend/convex/_generated/api.d.ts
@@ -12,18 +12,16 @@ import type {
  ApiFromModules,
  FilterApi,
  FunctionReference,
-} from 'convex/server';
-import type * as auth from '../auth.js';
-import type * as crons from '../crons.js';
-import type * as custom_auth_index from '../custom/auth/index.js';
-import type * as custom_auth_password_reset from '../custom/auth/password/reset.js';
-import type * as custom_auth_password_validate from '../custom/auth/password/validate.js';
-import type * as custom_auth_providers_entra from '../custom/auth/providers/entra.js';
-import type * as custom_auth_providers_password from '../custom/auth/providers/password.js';
-import type * as custom_auth_providers_usesend from '../custom/auth/providers/usesend.js';
-import type * as files from '../files.js';
-import type * as http from '../http.js';
-import type * as statuses from '../statuses.js';
+} from "convex/server";
+import type * as auth from "../auth.js";
+import type * as crons from "../crons.js";
+import type * as custom_auth_index from "../custom/auth/index.js";
+import type * as custom_auth_providers_entra from "../custom/auth/providers/entra.js";
+import type * as custom_auth_providers_password from "../custom/auth/providers/password.js";
+import type * as custom_auth_providers_usesend from "../custom/auth/providers/usesend.js";
+import type * as files from "../files.js";
+import type * as http from "../http.js";
+import type * as statuses from "../statuses.js";

 /**
 * A utility for referencing Convex functions in your app's API.
@@ -36,21 +34,19 @@ import type * as statuses from '../statuses.js';
 declare const fullApi: ApiFromModules<{
  auth: typeof auth;
  crons: typeof crons;
-  'custom/auth/index': typeof custom_auth_index;
-  'custom/auth/password/reset': typeof custom_auth_password_reset;
-  'custom/auth/password/validate': typeof custom_auth_password_validate;
-  'custom/auth/providers/entra': typeof custom_auth_providers_entra;
-  'custom/auth/providers/password': typeof custom_auth_providers_password;
-  'custom/auth/providers/usesend': typeof custom_auth_providers_usesend;
+  "custom/auth/index": typeof custom_auth_index;
+  "custom/auth/providers/entra": typeof custom_auth_providers_entra;
+  "custom/auth/providers/password": typeof custom_auth_providers_password;
+  "custom/auth/providers/usesend": typeof custom_auth_providers_usesend;
  files: typeof files;
  http: typeof http;
  statuses: typeof statuses;
 }>;
 export declare const api: FilterApi<
  typeof fullApi,
-  FunctionReference<any, 'public'>
+  FunctionReference<any, "public">
 >;
 export declare const internal: FilterApi<
  typeof fullApi,
-  FunctionReference<any, 'internal'>
+  FunctionReference<any, "internal">
 >;
--- a/packages/backend/convex/_generated/api.js
+++ b/packages/backend/convex/_generated/api.js
@@ -8,7 +8,7 @@
 * @module
 */

-import { anyApi } from 'convex/server';
+import { anyApi } from "convex/server";

 /**
 * A utility for referencing Convex functions in your app's API.
--- a/packages/backend/convex/_generated/dataModel.d.ts
+++ b/packages/backend/convex/_generated/dataModel.d.ts
@@ -13,9 +13,9 @@ import type {
  DocumentByName,
  TableNamesInDataModel,
  SystemTableNames,
-} from 'convex/server';
-import type { GenericId } from 'convex/values';
-import schema from '../schema.js';
+} from "convex/server";
+import type { GenericId } from "convex/values";
+import schema from "../schema.js";

 /**
 * The names of all of your Convex tables.
--- a/packages/backend/convex/_generated/server.d.ts
+++ b/packages/backend/convex/_generated/server.d.ts
@@ -18,8 +18,8 @@ import {
  GenericQueryCtx,
  GenericDatabaseReader,
  GenericDatabaseWriter,
-} from 'convex/server';
-import type { DataModel } from './dataModel.js';
+} from "convex/server";
+import type { DataModel } from "./dataModel.js";

 /**
 * Define a query in this Convex app's public API.
@@ -29,7 +29,7 @@ import type { DataModel } from './dataModel.js';
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
-export declare const query: QueryBuilder<DataModel, 'public'>;
+export declare const query: QueryBuilder<DataModel, "public">;

 /**
 * Define a query that is only accessible from other Convex functions (but not from the client).
@@ -39,7 +39,7 @@ export declare const query: QueryBuilder<DataModel, 'public'>;
 * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 */
-export declare const internalQuery: QueryBuilder<DataModel, 'internal'>;
+export declare const internalQuery: QueryBuilder<DataModel, "internal">;

 /**
 * Define a mutation in this Convex app's public API.
@@ -49,7 +49,7 @@ export declare const internalQuery: QueryBuilder<DataModel, 'internal'>;
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
-export declare const mutation: MutationBuilder<DataModel, 'public'>;
+export declare const mutation: MutationBuilder<DataModel, "public">;

 /**
 * Define a mutation that is only accessible from other Convex functions (but not from the client).
@@ -59,7 +59,7 @@ export declare const mutation: MutationBuilder<DataModel, 'public'>;
 * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 */
-export declare const internalMutation: MutationBuilder<DataModel, 'internal'>;
+export declare const internalMutation: MutationBuilder<DataModel, "internal">;

 /**
 * Define an action in this Convex app's public API.
@@ -72,7 +72,7 @@ export declare const internalMutation: MutationBuilder<DataModel, 'internal'>;
 * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 */
-export declare const action: ActionBuilder<DataModel, 'public'>;
+export declare const action: ActionBuilder<DataModel, "public">;

 /**
 * Define an action that is only accessible from other Convex functions (but not from the client).
@@ -80,7 +80,7 @@ export declare const action: ActionBuilder<DataModel, 'public'>;
 * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 */
-export declare const internalAction: ActionBuilder<DataModel, 'internal'>;
+export declare const internalAction: ActionBuilder<DataModel, "internal">;

 /**
 * Define an HTTP action.
--- a/packages/backend/convex/_generated/server.js
+++ b/packages/backend/convex/_generated/server.js
@@ -16,7 +16,7 @@ import {
  internalActionGeneric,
  internalMutationGeneric,
  internalQueryGeneric,
-} from 'convex/server';
+} from "convex/server";

 /**
 * Define a query in this Convex app's public API.
--- a/packages/backend/convex/custom/auth/index.ts
+++ b/packages/backend/convex/custom/auth/index.ts
@@ -1,4 +1,3 @@
-export { validatePassword } from './password/validate';
 export { Entra } from './providers/entra';
-export { Password } from './providers/password';
-export { Usesend } from './providers/usesend';
+export { Password, validatePassword } from './providers/password';
+export { UseSendOTP, UseSendOTPPasswordReset } from './providers/usesend';
--- a/packages/backend/convex/custom/auth/password/reset.ts
+++ b/packages/backend/convex/custom/auth/password/reset.ts
@@ -1,30 +0,0 @@
-import { Usesend } from '..';
-import { UseSend } from 'usesend-js';
-import { generateRandomString, RandomReader } from '@oslojs/crypto/random';
-
-export const UsesendOTPPasswordReset = Usesend({
-  id: 'unsend-otp',
-  apiKey: process.env.AUTH_USESEND_API_KEY,
-  async generateVerificationToken() {
-    const random: RandomReader = {
-      read(bytes) {
-        crypto.getRandomValues(bytes);
-      },
-    };
-    const alphabet = '0123456789';
-    const length = 8;
-    return generateRandomString(random, alphabet, length);
-  },
-  async sendVerificationRequest({ identifier: email, provider, token }) {
-    const useSend = new UseSend(provider.apiKey, 'https://usesend.gbrown.org');
-    const { error } = await useSend.emails.send({
-      to: [email],
-      from:
-        provider.from ??
-        'TechTracker Admin <admin@mail.techtracker.gbrown.org>',
-      subject: `Reset your password - TechTracker`,
-      text: `Your password reset code is ${token}`,
-    });
-    if (error) throw new Error('Usesend error: ' + error.message);
-  },
-});
--- a/packages/backend/convex/custom/auth/password/validate.ts
+++ b/packages/backend/convex/custom/auth/password/validate.ts
@@ -1,12 +0,0 @@
-export const validatePassword = (password: string): boolean => {
-  if (
-    password.length < 8 ||
-    password.length > 100 ||
-    !/\d/.test(password) ||
-    !/[a-z]/.test(password) ||
-    !/[A-Z]/.test(password)
-  ) {
-    return false;
-  }
-  return true;
-};
--- a/packages/backend/convex/custom/auth/providers/password.ts
+++ b/packages/backend/convex/custom/auth/providers/password.ts
@@ -1,8 +1,7 @@
-import { ConvexError } from 'convex/values';
 import { Password as DefaultPassword } from '@convex-dev/auth/providers/Password';
-import { validatePassword } from '../password/validate';
-import type { DataModel } from '../../../_generated/dataModel';
-import { UsesendOTPPasswordReset } from '../password/reset';
+import { DataModel } from '../../../_generated/dataModel';
+import { UseSendOTP, UseSendOTPPasswordReset } from '..';
+import { ConvexError } from 'convex/values';

 export const Password = DefaultPassword<DataModel>({
  profile(params, ctx) {
@@ -16,5 +15,19 @@ export const Password = DefaultPassword<DataModel>({
      throw new ConvexError('Invalid password.');
    }
  },
-  reset: UsesendOTPPasswordReset,
+  reset: UseSendOTPPasswordReset,
+  verify: UseSendOTP,
 });
+
+export const validatePassword = (password: string): boolean => {
+  if (
+    password.length < 8 ||
+    password.length > 100 ||
+    !/\d/.test(password) ||
+    !/[a-z]/.test(password) ||
+    !/[A-Z]/.test(password)
+  ) {
+    return false;
+  }
+  return true;
+};
--- a/packages/backend/convex/custom/auth/providers/usesend.ts
+++ b/packages/backend/convex/custom/auth/providers/usesend.ts
@@ -1,94 +1,90 @@
 import type { EmailConfig, EmailUserConfig } from '@auth/core/providers/email';
+import { alphabet } from 'oslo/crypto';
+import { generateRandomString, RandomReader } from '@oslojs/crypto/random';
 import { UseSend } from 'usesend-js';

-/** @todo Document this */
-export const Usesend = (config: EmailUserConfig): EmailConfig => {
+export default function UseSendProvider(config: EmailUserConfig): EmailConfig {
  return {
    id: 'usesend',
    type: 'email',
-    name: 'Usesend',
-    from: 'TechTracker Admin <admin@mail.techtracker.gbrown.org>',
-    maxAge: 24 * 60 * 60,
+    name: 'UseSend',
+    from: 'TechTracker <admin@techtracker.gbrown.org>',
+    maxAge: 24 * 60 * 60, // 24 hours
+
+    async generateVerificationToken() {
+      const random: RandomReader = {
+        read(bytes) {
+          crypto.getRandomValues(bytes);
+        },
+      };
+      return generateRandomString(random, alphabet('0-9'), 6);
+    },
+
    async sendVerificationRequest(params) {
-      const { identifier: to, provider, url, theme } = params;
-      const { host } = new URL(url);
+      const { identifier: to, provider, url, theme, token } = params;
+      //const { host } = new URL(url);
+      const host = 'TechTracker';
+
      const useSend = new UseSend(
-        provider.apiKey,
+        process.env.AUTH_USESEND_API_KEY!,
        'https://usesend.gbrown.org',
      );
-      const { error } = await useSend.emails.send({
-        to,
-        from:
-          provider.from ??
-          'TechTracker Admin <admin@mail.techtracker.gbrown.org>',
-        subject: `Sign in to ${host}`,
-        html: html({ url, host, theme }),
-        text: text({ url, host }),
+
+      // For password reset, we want to send the code, not the magic link
+      const isPasswordReset =
+        url.includes('reset') || provider.id?.includes('reset');
+
+      const result = await useSend.emails.send({
+        from: provider.from!,
+        to: [to],
+        subject: isPasswordReset
+          ? `Reset your password - ${host}`
+          : `Sign in to ${host}`,
+        text: isPasswordReset
+          ? `Your password reset code is ${token}`
+          : `Your sign in code is ${token}`,
+        html: isPasswordReset
+          ? `
+          <div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">
+            <h2>Password Reset Request</h2>
+            <p>You requested a password reset. Your reset code is:</p>
+            <div style="font-size: 32px; font-weight: bold; text-align: center; padding: 20px; background: #f5f5f5; margin: 20px 0; border-radius: 8px;">
+              ${token}
+            </div>
+            <p>This code expires in 1 hour.</p>
+            <p>If you didn't request this, please ignore this email.</p>
+          </div>
+        `
+          : `
+          <div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">
+            <h2>Your Sign In Code</h2>
+            <p>Your verification code is:</p>
+            <div style="font-size: 32px; font-weight: bold; text-align: center; padding: 20px; background: #f5f5f5; margin: 20px 0; border-radius: 8px;">
+              ${token}
+            </div>
+            <p>This code expires in 24 hours.</p>
+          </div>
+        `,
      });
-      if (error) throw new Error('Usesend error: ' + error.message);
+
+      if (result.error) {
+        throw new Error('UseSend error: ' + JSON.stringify(result.error));
+      }
    },
+
    options: config,
  };
-};
+}

-type Theme = {
-  colorScheme?: 'auto' | 'dark' | 'light';
-  logo?: string;
-  brandColor?: string;
-  buttonText?: string;
-};
+// Create specific instances for password reset and email verification
+export const UseSendOTPPasswordReset = UseSendProvider({
+  id: 'usesend-otp-password-reset',
+  apiKey: process.env.AUTH_USESEND_API_KEY,
+  maxAge: 60 * 60, // 1 hour
+});

-const text = ({ url, host }: { url: string; host: string }) => {
-  return `Sign in to ${host}\n${url}\n\n`;
-};
-
-const html = (params: { url: string; host: string; theme: Theme }) => {
-  const { url, host, theme } = params;
-
-  const escapedHost = host.replace(/\./g, '&#8203;.');
-
-  const brandColor = theme.brandColor || '#346df1';
-
-  const buttonText = theme.buttonText || '#fff';
-
-  const color = {
-    background: '#f9f9f9',
-    text: '#444',
-    mainBackground: '#fff',
-    buttonBackground: brandColor,
-    buttonBorder: brandColor,
-    buttonText,
-  };
-
-  return `
-<body style="background: ${color.background};">
-  <table width="100%" border="0" cellspacing="20" cellpadding="0"
-    style="background: ${color.mainBackground}; max-width: 600px; margin: auto; border-radius: 10px;">
-    <tr>
-      <td align="center"
-        style="padding: 10px 0px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; color: ${color.text};">
-        Sign in to <strong>${escapedHost}</strong>
-      </td>
-    </tr>
-    <tr>
-      <td align="center" style="padding: 20px 0;">
-        <table border="0" cellspacing="0" cellpadding="0">
-          <tr>
-            <td align="center" style="border-radius: 5px;" bgcolor="${color.buttonBackground}"><a href="${url}"
-                target="_blank"
-                style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: ${color.buttonText}; text-decoration: none; border-radius: 5px; padding: 10px 20px; border: 1px solid ${color.buttonBorder}; display: inline-block; font-weight: bold;">Sign
-                in</a></td>
-          </tr>
-        </table>
-      </td>
-    </tr>
-    <tr>
-      <td align="center"
-        style="padding: 0px 0px 10px 0px; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: ${color.text};">
-        If you did not request this email you can safely ignore it.
-      </td>
-    </tr>
-  </table>
-</body>
-`;
-};
+export const UseSendOTP = UseSendProvider({
+  id: 'usesend-otp',
+  apiKey: process.env.AUTH_USESEND_API_KEY,
+  maxAge: 60 * 20, // 20 minutes
+});
--- a/packages/backend/env.example
+++ b/packages/backend/env.example
@@ -15,3 +15,5 @@ AUTH_MICROSOFT_ENTRA_ID_ID=
 AUTH_MICROSOFT_ENTRA_ID_SECRET=
 AUTH_MICROSOFT_ENTRA_ID_ISSUER=
 AUTH_MICROSOFT_ENTRA_ID_AUTH_URL=
+# UseSend
+AUTH_USESEND_API_KEY=
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -12,10 +12,15 @@
  "license": "ISC",
  "dependencies": {
    "@oslojs/crypto": "^1.0.1",
+    "@react-email/components": "0.5.4",
+    "@react-email/render": "^1.3.0",
    "convex": "^1.27.3",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
    "usesend-js": "^1.5.2"
  },
  "devDependencies": {
+    "react-email": "4.2.11",
    "typescript": "5.9.2"
  }
 }