M1: authentication with better-auth, verified end to end
Switches from the planned Auth.js v5 to better-auth 1.7.1. The plan assumed the blocker would be schema fit; it is not. @auth/drizzle-adapter accepts our tables verbatim. What rules Auth.js out is that credentials providers hardcode JWT and never call adapter.createSession, and the config assertion that would catch it only fires when EVERY provider is credentials — so adding Google suppresses the warning and the app ships silently broken. Phone OTP with database sessions is not reachable there without hand-building the whole OTP security layer. Also corrects a premise: better-auth's drizzle-orm peer is declared OPTIONAL, so no 0.38 -> 0.45 upgrade is forced. Verified on 0.38.4. - auth schema rewritten to better-auth 1.7.1's own getSchema() output: sessions/accounts/verifications reshaped, emailVerified and phoneVerified are BOOLEAN (a timestamptz there fails 100% of signups), accounts.issuer added, phone_otps dropped. Ban state now comes from the admin plugin rather than a second bannedAt column. - Session resolution is one file. Everything downstream is written against our own Session type, so the provider stays swappable. - Ban enforcement lives in the resolver because Session carries no ban field and protectedProcedure promises a non-banned user. - Phone OTP sign-in, Google, role selection, tRPC user router. - Synthetic emails for phone-first users, with isSyntheticEmail() gating every future send. Pros must supply a real address; clients need not. - Duplicate-account detection, since both signup routes stay open and nothing correlates a phone to a Google identity. Detects only — merging accounts that carry reviews and payments needs its own tooling. - SMS sender refuses to fall back to console logging in production. - declaration:false for the app, which is the actual fix for the TS2742 wall from better-auth's transitive zod under pnpm. Verified against a live server: OTP sent, code verified, uuid PK honoured, database session written, and an authenticated tRPC call resolved. A signed-in stranger gets NOT_FOUND on another client's deck; anonymous gets UNAUTHORIZED. 124 tests passing. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
serfowi
@@ -0,0 +1,155 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { authClient } from '@/lib/auth-client';
|
||||
|
||||
type Step = 'phone' | 'code';
|
||||
|
||||
export function SignInForm() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const next = searchParams.get('next') ?? '/jobs';
|
||||
|
||||
const [step, setStep] = useState<Step>('phone');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [code, setCode] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function sendCode(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
const { error: sendError } = await authClient.phoneNumber.sendOtp({ phoneNumber: phone });
|
||||
setBusy(false);
|
||||
|
||||
if (sendError) {
|
||||
setError(sendError.message ?? 'We could not send that code. Check the number and try again.');
|
||||
return;
|
||||
}
|
||||
setStep('code');
|
||||
}
|
||||
|
||||
async function verifyCode(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setBusy(true);
|
||||
const { error: verifyError } = await authClient.phoneNumber.verify({
|
||||
phoneNumber: phone,
|
||||
code,
|
||||
});
|
||||
setBusy(false);
|
||||
|
||||
if (verifyError) {
|
||||
// better-auth returns TOO_MANY_ATTEMPTS after 3 wrong codes; say so plainly
|
||||
// rather than letting someone keep guessing at a dead code.
|
||||
setError(
|
||||
verifyError.status === 403
|
||||
? 'Too many incorrect attempts. Request a new code.'
|
||||
: (verifyError.message ?? 'That code is not right.'),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push(next);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-8 flex flex-col gap-6">
|
||||
{step === 'phone' ? (
|
||||
<form onSubmit={sendCode} className="flex flex-col gap-3">
|
||||
<label htmlFor="phone" className="text-sm font-medium">
|
||||
Mobile number
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
autoComplete="tel"
|
||||
inputMode="tel"
|
||||
required
|
||||
placeholder="+34 600 123 456"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value.replace(/\s/g, ''))}
|
||||
className="rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-base outline-none focus:border-[var(--color-brand-500)]"
|
||||
/>
|
||||
<SubmitButton busy={busy}>Send code</SubmitButton>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={verifyCode} className="flex flex-col gap-3">
|
||||
<label htmlFor="code" className="text-sm font-medium">
|
||||
Enter the code we sent to {phone}
|
||||
</label>
|
||||
<input
|
||||
id="code"
|
||||
name="code"
|
||||
type="text"
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]{6}"
|
||||
maxLength={6}
|
||||
required
|
||||
autoFocus
|
||||
placeholder="123456"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
|
||||
className="rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-center text-2xl tracking-[0.4em] outline-none focus:border-[var(--color-brand-500)]"
|
||||
/>
|
||||
<SubmitButton busy={busy}>Sign in</SubmitButton>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setStep('phone');
|
||||
setCode('');
|
||||
setError(null);
|
||||
}}
|
||||
className="text-sm text-[var(--muted)] underline underline-offset-4"
|
||||
>
|
||||
Use a different number
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="text-sm text-[var(--color-stop-500)]">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-[var(--muted)]">
|
||||
<span className="h-px flex-1 bg-[var(--border)]" />
|
||||
or
|
||||
<span className="h-px flex-1 bg-[var(--border)]" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => authClient.signIn.social({ provider: 'google', callbackURL: next })}
|
||||
className="rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-sm font-medium transition hover:border-[var(--color-brand-500)]"
|
||||
>
|
||||
Continue with Google
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-[var(--muted)]">
|
||||
Signing in with Google creates a separate account from a phone sign-in. If you have used both,
|
||||
contact us and we will link them.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SubmitButton({ busy, children }: { busy: boolean; children: React.ReactNode }) {
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
className="flex items-center justify-center gap-2 rounded-xl bg-[var(--color-brand-500)] px-4 py-3 font-medium text-white transition hover:bg-[var(--color-brand-600)] disabled:opacity-60"
|
||||
>
|
||||
{busy && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user