@rudderjs/auth 0.2.0

package/dist/session-guard.js

@@ -0,0 +1,52 @@
+export class SessionGuard {
+    provider;
+    session;
+    _user = undefined; // undefined = not loaded yet
+    constructor(provider, session) {
+        this.provider = provider;
+        this.session = session;
+    }
+    async user() {
+        if (this._user !== undefined)
+            return this._user;
+        const id = this.session.get('auth_user_id');
+        if (id) {
+            this._user = await this.provider.retrieveById(id);
+        }
+        else {
+            this._user = null;
+        }
+        return this._user;
+    }
+    async id() {
+        const u = await this.user();
+        return u ? u.getAuthIdentifier() : null;
+    }
+    async check() {
+        return (await this.user()) !== null;
+    }
+    async guest() {
+        return (await this.user()) === null;
+    }
+    async attempt(credentials, _remember) {
+        const user = await this.provider.retrieveByCredentials(credentials);
+        if (!user)
+            return false;
+        const valid = await this.provider.validateCredentials(user, credentials);
+        if (!valid)
+            return false;
+        await this.login(user);
+        return true;
+    }
+    async login(user, _remember) {
+        await this.session.regenerate();
+        this.session.put('auth_user_id', user.getAuthIdentifier());
+        this._user = user;
+    }
+    async logout() {
+        this.session.forget('auth_user_id');
+        await this.session.regenerate();
+        this._user = null;
+    }
+}
+//# sourceMappingURL=session-guard.js.map

package/dist/session-guard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-guard.js","sourceRoot":"","sources":["../src/session-guard.ts"],"names":[],"mappings":"AAYA,MAAM,OAAO,YAAY;IAIJ;IACA;IAJX,KAAK,GAAuC,SAAS,CAAA,CAAC,6BAA6B;IAE3F,YACmB,QAAsB,EACtB,OAAqB;QADrB,aAAQ,GAAR,QAAQ,CAAc;QACtB,YAAO,GAAP,OAAO,CAAc;IACrC,CAAC;IAEJ,KAAK,CAAC,IAAI;QACR,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAA;QAE/C,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAS,cAAc,CAAC,CAAA;QACnD,IAAI,EAAE,EAAE,CAAC;YACP,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACnB,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;QAC3B,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;IACzC,CAAC;IAED,KAAK,CAAC,KAAK;QACT,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IACrC,CAAC;IAED,KAAK,CAAC,KAAK;QACT,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IACrC,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,WAAoC,EAAE,SAAmB;QACrE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAA;QACnE,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAA;QAEvB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;QACxE,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAA;QAExB,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QACtB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,KAAK,CAAC,KAAK,CAAC,IAAqB,EAAE,SAAmB;QACpD,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAA;QAC/B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAA;QAC1D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;QACnC,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAA;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,CAAC;CACF"}

package/dist/verification.d.ts

