chore: implement next-auth for authentication

- Add `next-auth` to drizzle schema in `packages/database`
- Remove `declaration` and `declarationMap` due to `next-auth` type errors (see nextauthjs/next-auth#10568)
- Add `auth.ts` to `apps/client/src/lib` for `next-auth` initialization and config
- Add `api/auth/[...nextauth]/route.ts` to `apps/client/src/app` for `next-auth` API routes
- Add `auth` route group and pages to `apps/client/src/app` for `next-auth` pages (signin, signup, verify-request)
  - Add `OAuthButton` and `OAuthIcon` components to `apps/client/src/app/(auth)/_components` for `next-auth` OAuth providers

Author: jeremy-code

.env.example

@@ -10,5 +10,13 @@ DB_PORT=5432
 DB_NAME=db_name
 DB_URL=postgres://$DB_USER:$DB_PASSWORD@$DB_HOST:$DB_PORT/$DB_NAME # Using `@next/env` to reference other variables
 
+## Auth
+AUTH_SECRET=N0T+4+REAL+S3CR3T+0123456789ABCDEFGHIJKLMNOP # Generated by `openssl rand -base64 64`
+AUTH_GITHUB_ID=Ov23liN0tR34lID
+AUTH_GITHUB_SECRET=secret
+AUTH_DISCORD_ID=123456789012345678
+AUTH_DISCORD_SECRET=secret
+AUTH_SENDGRID_KEY=SG.N0T4R34LAP1V4L1Dk3Y.0NLY4N3X4MPL3K3Y
+
 # Client
 NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY=1x00000000000000000000AA

.nvmrc

@@ -1 +1 @@
-v22.2.0
+v22.3.0

apps/client/next.config.mjs

@@ -9,7 +9,7 @@ const componentDirectories = (
   await readdir("src/components", { withFileTypes: true })
 ).reduce(
   (acc, d) => (d.isDirectory() ? [...acc, `@/components/${d.name}`] : acc),
-  [],
+  /** @type {string[]} */ ([]),
 );
 
 /** @type {import('next').NextConfig} */

apps/client/package.json

@@ -10,24 +10,28 @@
     "lint": "eslint --cache --cache-location .next/cache/eslint/ ."
   },
   "dependencies": {
+    "@auth/drizzle-adapter": "^1.4.1",
     "@defraud/database": "workspace:*",
     "@defraud/ui": "workspace:*",
     "@next/bundle-analyzer": "rc",
-    "@radix-ui/react-accessible-icon": "^1.0.3",
-    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-accessible-icon": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@vercel/analytics": "^1.3.1",
-    "@vercel/speed-insights": "^1.0.11",
+    "@vercel/speed-insights": "^1.0.12",
+    "class-variance-authority": "^0.7.0",
     "dayjs": "^1.11.11",
     "immer": "^10.1.1",
     "keyv": "^4.5.4",
     "ky": "^1.3.0",
-    "lucide-react": "^0.390.0",
+    "lucide-react": "^0.396.0",
     "next": "rc",
+    "next-auth": "beta",
     "next-themes": "^0.3.0",
+    "nodemailer": "^6.9.14",
     "react": "rc",
     "react-dom": "rc",
-    "react-hook-form": "^7.51.5",
+    "react-hook-form": "^7.52.0",
     "swr": "beta",
     "zod": "^3.23.8",
     "zustand": "^4.5.2"
@@ -37,13 +41,13 @@
     "@defraud/tsconfig": "workspace:*",
     "@keyv/redis": "^2.8.5",
     "@types/cloudflare-turnstile": "^0.1.5",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.7",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "tailwindcss": "^3.4.4",
-    "typescript": "rc"
+    "typescript": "^5.5.2"
   }
 }

apps/client/src/app/(auth)/_components/OAuthButton.tsx

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { Button, type ButtonProps } from "@defraud/ui/components";
+import { type ProviderDetail } from "@/lib/auth";
+import { OAuthIcon } from "./OAuthIcon";
+
+const oAuthButtonVariants = cva<{
+  id: Record<ProviderDetail["id"], string>;
+}>(undefined, {
+  variants: {
+    id: {
+      github:
+        "bg-gray-950 text-background hover:bg-gray-800 dark:bg-gray-50 dark:hover:bg-gray-200",
+      discord: "bg-[#5865F2] text-white hover:bg-[#8891F2]",
+    },
+  },
+});
+
+type OAuthButtonProps = ButtonProps & VariantProps<typeof oAuthButtonVariants>;
+
+export const OAuthButton = ({
+  id,
+  className,
+  children,
+  ...rest
+}: OAuthButtonProps) => {
+  return (
+    <Button className={oAuthButtonVariants({ id, className })} {...rest}>
+      <OAuthIcon id={id} />
+      {children}
+    </Button>
+  );
+};

apps/client/src/app/(auth)/_components/OAuthIcon.tsx

