@rudderjs/auth 0.2.0

package/pages/solid/forgot-password/+Page.tsx

@@ -0,0 +1,62 @@
+import '@/index.css'
+import { createSignal } from 'solid-js'
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail]     = createSignal('')
+  const [error, setError]     = createSignal('')
+  const [success, setSuccess] = createSignal('')
+  const [loading, setLoading] = createSignal(false)
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth/request-password-reset', {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ email: email(), redirectTo: '/reset-password' }),
+      })
+      if (res.ok) {
+        setSuccess('If an account exists with that email, a password reset link has been sent.')
+      } else {
+        const body = await res.json().catch(() => ({})) as { message?: string }
+        setError(body.message ?? 'Something went wrong. Please try again.')
+      }
+    } catch {
+      setError('Something went wrong. Please try again.')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div class="flex min-h-svh items-center justify-center p-4">
+      <div class="w-full max-w-sm space-y-6">
+        <div class="text-center">
+          <h1 class="text-2xl font-bold">Forgot password</h1>
+          <p class="text-sm text-gray-500 mt-1">Enter your email to receive a reset link</p>
+        </div>
+        <form onSubmit={handleSubmit} class="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error() && <p class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error()}</p>}
+          {success() && <p class="rounded-md bg-green-50 px-3 py-2 text-sm text-green-600">{success()}</p>}
+          <div>
+            <label class="block text-sm font-medium mb-1" for="email">Email</label>
+            <input id="email" type="email" placeholder="you@example.com"
+              value={email()} onInput={e => setEmail(e.currentTarget.value)}
+              required autocomplete="email"
+              class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+          </div>
+          <button type="submit" disabled={loading()}
+            class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+            {loading() ? 'Sending...' : 'Send reset link'}
+          </button>
+          <p class="text-center text-sm text-gray-500">
+            Remember your password?{' '}
+            <a href="/login" class="underline hover:text-black">Sign in</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}

package/pages/solid/login/+Page.tsx

@@ -0,0 +1,66 @@
+import '@/index.css'
+import { createSignal } from 'solid-js'
+import { navigate } from 'vike/client/router'
+
+export default function LoginPage() {
+  const [email, setEmail]       = createSignal('')
+  const [password, setPassword] = createSignal('')
+  const [error, setError]       = createSignal('')
+  const [loading, setLoading]   = createSignal(false)
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const res = await fetch('/api/auth/sign-in/email', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ email: email(), password: password() }),
+    })
+    if (res.ok) {
+      const params = new URLSearchParams(window.location.search)
+      const redirect = params.get('redirect')
+      await navigate(redirect && redirect.startsWith('/') ? redirect : '/')
+    } else {
+      const body = await res.json().catch(() => ({})) as { message?: string }
+      setError(body.message ?? 'Invalid email or password.')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div class="flex min-h-svh items-center justify-center p-4">
+      <div class="w-full max-w-sm space-y-6">
+        <div class="text-center">
+          <h1 class="text-2xl font-bold">Welcome back</h1>
+          <p class="text-sm text-gray-500 mt-1">Sign in to your account</p>
+        </div>
+        <form onSubmit={handleSubmit} class="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error() && <p class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error()}</p>}
+          <div>
+            <label class="block text-sm font-medium mb-1" for="email">Email</label>
+            <input id="email" type="email" placeholder="you@example.com"
+              value={email()} onInput={e => setEmail(e.currentTarget.value)}
+              required autocomplete="email"
+              class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="password">Password</label>
+            <input id="password" type="password" placeholder="••••••••"
+              value={password()} onInput={e => setPassword(e.currentTarget.value)}
+              required autocomplete="current-password"
+              class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+          </div>
+          <button type="submit" disabled={loading()}
+            class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+            {loading() ? 'Signing in…' : 'Sign in'}
+          </button>
+          <p class="text-center text-sm text-gray-500">
+            Don't have an account?{' '}
+            <a href="/register" class="underline hover:text-black">Register</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}

package/pages/solid/login/+guard.ts