@@ -0,0 +1,58 @@
+import type { MiddlewareHandler } from '@rudderjs/contracts';
+import type { Authenticatable } from './contracts.js';
+/**
+ * Implement on your User model to opt into email verification.
+ *
+ * @example
+ * class User extends Model implements Authenticatable, MustVerifyEmail {
+ *   hasVerifiedEmail() { return this.emailVerifiedAt !== null }
+ *   markEmailAsVerified() { this.emailVerifiedAt = new Date().toISOString(); return Promise.resolve() }
+ *   getEmailForVerification() { return this.email }
+ * }
+ */
+export interface MustVerifyEmail {
+    hasVerifiedEmail(): boolean;
+    markEmailAsVerified(): Promise<void>;
+    getEmailForVerification(): string;
+}
+/** Type guard for users that must verify email. */
+export declare function mustVerifyEmail(user: unknown): user is Authenticatable & MustVerifyEmail;
+/**
+ * Middleware that requires the authenticated user to have a verified email.
+ * Returns 403 if unverified.
+ *
+ * @example
+ * import { RequireAuth, EnsureEmailIsVerified } from '@rudderjs/auth'
+ * router.get('/dashboard', RequireAuth(), EnsureEmailIsVerified(), handler)
+ */
+export declare function EnsureEmailIsVerified(): MiddlewareHandler;
+/**
+ * Generate a signed email verification URL for a user.
+ * Requires `@rudderjs/router` with a named route 'verification.verify'.
+ *
+ * @example
+ * // Register the verification route:
+ * router.get('/email/verify/:id/:hash', verifyHandler, [ValidateSignature()])
+ *   .name('verification.verify')
+ *
+ * // Generate the URL (e.g. in a notification):
+ * const url = verificationUrl(user)
+ */
+export declare function verificationUrl(user: MustVerifyEmail & {
+    id?: string | number;
+    getAuthIdentifier?(): string;
+}): string;
+/**
+ * Verifies the email hash matches and marks the user as verified.
+ * Use inside the verification route handler.
+ *
+ * @example
+ * router.get('/email/verify/:id/:hash', async (req, res) => {
+ *   await handleEmailVerification(req.params.id, req.params.hash, async (id) => {
+ *     return User.find(id)
+ *   })
+ *   res.json({ message: 'Email verified.' })
+ * }, [ValidateSignature()]).name('verification.verify')
+ */
+export declare function handleEmailVerification(id: string, hash: string, findUser: (id: string) => Promise<(MustVerifyEmail & Record<string, unknown>) | null>): Promise<boolean>;
+//# sourceMappingURL=verification.d.ts.map

package/dist/verification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"verification.d.ts","sourceRoot":"","sources":["../src/verification.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAY,MAAM,gBAAgB,CAAA;AAI/D;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,gBAAgB,IAAI,OAAO,CAAA;IAC3B,mBAAmB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;IACpC,uBAAuB,IAAI,MAAM,CAAA;CAClC;AAED,mDAAmD;AACnD,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,IAAI,eAAe,GAAG,eAAe,CAOxF;AAID;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,IAAI,iBAAiB,CAiBzD;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,iBAAiB,CAAC,IAAI,MAAM,CAAA;CAAE,GAAG,MAAM,CAoBtH;AAID;;;;;;;;;;;GAWG;AACH,wBAAsB,uBAAuB,CAC3C,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,GACpF,OAAO,CAAC,OAAO,CAAC,CAclB"}

package/dist/verification.js

@@ -0,0 +1,93 @@
+/** Type guard for users that must verify email. */
+export function mustVerifyEmail(user) {
+    const u = user;
+    return (typeof u['hasVerifiedEmail'] === 'function' &&
+        typeof u['markEmailAsVerified'] === 'function' &&
+        typeof u['getEmailForVerification'] === 'function');
+}
+// ─── EnsureEmailIsVerified middleware ────────────────────────
+/**
+ * Middleware that requires the authenticated user to have a verified email.
+ * Returns 403 if unverified.
+ *
+ * @example
+ * import { RequireAuth, EnsureEmailIsVerified } from '@rudderjs/auth'
+ * router.get('/dashboard', RequireAuth(), EnsureEmailIsVerified(), handler)
+ */
+export function EnsureEmailIsVerified() {
+    return async function EnsureEmailIsVerified(req, res, next) {
+        const user = req.user;
+        if (!user) {
+            res.status(401).json({ message: 'Unauthorized.' });
+            return;
+        }
+        // If the user has emailVerifiedAt, they're verified
+        if (user['emailVerifiedAt'] !== null && user['emailVerifiedAt'] !== undefined) {
+            await next();
+            return;
+        }
+        res.status(403).json({ message: 'Your email address is not verified.' });
+    };
+}
+// ─── Verification URL helper ────────────────────────────────
+/**
+ * Generate a signed email verification URL for a user.
+ * Requires `@rudderjs/router` with a named route 'verification.verify'.
+ *
+ * @example
+ * // Register the verification route:
+ * router.get('/email/verify/:id/:hash', verifyHandler, [ValidateSignature()])
+ *   .name('verification.verify')
+ *
+ * // Generate the URL (e.g. in a notification):
+ * const url = verificationUrl(user)
+ */
+export function verificationUrl(user) {
+    let Url;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require('@rudderjs/router');
+        Url = mod.Url;
+    }
+    catch {
+        throw new Error('[RudderJS Auth] Email verification requires @rudderjs/router for signed URLs.');
+    }
+    const id = user.getAuthIdentifier?.() ?? String(user['id'] ?? '');
+    const email = user.getEmailForVerification();
+    // Create a hash of the email for URL validation
+    const hash = _sha256(email);
+    return Url.temporarySignedRoute('verification.verify', 3600, { id, hash });
+}
+// ─── Verify handler helper ──────────────────────────────────
+/**
+ * Verifies the email hash matches and marks the user as verified.
+ * Use inside the verification route handler.
+ *
+ * @example
+ * router.get('/email/verify/:id/:hash', async (req, res) => {
+ *   await handleEmailVerification(req.params.id, req.params.hash, async (id) => {
+ *     return User.find(id)
+ *   })
+ *   res.json({ message: 'Email verified.' })
+ * }, [ValidateSignature()]).name('verification.verify')
+ */
+export async function handleEmailVerification(id, hash, findUser) {
+    const user = await findUser(id);
+    if (!user)
+        return false;
+    const email = user.getEmailForVerification();
+    const expected = _sha256(email);
+    if (hash !== expected)
+        return false;
+    if (!user.hasVerifiedEmail()) {
+        await user.markEmailAsVerified();
+    }
+    return true;
+}
+// ─── SHA-256 hash ───────────────────────────────────────────
+function _sha256(input) {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { createHash } = require('node:crypto');
+    return createHash('sha256').update(input).digest('hex');
+}
+//# sourceMappingURL=verification.js.map