@@ -0,0 +1,52 @@
+import type { SVGProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import type { ProviderDetail } from "@/lib/auth";
+
+const oAuthIconVariants = cva<{
+  id: Record<ProviderDetail["id"], string>;
+}>("mr-2 size-5", {
+  variants: {
+    id: {
+      github: "fill-gray-50 dark:fill-gray-950",
+      discord: "fill-white",
+    },
+  },
+});
+
+type OAuthIconProps = VariantProps<typeof oAuthIconVariants> &
+  SVGProps<SVGSVGElement>;
+
+export const OAuthIcon = ({ id, className, ...props }: OAuthIconProps) => {
+  switch (id) {
+    case "github":
+      return (
+        // Taken from https://github.com/logos
+        <svg
+          viewBox="0 0 98 96"
+          className={oAuthIconVariants({ id, className })}
+          {...props}
+        >
+          <path
+            fillRule="evenodd"
+            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    case "discord":
+      return (
+        // Taken from https://discord.com/branding
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={oAuthIconVariants({ id, className })}
+          viewBox="0 0 127.14 96.36"
+        >
+          <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
+        </svg>
+      );
+
+    default:
+      throw new Error(`Unknown provider type: ${id}`);
+  }
+};

apps/client/src/app/(auth)/layout.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+import { Navbar } from "@/components/layout";
+
+const AuthLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+};
+
+export default AuthLayout;

apps/client/src/app/(auth)/signin/page.tsx

@@ -0,0 +1,96 @@
+import Link from "next/link";
+
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from "@defraud/ui/components";
+import { Logo } from "@/components/misc/Logo";
+import { providerDetails, signIn, type ProviderDetail } from "@/lib/auth";
+import { OAuthButton } from "../_components/OAuthButton";
+
+const SignInForm = ({ id, name, type }: ProviderDetail) => {
+  switch (type) {
+    case "email":
+      return (
+        <>
+          <form
+            className="flex flex-col gap-2"
+            action={async (formData) => {
+              "use server";
+              await signIn(id, formData);
+            }}
+          >
+            <Label htmlFor="email">Email</Label>
+            <Input
+              type="email"
+              name="email"
+              placeholder="postel@example.com"
+              required
+            />
+
+            <Button type="submit" className="my-1">
+              Sign in with Email
+            </Button>
+          </form>
+
+          <div
+            role="separator"
+            className="flex items-center text-muted-foreground before:grow before:border-b before:content-[''] after:grow after:border-b after:content-['']"
+          >
+            <span className="mx-4">OR</span>
+          </div>
+        </>
+      );
+    case "oauth":
+      return (
+        <form
+          className="flex flex-col"
+          action={async (formData) => {
+            "use server";
+            await signIn(id, formData);
+          }}
+        >
+          <OAuthButton type="submit" id={id}>
+            Sign in with {name}
+          </OAuthButton>
+        </form>
+      );
+    default:
+      throw new Error(`Unknown provider type: ${type}`);
+  }
+};
+
+const SignIn = () => {
+  return (
+    <main className="grid place-content-center gap-8">
+      <Logo className="mx-auto size-14" />
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-2xl">Sign in</CardTitle>
+          <CardDescription>
+            Enter your email below to sign in to your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {providerDetails.map((provider) => (
+            <SignInForm key={provider.id} {...provider} />
+          ))}
+        </CardContent>
+      </Card>
+      <div className="text-center text-sm">
+        {"Don't have an account? "}
+        <Link href="/signup" className="text-primary underline">
+          Sign up
+        </Link>
+      </div>
+    </main>
+  );
+};
+
+export default SignIn;

apps/client/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,96 @@
+import Link from "next/link";
+
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from "@defraud/ui/components";
+import { Logo } from "@/components/misc/Logo";
+import { providerDetails, signIn, type ProviderDetail } from "@/lib/auth";
+import { OAuthButton } from "../_components/OAuthButton";
+
+const SignUpForm = ({ id, name, type }: ProviderDetail) => {
+  switch (type) {
+    case "email":
+      return (
+        <>
+          <form
+            className="flex flex-col gap-2"
+            action={async (formData) => {
+              "use server";
+              await signIn(id, formData);
+            }}
+          >
+            <Label htmlFor="email">Email</Label>
+            <Input
+              type="email"
+              name="email"
+              placeholder="postel@example.com"
+              required
+            />
+
+            <Button type="submit" className="my-1">
+              Sign up with Email
+            </Button>
+          </form>
+
+          <div
+            role="separator"
+            className="flex items-center text-muted-foreground before:grow before:border-b before:content-[''] after:grow after:border-b after:content-['']"
+          >
+            <span className="mx-4">OR</span>
+          </div>
+        </>
+      );
+    case "oauth":
+      return (
+        <form
+          className="flex flex-col"
+          action={async (formData) => {
+            "use server";
+            await signIn(id, formData);
+          }}
+        >
+          <OAuthButton type="submit" id={id}>
+            Sign up with {name}
+          </OAuthButton>
+        </form>
+      );
+    default:
+      throw new Error(`Unknown provider type: ${type}`);
+  }
+};
+
+const SignUp = () => {
+  return (
+    <main className="grid place-content-center gap-8">
+      <Logo className="mx-auto size-14" />
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-2xl">Sign up</CardTitle>
+          <CardDescription>
+            Enter your email below to create your new account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          {providerDetails.map((provider) => (
+            <SignUpForm key={provider.id} {...provider} />
+          ))}
+        </CardContent>
+      </Card>
+      <div className="text-center text-sm">
+        {"Already have an account? "}
+        <Link href="/signin" className="text-primary underline">
+          Sign in
+        </Link>
+      </div>
+    </main>
+  );
+};
+
+export default SignUp;