feat(auth): SSR email confirmation flow
- Add /auth/confirm GET route handler that verifies the signup token via
verifyOtp({ type, token_hash }) and falls back to exchangeCodeForSession
when a PKCE code is present. Whitelists to same-origin paths.
- Signup: pass emailRedirectTo=<APP_URL>/auth/confirm, show a
'check your email' confirmation state with a resend action (cooldown),
and handle the already-registered case.
- Login: detect email_not_confirmed and offer a resend-confirmation action;
surface verification_failed errors from the confirm route.
This commit is contained in:
+74
-6
@@ -1,41 +1,110 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import { useEffect, useState, useTransition } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { createSupabaseBrowserClient } from '@/lib/supabase/browser';
|
||||
|
||||
const RESEND_COOLDOWN = 45;
|
||||
|
||||
export default function SignupPage() {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [info, setInfo] = useState<string | null>(null);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [resendInfo, setResendInfo] = useState<string | null>(null);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [isResending, startResend] = useTransition();
|
||||
|
||||
useEffect(() => {
|
||||
if (cooldown <= 0) return;
|
||||
const t = setTimeout(() => setCooldown((c) => c - 1), 1000);
|
||||
return () => clearTimeout(t);
|
||||
}, [cooldown]);
|
||||
|
||||
function onSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setInfo(null);
|
||||
setResendInfo(null);
|
||||
const supabase = createSupabaseBrowserClient();
|
||||
startTransition(async () => {
|
||||
const { data, error } = await supabase.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
options: {
|
||||
emailRedirectTo: `${process.env.NEXT_PUBLIC_APP_URL ?? ''}/auth/confirm`,
|
||||
},
|
||||
});
|
||||
if (error) {
|
||||
setError(error.message);
|
||||
return;
|
||||
}
|
||||
// GoTrue returns a decoy user with an empty `identities` array when the
|
||||
// email is already registered (to avoid leaking existence). Treat it as
|
||||
// "already registered" and point them at login.
|
||||
if (data.user && data.user.identities?.length === 0) {
|
||||
setError(
|
||||
'An account with this email already exists. Try signing in instead.',
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (data.session) {
|
||||
router.push('/dashboard');
|
||||
router.refresh();
|
||||
} else {
|
||||
setInfo('Check your email to confirm, then sign in.');
|
||||
return;
|
||||
}
|
||||
setSubmitted(true);
|
||||
setCooldown(RESEND_COOLDOWN);
|
||||
});
|
||||
}
|
||||
|
||||
function onResend() {
|
||||
setError(null);
|
||||
setResendInfo(null);
|
||||
const supabase = createSupabaseBrowserClient();
|
||||
startResend(async () => {
|
||||
const { error } = await supabase.auth.resend({ type: 'signup', email });
|
||||
if (error) {
|
||||
setError(error.message);
|
||||
return;
|
||||
}
|
||||
setResendInfo('Confirmation email sent. Check your inbox.');
|
||||
setCooldown(RESEND_COOLDOWN);
|
||||
});
|
||||
}
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<div className="card">
|
||||
<h1>Check your email</h1>
|
||||
<p>
|
||||
We sent a confirmation link to <strong>{email}</strong>. Click the
|
||||
link in that email to activate your account, then sign in.
|
||||
</p>
|
||||
{error && <p className="error">{error}</p>}
|
||||
{resendInfo && <p className="success">{resendInfo}</p>}
|
||||
<div className="row" style={{ marginTop: '1rem' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onResend}
|
||||
disabled={isResending || cooldown > 0}
|
||||
>
|
||||
{cooldown > 0
|
||||
? `Resend in ${cooldown}s`
|
||||
: isResending
|
||||
? 'Sending…'
|
||||
: 'Resend confirmation email'}
|
||||
</button>
|
||||
<Link className="muted" href="/login">
|
||||
Back to login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h1>Sign up</h1>
|
||||
@@ -60,7 +129,6 @@ export default function SignupPage() {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
{error && <p className="error">{error}</p>}
|
||||
{info && <p className="success">{info}</p>}
|
||||
<div className="row" style={{ marginTop: '1rem' }}>
|
||||
<button type="submit" disabled={isPending}>
|
||||
{isPending ? 'Creating…' : 'Create account'}
|
||||
|
||||
Reference in New Issue
Block a user