Add login flow

2024-04-28 18:55:04 +10:00
parent f608669f04
commit 3a462fb50b
13 changed files with 618 additions and 8 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -22,6 +22,7 @@
    "@hono/node-server": "^1.9.1",
    "@hono/swagger-ui": "^0.2.1",
    "@hono/zod-openapi": "^0.10.0",
+    "@hookform/resolvers": "^3.3.4",
    "@prisma/client": "^5.11.0",
    "@t3-oss/env-nextjs": "^0.9.2",
    "@tanstack/react-query": "^5.25.0",
@@ -42,6 +43,7 @@
    "query-string": "^9.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "react-hook-form": "^7.51.3",
    "recharts": "^2.12.5",
    "server-only": "^0.0.1",
    "superjson": "^2.2.1",
--- a/apps/web/src/app/(dashboard)/layout.tsx
+++ b/apps/web/src/app/(dashboard)/layout.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
-  BellRing,
  BookUser,
  CircleUser,
  Code,
@@ -11,7 +10,6 @@ import {
  LineChart,
  Mail,
  Menu,
-  MessageSquareMore,
  Package,
  Package2,
  ShoppingCart,
@@ -32,7 +30,6 @@ import { Sheet, SheetContent, SheetTrigger } from "@unsend/ui/src/sheet";

 import { NextAuthProvider } from "~/providers/next-auth";
 import { getServerAuthSession } from "~/server/auth";
-import Image from "next/image";
 import { NavButton } from "./nav-button";

 export const metadata = {
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -5,15 +5,16 @@ import { ThemeProvider } from "@unsend/ui/theme-provider";
 import { Toaster } from "@unsend/ui/src/toaster";

 import { TRPCReactProvider } from "~/trpc/react";
+import { Metadata } from "next";

 const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
 });

-export const metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
+export const metadata: Metadata = {
+  title: "Unsend",
+  description: "Open source sending infrastructure for developers",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
 };