package/dist/verification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verification.js","sourceRoot":"","sources":["../src/verification.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@rudderjs/auth",
+  "version": "0.2.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rudderjs/rudder",
+    "directory": "packages/auth"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "boost",
+    "pages",
+    "schema"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@rudderjs/core": "0.0.8",
+    "@rudderjs/contracts": "0.0.3"
+  },
+  "peerDependencies": {
+    "@rudderjs/session": "0.0.5",
+    "@rudderjs/hash": "0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@rudderjs/hash": {
+      "optional": false
+    },
+    "@rudderjs/session": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.4.0",
+    "@rudderjs/hash": "0.0.1",
+    "@rudderjs/session": "0.0.5"
+  },
+  "author": "Suleiman Shahbari",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "tsc -p tsconfig.test.json && node --test dist-test/index.test.js; EXIT=$?; rm -rf dist-test; exit $EXIT",
+    "clean": "rm -rf dist"
+  }
+}

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

@@ -0,0 +1,64 @@
+import '@/index.css'
+import { useState } from 'react'
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail]     = useState('')
+  const [error, setError]     = useState('')
+  const [success, setSuccess] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    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, 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 className="flex min-h-svh items-center justify-center p-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Forgot password</h1>
+          <p className="text-sm text-gray-500 mt-1">Enter your email to receive a reset link</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+          {success && <p className="rounded-md bg-green-50 px-3 py-2 text-sm text-green-600">{success}</p>}
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="email">Email</label>
+            <input
+              id="email" type="email" placeholder="you@example.com"
+              value={email} onChange={e => setEmail(e.currentTarget.value)}
+              required autoComplete="email"
+              className="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}
+            className="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 className="text-center text-sm text-gray-500">
+            Remember your password?{' '}
+            <a href="/login" className="underline hover:text-black">Sign in</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,70 @@
+import '@/index.css'
+import { useState } from 'react'
+import { navigate } from 'vike/client/router'
+
+export default function LoginPage() {
+  const [email, setEmail]       = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError]       = useState('')
+  const [loading, setLoading]   = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    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, 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 className="flex min-h-svh items-center justify-center p-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Welcome back</h1>
+          <p className="text-sm text-gray-500 mt-1">Sign in to your account</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="email">Email</label>
+            <input
+              id="email" type="email" placeholder="you@example.com"
+              value={email} onChange={e => setEmail(e.currentTarget.value)}
+              required autoComplete="email"
+              className="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
+            <input
+              id="password" type="password" placeholder="••••••••"
+              value={password} onChange={e => setPassword(e.currentTarget.value)}
+              required autoComplete="current-password"
+              className="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}
+            className="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 className="text-center text-sm text-gray-500">
+            Don't have an account?{' '}
+            <a href="/register" className="underline hover:text-black">Register</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}

