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");
+  }
+}