Add email OTP auth & update dev configs

Author: richiemcilroy

apps/api/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint src/",
     "test": "bun test --ignore='src/e2e*.test.ts'",
     "test:e2e": "bun test src/e2e.test.ts src/e2e-http.test.ts",
-    "dev": "bun run src/index.ts"
+    "dev": "bun --env-file=../../.env --watch run src/index.ts"
   },
   "dependencies": {
     "@effect/platform": "^0.94.5",

apps/api/src/auth-client.ts

@@ -1,6 +1,6 @@
 import { createAuthClient } from 'better-auth/client'
-import { organizationClient, apiKeyClient } from 'better-auth/client/plugins'
+import { organizationClient, apiKeyClient, emailOTPClient } from 'better-auth/client/plugins'
 
 export const authClient = createAuthClient({
-  plugins: [organizationClient(), apiKeyClient()],
+  plugins: [organizationClient(), apiKeyClient(), emailOTPClient()],
 })

apps/api/src/auth.ts

@@ -1,28 +1,33 @@
 import { betterAuth } from 'better-auth'
-import { organization, apiKey } from 'better-auth/plugins'
+import { organization, apiKey, emailOTP } from 'better-auth/plugins'
 import { createPool } from 'mysql2/promise'
+import { Resend } from 'resend'
+
+const resend = new Resend(process.env.RESEND_API_KEY!)
 
 export const auth = betterAuth({
+  baseURL: process.env.BETTER_AUTH_BASE_URL ?? 'http://localhost:3000',
   database: createPool({
     uri: process.env.DATABASE_URL!,
     waitForConnections: true,
     connectionLimit: 10,
   }),
-  emailAndPassword: { enabled: true },
-  socialProviders: {
-    github: {
-      clientId: process.env.GITHUB_CLIENT_ID!,
-      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
-    },
-    google: {
-      clientId: process.env.GOOGLE_CLIENT_ID!,
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
-    },
-  },
   plugins: [
     organization(),
     apiKey({
       enableMetadata: true,
     }),
+    emailOTP({
+      otpLength: 6,
+      expiresIn: 300,
+      async sendVerificationOTP({ email, otp, type }) {
+        await resend.emails.send({
+          from: process.env.RESEND_FROM_EMAIL ?? 'Sandchest Auth <noreply@send.sandchest.com>',
+          to: email,
+          subject: type === 'sign-in' ? `Your Sandchest login code: ${otp}` : `Your Sandchest verification code: ${otp}`,
+          text: `Your code is ${otp}. It expires in 5 minutes.`,
+        })
+      },
+    }),
   ],
 })

apps/api/src/server.ts

@@ -1,4 +1,4 @@
-import { HttpApp, HttpRouter, HttpServer } from '@effect/platform'
+import { HttpRouter, HttpServer, HttpServerRequest, HttpServerResponse } from '@effect/platform'
 import { Effect } from 'effect'
 import { auth } from './auth.js'
 import { formatApiError } from './errors.js'
@@ -15,7 +15,12 @@ import { ArtifactRouter } from './routes/artifacts.js'
 import { NodeRouter } from './routes/nodes.js'
 import { DocsRouter } from './routes/docs.js'
 
-const betterAuthApp = HttpApp.fromWebHandler((request: Request) => auth.handler(request))
+const handleBetterAuth = Effect.gen(function* () {
+  const req = yield* HttpServerRequest.HttpServerRequest
+  const webReq = yield* HttpServerRequest.toWeb(req)
+  const webRes = yield* Effect.tryPromise(() => auth.handler(webReq))
+  return yield* Effect.succeed(HttpServerResponse.fromWeb(webRes))
+})
 
 export const ApiRouter = HttpRouter.empty.pipe(
   HttpRouter.concat(HealthRouter),
@@ -26,7 +31,8 @@ export const ApiRouter = HttpRouter.empty.pipe(
   HttpRouter.concat(ArtifactRouter),
   HttpRouter.concat(NodeRouter),
   HttpRouter.concat(DocsRouter),
-  HttpRouter.mountApp('/api/auth', betterAuthApp, { includePrefix: true }),
+  HttpRouter.all('/api/auth/*', handleBetterAuth),
+  HttpRouter.all('/api/auth', handleBetterAuth),
   HttpRouter.catchAll((error) => Effect.succeed(formatApiError(error))),
 )
 

apps/web/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/src/app/verify/page.tsx

@@ -3,6 +3,8 @@ import { Suspense } from 'react'
 import AuthLayout from '@/components/AuthLayout'
 import VerifyOtpForm from '@/components/auth/VerifyOtpForm'
 
+export const dynamic = 'force-dynamic'
+
 export const metadata: Metadata = {
   title: 'Verify — Sandchest',
 }

apps/web/src/lib/format.ts

@@ -4,4 +4,4 @@ export {
   formatDuration,
   formatCmd,
   formatBytes,
-} from '@sandchest/contract'
+} from '@sandchest/contract/format'

apps/web/src/lib/validation.ts

@@ -1 +1 @@
-export { isValidEmail, isValidOtp } from '@sandchest/contract'
+export { isValidEmail, isValidOtp } from '@sandchest/contract/validation'

bun.lock

@@ -11,7 +11,7 @@
     "lint": "turbo lint",
     "test": "turbo test",
     "test:e2e": "turbo test:e2e",
-    "dev": "bun run --filter @sandchest/api dev",
+    "dev": "turbo run dev",
     "db:generate": "bun run --filter @sandchest/db db:generate",
     "db:push": "bun run --filter @sandchest/db db:push",
     "db:migrate": "bun run --filter @sandchest/db db:migrate",