@@ -0,0 +1,15 @@
+import { redirect } from 'vike/abort'
+import type { GuardAsync } from 'vike/types'
+import type { BetterAuthInstance } from '@rudderjs/auth'
+
+export const guard: GuardAsync = async (pageContext): ReturnType<GuardAsync> => {
+  // import.meta.env.SSR is a Vite compile-time constant — tree-shaken from client bundle
+  if (!import.meta.env.SSR) return
+  const { app } = await import('@rudderjs/core')
+  const auth    = app().make<BetterAuthInstance>('auth')
+  const session = await auth.api.getSession({
+    headers: new Headers(pageContext.headers ?? {}),
+  })
+  // Already logged in — redirect to home
+  if (session?.user) throw redirect('/')
+}

package/pages/solid/register/+Page.tsx

@@ -0,0 +1,72 @@
+import '@/index.css'
+import { createSignal } from 'solid-js'
+import { navigate } from 'vike/client/router'
+
+export default function RegisterPage() {
+  const [name, setName]         = createSignal('')
+  const [email, setEmail]       = createSignal('')
+  const [password, setPassword] = createSignal('')
+  const [error, setError]       = createSignal('')
+  const [loading, setLoading]   = createSignal(false)
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    const res = await fetch('/api/auth/sign-up/email', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ name: name(), email: email(), password: password() }),
+    })
+    if (res.ok) {
+      await navigate('/')
+    } else {
+      const body = await res.json().catch(() => ({})) as { message?: string }
+      setError(body.message ?? 'Could not create account. Please try again.')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div class="flex min-h-svh items-center justify-center p-4">
+      <div class="w-full max-w-sm space-y-6">
+        <div class="text-center">
+          <h1 class="text-2xl font-bold">Create an account</h1>
+          <p class="text-sm text-gray-500 mt-1">Get started in seconds</p>
+        </div>
+        <form onSubmit={handleSubmit} class="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error() && <p class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error()}</p>}
+          <div>
+            <label class="block text-sm font-medium mb-1" for="name">Name</label>
+            <input id="name" type="text" placeholder="Alice Smith"
+              value={name()} onInput={e => setName(e.currentTarget.value)}
+              required autocomplete="name"
+              class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="email">Email</label>
+            <input id="email" type="email" placeholder="you@example.com"
+              value={email()} onInput={e => setEmail(e.currentTarget.value)}
+              required autocomplete="email"
+              class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="password">Password</label>
+            <input id="password" type="password" placeholder="••••••••"
+              value={password()} onInput={e => setPassword(e.currentTarget.value)}
+              required autocomplete="new-password" minLength={8}
+              class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+          </div>
+          <button type="submit" disabled={loading()}
+            class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+            {loading() ? 'Creating account…' : 'Create account'}
+          </button>
+          <p class="text-center text-sm text-gray-500">
+            Already have an account?{' '}
+            <a href="/login" class="underline hover:text-black">Sign in</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}

package/pages/solid/register/+guard.ts

@@ -0,0 +1,15 @@
+import { redirect } from 'vike/abort'
+import type { GuardAsync } from 'vike/types'
+import type { BetterAuthInstance } from '@rudderjs/auth'
+
+export const guard: GuardAsync = async (pageContext): ReturnType<GuardAsync> => {
+  // import.meta.env.SSR is a Vite compile-time constant — tree-shaken from client bundle
+  if (!import.meta.env.SSR) return
+  const { app } = await import('@rudderjs/core')
+  const auth    = app().make<BetterAuthInstance>('auth')
+  const session = await auth.api.getSession({
+    headers: new Headers(pageContext.headers ?? {}),
+  })
+  // Already registered and logged in — redirect to home
+  if (session?.user) throw redirect('/')
+}

package/pages/solid/reset-password/+Page.tsx