--- a/apps/web/src/app/login/login-page.tsx
+++ b/apps/web/src/app/login/login-page.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { Button } from "@unsend/ui/src/button";
+import Image from "next/image";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useState } from "react";
+import { signIn } from "next-auth/react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@unsend/ui/src/form";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+} from "@unsend/ui/src/input-otp";
+import { Input } from "@unsend/ui/src/input";
+
+const emailSchema = z.object({
+  email: z
+    .string({ required_error: "Email is required" })
+    .email({ message: "Invalid email" }),
+});
+
+const otpSchema = z.object({
+  otp: z
+    .string({ required_error: "OTP is required" })
+    .length(5, { message: "Invalid OTP" }),
+});
+
+export default function LoginPage() {
+  const [emailStatus, setEmailStatus] = useState<
+    "idle" | "sending" | "success"
+  >("idle");
+
+  const emailForm = useForm<z.infer<typeof emailSchema>>({
+    resolver: zodResolver(emailSchema),
+  });
+
+  const otpForm = useForm<z.infer<typeof otpSchema>>({
+    resolver: zodResolver(otpSchema),
+  });
+
+  async function onEmailSubmit(values: z.infer<typeof emailSchema>) {
+    setEmailStatus("sending");
+    await signIn("email", {
+      email: values.email.toLowerCase(),
+      redirect: false,
+    });
+    setEmailStatus("success");
+  }
+
+  async function onOTPSubmit(values: z.infer<typeof otpSchema>) {
+    const { href: callbackUrl } = window.location;
+    const email = emailForm.getValues().email;
+    console.log("email", email);
+
+    window.location.href = `/api/auth/callback/email?email=${encodeURIComponent(
+      email.toLowerCase()
+    )}&token=${values.otp.toLowerCase()}${callbackUrl ? `&callbackUrl=${callbackUrl}/balances` : ""}`;
+  }
+
+  return (
+    <main className="h-screen flex justify-center items-center">
+      <div className="flex flex-col gap-8">
+        <Image
+          src="/logo-bold.png"
+          alt="Unsend"
+          width={60}
+          height={60}
+          className="mx-auto border rounded-lg p-2 bg-black"
+        />
+        <p className="text-2xl text-center">Log in to unsend</p>
+        <div className="flex flex-col gap-8 mt-8">
+          <Button
+            className="w-[350px]"
+            size="lg"
+            onClick={() => signIn("github")}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 496 512"
+              className="h-6 w-6 stroke-black fill-black mr-4"
+            >
+              <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+            </svg>
+            Continue with Github
+          </Button>
+          <Button
+            className="w-[350px]"
+            size="lg"
+            onClick={() => signIn("google")}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 488 512"
+              className="h-6 w-6 stroke-black fill-black mr-4"
+            >
+              <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
+            </svg>
+            Continue with Google
+          </Button>
+          <div className=" flex w-[350px]  items-center justify-between gap-2">
+            <p className=" z-10 ml-[175px] -translate-x-1/2 bg-background px-4 text-sm">
+              or
+            </p>
+            <div className="absolute h-[1px] w-[350px]  bg-gradient-to-r from-zinc-800 via-zinc-300 to-zinc-800"></div>
+          </div>
+          {emailStatus === "success" ? (
+            <>
+              <p className=" w-[350px] text-center text-sm">
+                We have sent an email with the OTP. Please check your inbox
+              </p>
+              <Form {...otpForm}>
+                <form
+                  onSubmit={otpForm.handleSubmit(onOTPSubmit)}
+                  className="space-y-4"
+                >
+                  <FormField
+                    control={otpForm.control}
+                    name="otp"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <InputOTP
+                            className="w-[350px]"
+                            maxLength={5}
+                            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+                            inputMode="text"
+                            {...field}
+                          >
+                            <InputOTPGroup>
+                              <InputOTPSlot className="w-[70px]" index={0} />
+                              <InputOTPSlot className="w-[70px]" index={1} />
+                              <InputOTPSlot className="w-[70px]" index={2} />
+                              <InputOTPSlot className="w-[70px]" index={3} />
+                              <InputOTPSlot className="w-[70px]" index={4} />
+                            </InputOTPGroup>
+                          </InputOTP>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <Button className="mt-6 w-[350px] bg-white hover:bg-gray-100 focus:bg-gray-100">
+                    Submit
+                  </Button>
+                </form>
+              </Form>
+            </>
+          ) : (
+            <>
+              <Form {...emailForm}>
+                <form
+                  onSubmit={emailForm.handleSubmit(onEmailSubmit)}
+                  className="space-y-4"
+                >
+                  <FormField
+                    control={emailForm.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input
+                            placeholder="Enter your email"
+                            className=" w-[350px]"
+                            type="email"
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormDescription />
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button
+                    className=" w-[350px] bg-white hover:bg-gray-100 focus:bg-gray-100"
+                    type="submit"
+                    disabled={emailStatus === "sending"}
+                  >
+                    {emailStatus === "sending"
+                      ? "Sending..."
+                      : "Send magic link"}
+                  </Button>
+                </form>
+              </Form>
+            </>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -0,0 +1,13 @@
+import { redirect } from "next/navigation";
+import { getServerAuthSession } from "~/server/auth";
+import LoginPage from "./login-page";
+
+export default async function Login() {
+  const session = await getServerAuthSession();
+
+  if (session) {
+    redirect("/dashboard");
+  }
+
+  return <LoginPage />;
+}
--- a/apps/web/src/env.js
+++ b/apps/web/src/env.js
@@ -34,6 +34,10 @@ export const env = createEnv({
    AWS_SECRET_KEY: z.string(),
    APP_URL: z.string().optional(),
    SNS_TOPIC: z.string(),
+    UNSEND_API_KEY: z.string(),
+    UNSEND_URL: z.string(),
+    GOOGLE_CLIENT_ID: z.string(),
+    GOOGLE_CLIENT_SECRET: z.string(),
  },

  /**
@@ -60,6 +64,10 @@ export const env = createEnv({
    AWS_SECRET_KEY: process.env.AWS_SECRET_KEY,
    APP_URL: process.env.APP_URL,
    SNS_TOPIC: process.env.SNS_TOPIC,
+    UNSEND_API_KEY: process.env.UNSEND_API_KEY,
+    UNSEND_URL: process.env.UNSEND_URL,
+    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
+    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
--- a/apps/web/src/server/auth.ts
+++ b/apps/web/src/server/auth.ts
@@ -6,6 +6,8 @@ import {
 } from "next-auth";
 import { type Adapter } from "next-auth/adapters";
 import GitHubProvider from "next-auth/providers/github";
+import EmailProvider from "next-auth/providers/email";
+import GoogleProvider from "next-auth/providers/google";

 import { env } from "~/env";
 import { db } from "~/server/db";
@@ -48,6 +50,9 @@ export const authOptions: NextAuthOptions = {
    }),
  },
  adapter: PrismaAdapter(db) as Adapter,
+  pages: {
+    signIn: "/login",
+  },
  providers: [
    /**
     * ...add more providers here.
@@ -61,6 +66,21 @@ export const authOptions: NextAuthOptions = {
    GitHubProvider({
      clientId: env.GITHUB_ID,
      clientSecret: env.GITHUB_SECRET,
+      allowDangerousEmailAccountLinking: true,
+    }),
+    GoogleProvider({
+      clientId: env.GOOGLE_CLIENT_ID,
+      clientSecret: env.GOOGLE_CLIENT_SECRET,
+      allowDangerousEmailAccountLinking: true,
+    }),
+    EmailProvider({
+      from: "no-reply@splitpro.app",
+      async sendVerificationRequest({ identifier: email, url, token }) {
+        await sendSignUpEmail(email, token, url);
+      },
+      async generateVerificationToken() {
+        return Math.random().toString(36).substring(2, 7).toLowerCase();
+      },
    }),
  ],
 };
@@ -73,6 +93,7 @@ export const authOptions: NextAuthOptions = {
 export const getServerAuthSession = () => getServerSession(authOptions);

 import { createHash } from "crypto";
+import { sendSignUpEmail } from "./mailer";

 /**
 * Hashes a token using SHA-256.
--- a/apps/web/src/server/mailer.ts
+++ b/apps/web/src/server/mailer.ts
@@ -0,0 +1,57 @@
+import { env } from "~/env";
+
+export async function sendSignUpEmail(
+  email: string,
+  token: string,
+  url: string
+) {
+  const { host } = new URL(url);
+
+  if (env.NODE_ENV === "development") {
+    console.log("Sending sign in email", email, url, token);
+    return;
+  }
+
+  const subject = "Sign in to Unsend";
+  const text = `Hey,\n\nYou can sign in to Unsend by clicking the below URL:\n${url}\n\nYou can also use this OTP: ${token}\n\nThanks,\nUnsend Team`;
+  const html = `<p>Hey,</p> <p>You can sign in to Unsend by clicking the below URL:</p><p><a href="${url}">Sign in to ${host}</a></p><p>You can also use this OTP: <b>${token}</b></p<br /><br /><p>Thanks,</p><p>Unsend Team</p>`;
+
+  await sendMail(email, subject, text, html);
+}
+
+async function sendMail(
+  email: string,
+  subject: string,
+  text: string,
+  html: string
+) {
+  if (env.UNSEND_API_KEY && env.UNSEND_URL) {
+    const resp = await fetch(`${env.UNSEND_URL}/emails`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${env.UNSEND_API_KEY}`,
+      },
+      body: JSON.stringify({
+        from: "no-reply@auth.unsend.dev",
+        to: email,
+        subject,
+        text,
+        html,
+      }),
+    });
+
+    if (resp.status === 200) {
+      console.log("Email sent using unsend");
+      return;
+    } else {
+      console.log(
+        "Error sending email using unsend, so fallback to resend",
+        resp.status,
+        resp.statusText
+      );
+    }
+  } else {
+    throw new Error("UNSEND_API_KEY or UNSEND_URL not found");
+  }
+}
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,6 +29,7 @@
    "typescript": "^5.3.3"
  },
  "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
@@ -40,12 +41,15 @@
    "add": "^2.0.6",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
+    "input-otp": "^1.2.4",
    "lucide-react": "^0.359.0",
    "next-themes": "^0.3.0",
    "pnpm": "^8.15.5",
+    "react-hook-form": "^7.51.3",
    "react-syntax-highlighter": "^15.5.0",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.2.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
  }
 }
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -0,0 +1,177 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
--- a/packages/ui/src/input-otp.tsx
+++ b/packages/ui/src/input-otp.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+
+import { cn } from "../lib/utils";
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  REGEXP_ONLY_DIGITS_AND_CHARS,
+};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,6 +106,9 @@ importers:
      '@hono/zod-openapi':
        specifier: ^0.10.0
        version: 0.10.0(hono@4.2.2)(zod@3.22.4)
+      '@hookform/resolvers':
+        specifier: ^3.3.4
+        version: 3.3.4(react-hook-form@7.51.3)
      '@prisma/client':
        specifier: ^5.11.0
        version: 5.11.0(prisma@5.11.0)
@@ -166,6 +169,9 @@ importers:
      react-dom:
        specifier: 18.2.0
        version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.51.3
+        version: 7.51.3(react@18.2.0)
      recharts:
        specifier: ^2.12.5
        version: 2.12.5(react-dom@18.2.0)(react@18.2.0)
@@ -287,6 +293,9 @@ importers:

  packages/ui:
    dependencies:
+      '@hookform/resolvers':
+        specifier: ^3.3.4
+        version: 3.3.4(react-hook-form@7.51.3)
      '@radix-ui/react-dialog':
        specifier: ^1.0.5
        version: 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
@@ -320,6 +329,9 @@ importers:
      clsx:
        specifier: ^2.1.0
        version: 2.1.0
+      input-otp:
+        specifier: ^1.2.4
+        version: 1.2.4(react-dom@18.2.0)(react@18.2.0)
      lucide-react:
        specifier: ^0.359.0
        version: 0.359.0(react@18.2.0)
@@ -329,6 +341,9 @@ importers:
      pnpm:
        specifier: ^8.15.5
        version: 8.15.5
+      react-hook-form:
+        specifier: ^7.51.3
+        version: 7.51.3(react@18.2.0)
      react-syntax-highlighter:
        specifier: ^15.5.0
        version: 15.5.0(react@18.2.0)
@@ -341,6 +356,9 @@ importers:
      tailwindcss-animate:
        specifier: ^1.0.7
        version: 1.0.7(tailwindcss@3.4.1)
+      zod:
+        specifier: ^3.22.4
+        version: 3.22.4
    devDependencies:
      '@types/eslint':
        specifier: ^8.56.5
@@ -1554,6 +1572,14 @@ packages:
      zod: 3.22.4
    dev: false

+  /@hookform/resolvers@3.3.4(react-hook-form@7.51.3):
+    resolution: {integrity: sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+    dependencies:
+      react-hook-form: 7.51.3(react@18.2.0)
+    dev: false
+
  /@humanwhocodes/config-array@0.11.14:
    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
    engines: {node: '>=10.10.0'}
@@ -5384,6 +5410,16 @@ packages:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
    dev: true

+  /input-otp@1.2.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-md6rhmD+zmMnUh5crQNSQxq3keBRYvE3odbr4Qb9g2NWzQv9azi+t1a3X4TBTbh98fsGHgEEJlzbe1q860uGCA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /install@0.13.0:
    resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==}
    engines: {node: '>= 0.10'}
@@ -6517,6 +6553,15 @@ packages:
      scheduler: 0.23.0
    dev: false

+  /react-hook-form@7.51.3(react@18.2.0):
+    resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
  /react-is@16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

--- a/turbo.json
+++ b/turbo.json
@@ -30,7 +30,11 @@
        "VERCEL_URL",
        "VERCEL",
        "SKIP_ENV_VALIDATION",
-        "PORT"
+        "PORT",
+        "UNSEND_API_KEY",
+        "UNSEND_URL",
+        "GOOGLE_CLIENT_ID",
+        "GOOGLE_CLIENT_SECRET"
      ]
    },
    "lint": {