@alinsafawi/aegis-auth 0.2.3 → 0.2.5

package/dist/index.js

@@ -23616,23 +23616,27 @@ export default function LoginPage() {
     setError('')
     setLoading(true)
 
-    const csrf = document.cookie
-      .split('; ')
-      .find((r) => r.startsWith('${appName.toLowerCase().replace(/[^a-z]/g, "")}_csrf='))
-      ?.split('=')[1]
-
-    const res = await fetch('/api/auth/login', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'x-csrf-token': csrf ?? '' },
-      body: JSON.stringify({ identifier, password }),
-    })
+    try {
+      const csrf = document.cookie
+        .split('; ')
+        .find((r) => r.startsWith('${appName.toLowerCase().replace(/[^a-z]/g, "")}_csrf='))
+        ?.split('=')[1]
 
-    const data = await res.json()
-    setLoading(false)
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'x-csrf-token': csrf ?? '' },
+        body: JSON.stringify({ identifier, password }),
+      })
 
-    if (!res.ok) { setError(data.error ?? 'Login failed'); return }
-    if (data.requiresTwoFactor) { router.push('/two-factor'); return }
-    router.push(\`/\${data.role}/dashboard\`)
+      const data = await res.json()
+      if (!res.ok) { setError(data.error ?? 'Login failed'); return }
+      if (data.requiresTwoFactor) { router.push('/two-factor'); return }
+      router.push(\`/\${data.role}/dashboard\`)
+    } catch {
+      setError('Network error \u2014 please try again.')
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -23747,6 +23751,402 @@ function generatePackageJson(name, packageManager) {
     2
   );
 }
+function generatePrismaLib() {
+  return `import { PrismaClient } from '@prisma/client'
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient()
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+`;
+}
+function generateLoginRoute() {
+  return `import { createLoginHandler } from '@alinsafawi/aegis-auth-next'
+import { prisma } from '@/lib/prisma'
+import config from '../../../../../auth.config'
+
+export const POST = createLoginHandler(config, prisma)
+`;
+}
+function generateLogoutRoute() {
+  return `import { createLogoutHandler } from '@alinsafawi/aegis-auth-next'
+import config from '../../../../../auth.config'
+
+export const POST = createLogoutHandler(config)
+`;
+}
+function generateTwoFactorRoute() {
+  return `import { createTwoFactorHandler } from '@alinsafawi/aegis-auth-next'
+import { prisma } from '@/lib/prisma'
+import config from '../../../../../auth.config'
+
+export const POST = createTwoFactorHandler(config, prisma)
+`;
+}
+function generateChangePasswordRoute() {
+  return `import { createChangePasswordHandler } from '@alinsafawi/aegis-auth-next'
+import { prisma } from '@/lib/prisma'
+import config from '../../../../../auth.config'
+
+export const POST = createChangePasswordHandler(config, prisma)
+`;
+}
+function generateForgotPasswordPage(language) {
+  const ts = language === "typescript";
+  return `'use client'
+
+import { useState } from 'react'
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('')
+  const [sent, setSent] = useState(false)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e${ts ? ": React.FormEvent" : ""}) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    const res = await fetch('/api/auth/forgot-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email }),
+    })
+    setLoading(false)
+    if (!res.ok) { setError((await res.json()).error ?? 'Something went wrong'); return }
+    setSent(true)
+  }
+
+  if (sent) {
+    return (
+      <main className="min-h-screen flex items-center justify-center p-4">
+        <div className="w-full max-w-sm text-center space-y-3">
+          <h1 className="text-2xl font-bold">Check your email</h1>
+          <p className="text-[var(--muted)] text-sm">
+            If an account exists for <strong>{email}</strong>, a reset link has been sent.
+          </p>
+          <a href="/login" className="block text-sm text-[var(--muted)] hover:underline mt-4">
+            Back to login
+          </a>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold">Forgot password</h1>
+          <p className="text-[var(--muted)] text-sm mt-1">We'll send you a reset link.</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && <div className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-md p-3">{error}</div>}
+          <div>
+            <label className="block text-sm font-medium mb-1">Email address</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              className="w-full px-3 py-2 rounded-md border bg-[var(--input)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            style={{ background: 'var(--primary)', color: 'var(--primary-foreground)' }}
+            className="w-full py-2 px-4 rounded-md font-medium disabled:opacity-50 transition-opacity"
+          >
+            {loading ? 'Sending\u2026' : 'Send reset link'}
+          </button>
+          <div className="text-center">
+            <a href="/login" className="text-sm text-[var(--muted)] hover:underline">Back to login</a>
+          </div>
+        </form>
+      </div>
+    </main>
+  )
+}
+`;
+}
+function generateResetPasswordPage(language) {
+  const ts = language === "typescript";
+  return `'use client'
+
+import { useState } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+
+export default function ResetPasswordPage() {
+  const params = useSearchParams()
+  const router = useRouter()
+  const token = params.get('token') ?? ''
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e${ts ? ": React.FormEvent" : ""}) {
+    e.preventDefault()
+    if (password !== confirm) { setError('Passwords do not match'); return }
+    setLoading(true)
+    setError('')
+    const res = await fetch('/api/auth/reset-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token, newPassword: password }),
+    })
+    setLoading(false)
+    if (!res.ok) { setError((await res.json()).error ?? 'Something went wrong'); return }
+    router.push('/login?reset=1')
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold">Reset password</h1>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && <div className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-md p-3">{error}</div>}
+          <div>
+            <label className="block text-sm font-medium mb-1">New password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="new-password"
+              className="w-full px-3 py-2 rounded-md border bg-[var(--input)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Confirm new password</label>
+            <input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              required
+              autoComplete="new-password"
+              className="w-full px-3 py-2 rounded-md border bg-[var(--input)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            style={{ background: 'var(--primary)', color: 'var(--primary-foreground)' }}
+            className="w-full py-2 px-4 rounded-md font-medium disabled:opacity-50 transition-opacity"
+          >
+            {loading ? 'Resetting\u2026' : 'Reset password'}
+          </button>
+        </form>
+      </div>
+    </main>
+  )
+}
+`;
+}
+function generateTwoFactorPage(language) {
+  const ts = language === "typescript";
+  return `'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function TwoFactorPage() {
+  const [code, setCode] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  async function handleSubmit(e${ts ? ": React.FormEvent" : ""}) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    const res = await fetch('/api/auth/two-factor', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code }),
+    })
+    const data = await res.json()
+    setLoading(false)
+    if (!res.ok) { setError(data.error ?? 'Invalid code'); return }
+    router.push(\`/\${data.role}/dashboard\`)
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold">Two-factor authentication</h1>
+          <p className="text-[var(--muted)] text-sm mt-1">Enter the 6-digit code from your authenticator app.</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && <div className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-md p-3">{error}</div>}
+          <div>
+            <label className="block text-sm font-medium mb-1">Authentication code</label>
+            <input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              maxLength={6}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/D/g, ''))}
+              required
+              autoComplete="one-time-code"
+              placeholder="000000"
+              className="w-full px-3 py-2 rounded-md border bg-[var(--input)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] text-center tracking-widest text-lg"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading || code.length !== 6}
+            style={{ background: 'var(--primary)', color: 'var(--primary-foreground)' }}
+            className="w-full py-2 px-4 rounded-md font-medium disabled:opacity-50 transition-opacity"
+          >
+            {loading ? 'Verifying\u2026' : 'Verify'}
+          </button>
+          <div className="text-center">
+            <a href="/login" className="text-sm text-[var(--muted)] hover:underline">Back to login</a>
+          </div>
+        </form>
+      </div>
+    </main>
+  )
+}
+`;
+}
+function generateVerifyEmailNoticePage() {
+  return `export default function VerifyEmailNoticePage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm text-center space-y-3">
+        <h1 className="text-2xl font-bold">Verify your email</h1>
+        <p className="text-[var(--muted)] text-sm">
+          We sent a verification code to your email address. Enter it below to activate your account.
+        </p>
+        <a href="/verify-email" className="block mt-4 text-sm underline" style={{ color: 'var(--primary)' }}>
+          Enter verification code \u2192
+        </a>
+      </div>
+    </main>
+  )
+}
+`;
+}
+function generateVerifyEmailPage(language) {
+  const ts = language === "typescript";
+  return `'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export default function VerifyEmailPage() {
+  const [code, setCode] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  async function handleSubmit(e${ts ? ": React.FormEvent" : ""}) {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    const res = await fetch('/api/auth/verify-email', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code }),
+    })
+    const data = await res.json()
+    setLoading(false)
+    if (!res.ok) { setError(data.error ?? 'Invalid code'); return }
+    router.push(\`/\${data.role}/dashboard\`)
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold">Enter verification code</h1>
+          <p className="text-[var(--muted)] text-sm mt-1">Check your email for the 6-digit code.</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && <div className="text-sm text-red-500 bg-red-50 border border-red-200 rounded-md p-3">{error}</div>}
+          <div>
+            <label className="block text-sm font-medium mb-1">Verification code</label>
+            <input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              maxLength={6}
+              value={code}
+              onChange={(e) => setCode(e.target.value.replace(/D/g, ''))}
+              required
+              autoComplete="one-time-code"
+              placeholder="000000"
+              className="w-full px-3 py-2 rounded-md border bg-[var(--input)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] text-center tracking-widest text-lg"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading || code.length !== 6}
+            style={{ background: 'var(--primary)', color: 'var(--primary-foreground)' }}
+            className="w-full py-2 px-4 rounded-md font-medium disabled:opacity-50 transition-opacity"
+          >
+            {loading ? 'Verifying\u2026' : 'Verify email'}
+          </button>
+          <div className="text-center">
+            <a href="/login" className="text-sm text-[var(--muted)] hover:underline">Back to login</a>
+          </div>
+        </form>
+      </div>
+    </main>
+  )
+}
+`;
+}
+function generateForgotPasswordRoute(language) {
+  const ts = language === "typescript";
+  return `import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import config from '../../../../../auth.config'
+
+export async function POST(request${ts ? ": NextRequest" : ""}) {
+  // TODO: implement \u2014 find user by email, generate reset token, send email
+  // You can use: import { sendEmail } from '@alinsafawi/aegis-auth-core'
+  const { email } = await request.json()
+  return NextResponse.json({ success: true })
+}
+`;
+}
+function generateResetPasswordRoute(language) {
+  const ts = language === "typescript";
+  return `import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { hashPassword } from '@alinsafawi/aegis-auth-core'
+import config from '../../../../../auth.config'
+
+export async function POST(request${ts ? ": NextRequest" : ""}) {
+  // TODO: implement \u2014 verify token, update password hash
+  const { token, newPassword } = await request.json()
+  return NextResponse.json({ success: true })
+}
+`;
+}
+function generateVerifyEmailRoute(language) {
+  const ts = language === "typescript";
+  return `import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import config from '../../../../../auth.config'
+
+export async function POST(request${ts ? ": NextRequest" : ""}) {
+  // TODO: implement \u2014 verify code, mark emailVerified = true, return role
+  const { code } = await request.json()
+  return NextResponse.json({ success: true, role: 'user' })
+}
+`;
+}
 
 // src/commands/init.ts
 var DEFAULT_COLOR = "oklch(0.6 0.2 240)";
