implement better-auth auth with postgres and route protection

2026-02-24 13:32:43 -05:00
parent fd168f607c
commit 52a4ab38d3
31 changed files with 1202 additions and 89 deletions
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -1,32 +1,151 @@
 'use client';

 import Link from 'next/link';
+import { Suspense, type FormEvent, useEffect, useMemo, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { AuthShell } from '@/components/auth/auth-shell';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { authClient } from '@/lib/auth-client';
+
+function sanitizeNextPath(value: string | null) {
+  if (!value || !value.startsWith('/')) {
+    return '/';
+  }
+
+  return value;
+}

 export default function SignInPage() {
+  return (
+    <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading sign in...</div>}>
+      <SignInPageContent />
+    </Suspense>
+  );
+}
+
+function SignInPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const nextPath = useMemo(() => sanitizeNextPath(searchParams.get('next')), [searchParams]);
+  const { data: rawSession, isPending } = authClient.useSession();
+  const session = (rawSession ?? null) as { user?: { id?: string } } | null;
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [busyAction, setBusyAction] = useState<'password' | 'magic' | null>(null);
+
+  useEffect(() => {
+    if (!isPending && session?.user?.id) {
+      router.replace(nextPath);
+    }
+  }, [isPending, nextPath, router, session]);
+
+  const signInWithPassword = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(null);
+    setMessage(null);
+    setBusyAction('password');
+
+    const { error: signInError } = await authClient.signIn.email({
+      email: email.trim(),
+      password,
+      callbackURL: nextPath
+    });
+
+    setBusyAction(null);
+
+    if (signInError) {
+      setError(signInError.message || 'Sign in failed.');
+      return;
+    }
+
+    router.replace(nextPath);
+  };
+
+  const signInWithMagicLink = async () => {
+    const targetEmail = email.trim();
+    if (!targetEmail) {
+      setError('Email is required for magic link sign in.');
+      return;
+    }
+
+    setError(null);
+    setMessage(null);
+    setBusyAction('magic');
+
+    const { error: magicError } = await authClient.signIn.magicLink({
+      email: targetEmail,
+      callbackURL: nextPath
+    });
+
+    setBusyAction(null);
+
+    if (magicError) {
+      setError(magicError.message || 'Unable to send magic link.');
+      return;
+    }
+
+    setMessage('Magic link sent. Check your inbox and open the link on this device.');
+  };
+
  return (
    <AuthShell
-      title="Local Runtime Mode"
-      subtitle="Authentication is disabled in this rebuilt local-first environment."
+      title="Secure Sign In"
+      subtitle="Use email/password or request a magic link."
      footer={(
        <>
-          Need multi-user auth later?{' '}
-          <Link href="/" className="text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
-            Open command center
+          Need an account?{' '}
+          <Link href={`/auth/signup${nextPath !== '/' ? `?next=${encodeURIComponent(nextPath)}` : ''}`} className="text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
+            Create one
          </Link>
        </>
      )}
    >
-      <p className="text-sm text-[color:var(--terminal-muted)]">
-        Continue directly into the fiscal terminal. API routes are same-origin and task execution is fully local with OpenClaw support.
-      </p>
+      <form className="space-y-4" onSubmit={signInWithPassword}>
+        <div>
+          <label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Email</label>
+          <Input
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+          />
+        </div>

-      <Link href="/" className="mt-6 block">
-        <Button type="button" className="w-full">
-          Enter terminal
+        <div>
+          <label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Password</label>
+          <Input
+            type="password"
+            autoComplete="current-password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+          />
+        </div>
+
+        {error ? <p className="text-sm text-[#ff9f9f]">{error}</p> : null}
+        {message ? <p className="text-sm text-[#9fffcf]">{message}</p> : null}
+
+        <Button type="submit" className="w-full" disabled={busyAction !== null}>
+          {busyAction === 'password' ? 'Signing in...' : 'Sign in with password'}
        </Button>
-      </Link>
+      </form>
+
+      <div className="mt-4">
+        <Button
+          type="button"
+          variant="secondary"
+          className="w-full"
+          disabled={busyAction !== null}
+          onClick={() => void signInWithMagicLink()}
+        >
+          {busyAction === 'magic' ? 'Sending link...' : 'Send magic link'}
+        </Button>
+      </div>
    </AuthShell>
  );
 }
--- a/app/auth/signup/page.tsx
+++ b/app/auth/signup/page.tsx
@@ -1,32 +1,143 @@
 'use client';

 import Link from 'next/link';
+import { Suspense, type FormEvent, useEffect, useMemo, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { AuthShell } from '@/components/auth/auth-shell';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { authClient } from '@/lib/auth-client';
+
+function sanitizeNextPath(value: string | null) {
+  if (!value || !value.startsWith('/')) {
+    return '/';
+  }
+
+  return value;
+}

 export default function SignUpPage() {
+  return (
+    <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading sign up...</div>}>
+      <SignUpPageContent />
+    </Suspense>
+  );
+}
+
+function SignUpPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const nextPath = useMemo(() => sanitizeNextPath(searchParams.get('next')), [searchParams]);
+  const { data: rawSession, isPending } = authClient.useSession();
+  const session = (rawSession ?? null) as { user?: { id?: string } } | null;
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!isPending && session?.user?.id) {
+      router.replace(nextPath);
+    }
+  }, [isPending, nextPath, router, session]);
+
+  const signUp = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(null);
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match.');
+      return;
+    }
+
+    setBusy(true);
+
+    const { error: signUpError } = await authClient.signUp.email({
+      name: name.trim(),
+      email: email.trim(),
+      password,
+      callbackURL: nextPath
+    });
+
+    setBusy(false);
+
+    if (signUpError) {
+      setError(signUpError.message || 'Unable to create account.');
+      return;
+    }
+
+    router.replace(nextPath);
+  };
+
  return (
    <AuthShell
-      title="Workspace Provisioned"
-      subtitle="This clone now runs in local-operator mode and does not require account creation."
+      title="Create Account"
+      subtitle="Set up your operator profile to access portfolio and filings intelligence."
      footer={(
        <>
-          Already set?{' '}
-          <Link href="/" className="text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
-            Launch dashboard
+          Already registered?{' '}
+          <Link href={`/auth/signin${nextPath !== '/' ? `?next=${encodeURIComponent(nextPath)}` : ''}`} className="text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
+            Sign in
          </Link>
        </>
      )}
    >
-      <p className="text-sm text-[color:var(--terminal-muted)]">
-        For production deployment you can reintroduce full multi-user authentication, but this rebuild is intentionally self-contained for fast iteration.
-      </p>
+      <form className="space-y-4" onSubmit={signUp}>
+        <div>
+          <label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Name</label>
+          <Input
+            type="text"
+            autoComplete="name"
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            required
+          />
+        </div>

-      <Link href="/" className="mt-6 block">
-        <Button type="button" className="w-full">
-          Open fiscal desk
+        <div>
+          <label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Email</label>
+          <Input
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+          />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Password</label>
+          <Input
+            type="password"
+            autoComplete="new-password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+
+        <div>
+          <label className="mb-1 block text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">Confirm Password</label>
+          <Input
+            type="password"
+            autoComplete="new-password"
+            value={confirmPassword}
+            onChange={(event) => setConfirmPassword(event.target.value)}
+            required
+            minLength={8}
+          />
+        </div>
+
+        {error ? <p className="text-sm text-[#ff9f9f]">{error}</p> : null}
+
+        <Button type="submit" className="w-full" disabled={busy}>
+          {busy ? 'Creating account...' : 'Create account'}
        </Button>
-      </Link>
+      </form>
    </AuthShell>
  );
 }