package/pages/react/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/react/register/+Page.tsx

@@ -0,0 +1,78 @@
+import '@/index.css'
+import { useState } from 'react'
+import { navigate } from 'vike/client/router'
+
+export default function RegisterPage() {
+  const [name, setName]         = useState('')
+  const [email, setEmail]       = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError]       = useState('')
+  const [loading, setLoading]   = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    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, email, 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 className="flex min-h-svh items-center justify-center p-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Create an account</h1>
+          <p className="text-sm text-gray-500 mt-1">Get started in seconds</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="name">Name</label>
+            <input
+              id="name" type="text" placeholder="Alice Smith"
+              value={name} onChange={e => setName(e.currentTarget.value)}
+              required autoComplete="name"
+              className="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="email">Email</label>
+            <input
+              id="email" type="email" placeholder="you@example.com"
+              value={email} onChange={e => setEmail(e.currentTarget.value)}
+              required autoComplete="email"
+              className="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1" htmlFor="password">Password</label>
+            <input
+              id="password" type="password" placeholder="••••••••"
+              value={password} onChange={e => setPassword(e.currentTarget.value)}
+              required autoComplete="new-password" minLength={8}
+              className="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}
+            className="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 className="text-center text-sm text-gray-500">
+            Already have an account?{' '}
+            <a href="/login" className="underline hover:text-black">Sign in</a>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}

package/pages/react/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/react/reset-password/+Page.tsx

@@ -0,0 +1,118 @@
+import '@/index.css'
+import { useState, useEffect } from 'react'
+
+export default function ResetPasswordPage() {
+  const [password, setPassword]       = useState('')
+  const [confirmPassword, setConfirm] = useState('')
+  const [error, setError]             = useState('')
+  const [success, setSuccess]         = useState('')
+  const [loading, setLoading]         = useState(false)
+  const [token, setToken]             = useState<string | null>(null)
+  const [mounted, setMounted]         = useState(false)
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    setToken(params.get('token'))
+    setMounted(true)
+  }, [])
+
+  async function handleSubmit(e: React.FormEvent) {
+    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)
+  }
+
+  if (!mounted) {
+    return (
+      <div className="flex min-h-svh items-center justify-center p-4">
+        <div className="text-sm text-gray-500">Loading...</div>
+      </div>
+    )
+  }
+
+  if (!token) {
+    return (
+      <div className="flex min-h-svh items-center justify-center p-4">
+        <div className="w-full max-w-sm space-y-6">
+          <div className="space-y-4 rounded-lg border p-6 shadow-sm">
+            <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">Missing reset token.</p>
+            <p className="text-center text-sm text-gray-500">
+              <a href="/forgot-password" className="underline hover:text-black">Request a new reset link</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-svh items-center justify-center p-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Reset password</h1>
+          <p className="text-sm text-gray-500 mt-1">Enter your new password</p>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border p-6 shadow-sm">
+          {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+          {success && (
+            <div className="space-y-2">
+              <p className="rounded-md bg-green-50 px-3 py-2 text-sm text-green-600">{success}</p>
+              <p className="text-center text-sm text-gray-500">
+                <a href="/login" className="underline hover:text-black">Sign in</a>
+              </p>
+            </div>
+          )}
+          {!success && (
+            <>
+              <div>
+                <label className="block text-sm font-medium mb-1" htmlFor="password">New password</label>
+                <input
+                  id="password" type="password" placeholder="••••••••"
+                  value={password} onChange={e => setPassword(e.currentTarget.value)}
+                  required minLength={8} autoComplete="new-password"
+                  className="w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-black"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1" htmlFor="confirm-password">Confirm password</label>
+                <input
+                  id="confirm-password" type="password" placeholder="••••••••"
+                  value={confirmPassword} onChange={e => setConfirm(e.currentTarget.value)}
+                  required minLength={8} autoComplete="new-password"
+                  className="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}
+                className="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>
+            </>
+          )}
+        </form>
+      </div>
+    </div>
+  )
+}