@@ -23958,9 +24358,35 @@ dist
   await step("Creating session helpers", async () => {
     await writeFile(`src/lib/auth.${language === "typescript" ? "ts" : "js"}`, generateAuthLib(language));
   });
-  await step("Scaffolding auth pages", async () => {
+  await step("Scaffolding auth pages and API routes", async () => {
     const e = language === "typescript" ? "tsx" : "jsx";
+    const r = language === "typescript" ? "ts" : "js";
+    await writeFile(`src/lib/prisma.${r}`, generatePrismaLib());
+    await writeFile(`src/app/api/auth/login/route.${r}`, generateLoginRoute());
+    await writeFile(`src/app/api/auth/logout/route.${r}`, generateLogoutRoute());
+    await writeFile(`src/app/api/auth/change-password/route.${r}`, generateChangePasswordRoute());
+    if (features.twoFactor) {
+      await writeFile(`src/app/api/auth/two-factor/route.${r}`, generateTwoFactorRoute());
+    }
+    if (features.passwordReset) {
+      await writeFile(`src/app/api/auth/forgot-password/route.${r}`, generateForgotPasswordRoute(language));
+      await writeFile(`src/app/api/auth/reset-password/route.${r}`, generateResetPasswordRoute(language));
+    }
+    if (features.emailVerification) {
+      await writeFile(`src/app/api/auth/verify-email/route.${r}`, generateVerifyEmailRoute(language));
+    }
     await writeFile(`src/app/(auth)/login/page.${e}`, generateLoginPage(app.appName, DEFAULT_COLOR, language));
+    if (features.passwordReset) {
+      await writeFile(`src/app/(auth)/forgot-password/page.${e}`, generateForgotPasswordPage(language));
+      await writeFile(`src/app/(auth)/reset-password/page.${e}`, generateResetPasswordPage(language));
+    }
+    if (features.twoFactor) {
+      await writeFile(`src/app/(auth)/two-factor/page.${e}`, generateTwoFactorPage(language));
+    }
+    if (features.emailVerification) {
+      await writeFile(`src/app/(auth)/verify-email-notice/page.${e}`, generateVerifyEmailNoticePage());
+      await writeFile(`src/app/(auth)/verify-email/page.${e}`, generateVerifyEmailPage(language));
+    }
   });
   await step("Creating .env and .env.example", async () => {
     await writeFile(".env", generateEnvFile(app.cookiePrefix, infra, features));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alinsafawi/aegis-auth",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "The shield your Next.js app deserves — full-stack auth in minutes",
   "bin": {
     "aegis-auth": "dist/index.js"