@@ -0,0 +1,94 @@
+import '@/index.css'
+import { createSignal, Show } from 'solid-js'
+
+export default function ResetPasswordPage() {
+  const [password, setPassword]       = createSignal('')
+  const [confirmPassword, setConfirm] = createSignal('')
+  const [error, setError]             = createSignal('')
+  const [success, setSuccess]         = createSignal('')
+  const [loading, setLoading]         = createSignal(false)
+
+  const params = new URLSearchParams(window.location.search)
+  const token  = params.get('token')
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+
+    if (password() !== confirmPassword()) {
+      setError('Passwords do not match.')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth/reset-password', {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ token, newPassword: password() }),
+      })
+      if (res.ok) {
+        setSuccess('Your password has been reset successfully.')
+      } else {
+        const body = await res.json().catch(() => ({})) as { message?: string }
+        setError(body.message ?? 'Invalid or expired token.')
+      }
+    } catch {
+      setError('Something went wrong. Please try again.')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div class="flex min-h-svh items-center justify-center p-4">
+      <div class="w-full max-w-sm space-y-6">
+        <Show when={token} fallback={
+          <div class="space-y-4 rounded-lg border p-6 shadow-sm">
+            <p class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">Missing reset token.</p>
+            <p class="text-center text-sm text-gray-500">
+              <a href="/forgot-password" class="underline hover:text-black">Request a new reset link</a>
+            </p>
+          </div>
+        }>
+          <div class="text-center">
+            <h1 class="text-2xl font-bold">Reset password</h1>
+            <p class="text-sm text-gray-500 mt-1">Enter your new password</p>
+          </div>
+          <form onSubmit={handleSubmit} class="space-y-4 rounded-lg border p-6 shadow-sm">
+            {error() && <p class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error()}</p>}
+            <Show when={success()} fallback={
+              <>
+                <div>
+                  <label class="block text-sm font-medium mb-1" for="password">New password</label>
+                  <input id="password" type="password" placeholder="••••••••"
+                    value={password()} onInput={e => setPassword(e.currentTarget.value)}
+                    required minLength={8} autocomplete="new-password"
+                    class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium mb-1" for="confirm-password">Confirm password</label>
+                  <input id="confirm-password" type="password" placeholder="••••••••"
+                    value={confirmPassword()} onInput={e => setConfirm(e.currentTarget.value)}
+                    required minLength={8} autocomplete="new-password"
+                    class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+                </div>
+                <button type="submit" disabled={loading()}
+                  class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+                  {loading() ? 'Resetting...' : 'Reset password'}
+                </button>
+              </>
+            }>
+              <div class="space-y-2">
+                <p class="rounded-md bg-green-50 px-3 py-2 text-sm text-green-600">{success()}</p>
+                <p class="text-center text-sm text-gray-500">
+                  <a href="/login" class="underline hover:text-black">Sign in</a>
+                </p>
+              </div>
+            </Show>
+          </form>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/pages/vue/forgot-password/+Page.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import '@/index.css'
+import { ref } from 'vue'
+
+const email   = ref('')
+const error   = ref('')
+const success = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value   = ''
+  success.value = ''
+  loading.value = true
+  try {
+    const res = await fetch('/api/auth/request-password-reset', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ email: email.value, redirectTo: '/reset-password' }),
+    })
+    if (res.ok) {
+      success.value = 'If an account exists with that email, a password reset link has been sent.'
+    } else {
+      const body = await res.json().catch(() => ({})) as { message?: string }
+      error.value = body.message ?? 'Something went wrong. Please try again.'
+    }
+  } catch {
+    error.value = 'Something went wrong. Please try again.'
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex min-h-svh items-center justify-center p-4">
+    <div class="w-full max-w-sm space-y-6">
+      <div class="text-center">
+        <h1 class="text-2xl font-bold">Forgot password</h1>
+        <p class="text-sm text-gray-500 mt-1">Enter your email to receive a reset link</p>
+      </div>
+      <form @submit.prevent="handleSubmit" class="space-y-4 rounded-lg border p-6 shadow-sm">
+        <p v-if="error" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{{ error }}</p>
+        <p v-if="success" class="rounded-md bg-green-50 px-3 py-2 text-sm text-green-600">{{ success }}</p>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="email">Email</label>
+          <input id="email" v-model="email" type="email" placeholder="you@example.com"
+            required autocomplete="email"
+            class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+        </div>
+        <button type="submit" :disabled="loading"
+          class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+          {{ loading ? 'Sending...' : 'Send reset link' }}
+        </button>
+        <p class="text-center text-sm text-gray-500">
+          Remember your password?
+          <a href="/login" class="underline hover:text-black">Sign in</a>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>

package/pages/vue/login/+Page.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import '@/index.css'
+import { ref } from 'vue'
+import { navigate } from 'vike/client/router'
+
+const email    = ref('')
+const password = ref('')
+const error    = ref('')
+const loading  = ref(false)
+
+async function handleSubmit() {
+  error.value   = ''
+  loading.value = true
+  const res = await fetch('/api/auth/sign-in/email', {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ email: email.value, password: password.value }),
+  })
+  if (res.ok) {
+    const params = new URLSearchParams(window.location.search)
+    const redirect = params.get('redirect')
+    await navigate(redirect && redirect.startsWith('/') ? redirect : '/')
+  } else {
+    const body = await res.json().catch(() => ({})) as { message?: string }
+    error.value = body.message ?? 'Invalid email or password.'
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex min-h-svh items-center justify-center p-4">
+    <div class="w-full max-w-sm space-y-6">
+      <div class="text-center">
+        <h1 class="text-2xl font-bold">Welcome back</h1>
+        <p class="text-sm text-gray-500 mt-1">Sign in to your account</p>
+      </div>
+      <form @submit.prevent="handleSubmit" class="space-y-4 rounded-lg border p-6 shadow-sm">
+        <p v-if="error" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{{ error }}</p>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="email">Email</label>
+          <input id="email" v-model="email" type="email" placeholder="you@example.com"
+            required autocomplete="email"
+            class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+        </div>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="password">Password</label>
+          <input id="password" v-model="password" type="password" placeholder="••••••••"
+            required autocomplete="current-password"
+            class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+        </div>
+        <button type="submit" :disabled="loading"
+          class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+          {{ loading ? 'Signing in…' : 'Sign in' }}
+        </button>
+        <p class="text-center text-sm text-gray-500">
+          Don't have an account?
+          <a href="/register" class="underline hover:text-black">Register</a>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>

package/pages/vue/login/+guard.ts

@@ -0,0 +1,15 @@
+import { redirect } from 'vike/abort'
+import type { GuardAsync } from 'vike/types'
+import type { BetterAuthInstance } from '@rudderjs/auth'
+
+export const guard: GuardAsync = async (pageContext): ReturnType<GuardAsync> => {
+  // import.meta.env.SSR is a Vite compile-time constant — tree-shaken from client bundle
+  if (!import.meta.env.SSR) return
+  const { app } = await import('@rudderjs/core')
+  const auth    = app().make<BetterAuthInstance>('auth')
+  const session = await auth.api.getSession({
+    headers: new Headers(pageContext.headers ?? {}),
+  })
+  // Already logged in — redirect to home
+  if (session?.user) throw redirect('/')
+}

package/pages/vue/register/+Page.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import '@/index.css'
+import { ref } from 'vue'
+import { navigate } from 'vike/client/router'
+
+const name     = ref('')
+const email    = ref('')
+const password = ref('')
+const error    = ref('')
+const loading  = ref(false)
+
+async function handleSubmit() {
+  error.value   = ''
+  loading.value = true
+  const res = await fetch('/api/auth/sign-up/email', {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ name: name.value, email: email.value, password: password.value }),
+  })
+  if (res.ok) {
+    await navigate('/')
+  } else {
+    const body = await res.json().catch(() => ({})) as { message?: string }
+    error.value = body.message ?? 'Could not create account. Please try again.'
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex min-h-svh items-center justify-center p-4">
+    <div class="w-full max-w-sm space-y-6">
+      <div class="text-center">
+        <h1 class="text-2xl font-bold">Create an account</h1>
+        <p class="text-sm text-gray-500 mt-1">Get started in seconds</p>
+      </div>
+      <form @submit.prevent="handleSubmit" class="space-y-4 rounded-lg border p-6 shadow-sm">
+        <p v-if="error" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{{ error }}</p>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="name">Name</label>
+          <input id="name" v-model="name" type="text" placeholder="Alice Smith"
+            required autocomplete="name"
+            class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+        </div>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="email">Email</label>
+          <input id="email" v-model="email" type="email" placeholder="you@example.com"
+            required autocomplete="email"
+            class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+        </div>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="password">Password</label>
+          <input id="password" v-model="password" type="password" placeholder="••••••••"
+            required autocomplete="new-password" minlength="8"
+            class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+        </div>
+        <button type="submit" :disabled="loading"
+          class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+          {{ loading ? 'Creating account…' : 'Create account' }}
+        </button>
+        <p class="text-center text-sm text-gray-500">
+          Already have an account?
+          <a href="/login" class="underline hover:text-black">Sign in</a>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>

package/pages/vue/register/+guard.ts

@@ -0,0 +1,15 @@
+import { redirect } from 'vike/abort'
+import type { GuardAsync } from 'vike/types'
+import type { BetterAuthInstance } from '@rudderjs/auth'
+
+export const guard: GuardAsync = async (pageContext): ReturnType<GuardAsync> => {
+  // import.meta.env.SSR is a Vite compile-time constant — tree-shaken from client bundle
+  if (!import.meta.env.SSR) return
+  const { app } = await import('@rudderjs/core')
+  const auth    = app().make<BetterAuthInstance>('auth')
+  const session = await auth.api.getSession({
+    headers: new Headers(pageContext.headers ?? {}),
+  })
+  // Already registered and logged in — redirect to home
+  if (session?.user) throw redirect('/')
+}

package/pages/vue/reset-password/+Page.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import '@/index.css'
+import { ref, computed } from 'vue'
+
+const password        = ref('')
+const confirmPassword = ref('')
+const error           = ref('')
+const success         = ref('')
+const loading         = ref(false)
+
+const params = new URLSearchParams(window.location.search)
+const token  = params.get('token')
+
+const hasToken = computed(() => !!token)
+
+async function handleSubmit() {
+  error.value   = ''
+  success.value = ''
+
+  if (password.value !== confirmPassword.value) {
+    error.value = 'Passwords do not match.'
+    return
+  }
+
+  loading.value = true
+  try {
+    const res = await fetch('/api/auth/reset-password', {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ token, newPassword: password.value }),
+    })
+    if (res.ok) {
+      success.value = 'Your password has been reset successfully.'
+    } else {
+      const body = await res.json().catch(() => ({})) as { message?: string }
+      error.value = body.message ?? 'Invalid or expired token.'
+    }
+  } catch {
+    error.value = 'Something went wrong. Please try again.'
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <div class="flex min-h-svh items-center justify-center p-4">
+    <div class="w-full max-w-sm space-y-6">
+      <template v-if="!hasToken">
+        <div class="space-y-4 rounded-lg border p-6 shadow-sm">
+          <p class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">Missing reset token.</p>
+          <p class="text-center text-sm text-gray-500">
+            <a href="/forgot-password" class="underline hover:text-black">Request a new reset link</a>
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="text-center">
+          <h1 class="text-2xl font-bold">Reset password</h1>
+          <p class="text-sm text-gray-500 mt-1">Enter your new password</p>
+        </div>
+        <form @submit.prevent="handleSubmit" class="space-y-4 rounded-lg border p-6 shadow-sm">
+          <p v-if="error" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{{ error }}</p>
+          <template v-if="success">
+            <div class="space-y-2">
+              <p class="rounded-md bg-green-50 px-3 py-2 text-sm text-green-600">{{ success }}</p>
+              <p class="text-center text-sm text-gray-500">
+                <a href="/login" class="underline hover:text-black">Sign in</a>
+              </p>
+            </div>
+          </template>
+          <template v-else>
+            <div>
+              <label class="block text-sm font-medium mb-1" for="password">New password</label>
+              <input id="password" v-model="password" type="password" placeholder="••••••••"
+                required minlength="8" autocomplete="new-password"
+                class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-1" for="confirm-password">Confirm password</label>
+              <input id="confirm-password" v-model="confirmPassword" type="password" placeholder="••••••••"
+                required minlength="8" autocomplete="new-password"
+                class="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black" />
+            </div>
+            <button type="submit" :disabled="loading"
+              class="w-full rounded-md bg-black px-4 py-2 text-sm font-medium text-white hover:bg-black/90 disabled:opacity-50">
+              {{ loading ? 'Resetting...' : 'Reset password' }}
+            </button>
+          </template>
+        </form>
+      </template>
+    </div>
+  </div>
+</template>