// ── Auth — custom Clerk forms (sign in / sign up / reset) ────────── // Uses clerk-js from the CDN (window.__clerk) directly, with a gorgeous, // responsive split layout in the PaintMini home aesthetic. function Auth({ navigate, initialMode = 'signup', onAuth }) { // mode: 'signin' | 'signup' | 'forgot' // phase: which step within the mode const [mode, setMode] = useState(initialMode === 'signin' ? 'signin' : 'signup'); const [phase, setPhase] = useState('form'); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [newPassword, setNewPassword] = useState(''); const [code, setCode] = useState(''); const [secondStrategy, setSecondStrategy] = useState('totp'); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); const clerk = () => window.__clerk; function switchMode(m) { setMode(m); setPhase('form'); setError(null); setCode(''); setPassword(''); setNewPassword(''); } function errMsg(err) { return err?.errors?.[0]?.longMessage || err?.errors?.[0]?.message || err?.message || 'Something went wrong. Try again.'; } async function done() { try { const { user } = await Api.me(); if (onAuth) onAuth(user); else navigate('studio'); } catch { navigate('studio'); } } // ── Sign in ────────────────────────────────────────────────────── async function submitSignIn(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); if (!c) throw new Error('Auth is still loading — one moment.'); const si = await c.client.signIn.create({ identifier: email, password }); if (si.status === 'complete') { await c.setActive({ session: si.createdSessionId }); return done(); } if (si.status === 'needs_first_factor') { const f = (si.supportedFirstFactors || []).find(x => x.strategy === 'email_code'); if (f?.emailAddressId) { await c.client.signIn.prepareFirstFactor({ strategy: 'email_code', emailAddressId: f.emailAddressId }); setSecondStrategy('email_code'); setPhase('verify'); return; } throw new Error('This account needs a verification method that isn’t available here.'); } if (si.status === 'needs_second_factor') { const factors = si.supportedSecondFactors || []; const totp = factors.find(f => f.strategy === 'totp'); const phone = factors.find(f => f.strategy === 'phone_code'); if (phone && !totp) { await si.prepareSecondFactor({ strategy: 'phone_code', phoneNumberId: phone.phoneNumberId }); setSecondStrategy('phone_code'); } else setSecondStrategy('totp'); setPhase('two-factor'); return; } throw new Error('Sign-in needs additional steps: ' + si.status); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } async function verifySignInCode(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); const res = await c.client.signIn.attemptFirstFactor({ strategy: 'email_code', code }); if (res.status === 'complete') { await c.setActive({ session: res.createdSessionId }); return done(); } throw new Error('Verification incomplete: ' + res.status); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } async function verifySecondFactor(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); const res = await c.client.signIn.attemptSecondFactor({ strategy: secondStrategy, code }); if (res.status === 'complete') { await c.setActive({ session: res.createdSessionId }); return done(); } throw new Error('Two-factor incomplete: ' + res.status); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } // ── Sign up ────────────────────────────────────────────────────── async function submitSignUp(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); if (!c) throw new Error('Auth is still loading — one moment.'); const first = name.split(' ')[0] || undefined; const last = name.split(' ').slice(1).join(' ') || undefined; const su = await c.client.signUp.create({ emailAddress: email, password, firstName: first, lastName: last }); if (su.status === 'complete') { await c.setActive({ session: su.createdSessionId }); return done(); } await su.prepareEmailAddressVerification({ strategy: 'email_code' }); setPhase('verify'); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } async function verifySignUpCode(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); const res = await c.client.signUp.attemptEmailAddressVerification({ code }); if (res.status === 'complete') { await c.setActive({ session: res.createdSessionId }); return done(); } throw new Error('Verification incomplete: ' + res.status); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } // ── Forgot / reset password ────────────────────────────────────── async function requestReset(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); if (!c) throw new Error('Auth is still loading — one moment.'); await c.client.signIn.create({ strategy: 'reset_password_email_code', identifier: email }); setPhase('reset'); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } async function submitReset(e) { e.preventDefault(); setError(null); setBusy(true); try { const c = clerk(); const res = await c.client.signIn.attemptFirstFactor({ strategy: 'reset_password_email_code', code, password: newPassword }); if (res.status === 'complete') { await c.setActive({ session: res.createdSessionId }); return done(); } throw new Error('Reset needs additional steps: ' + res.status); } catch (err) { setError(errMsg(err)); } finally { setBusy(false); } } async function resend() { setError(null); try { const c = clerk(); if (mode === 'signup') await c.client.signUp.prepareEmailAddressVerification({ strategy: 'email_code' }); else if (mode === 'forgot') await c.client.signIn.create({ strategy: 'reset_password_email_code', identifier: email }); else if (mode === 'signin') { const f = (c.client.signIn.supportedFirstFactors || []).find(x => x.strategy === 'email_code'); if (f?.emailAddressId) await c.client.signIn.prepareFirstFactor({ strategy: 'email_code', emailAddressId: f.emailAddressId }); } } catch (err) { setError(errMsg(err)); } } // ── Copy per screen ────────────────────────────────────────────── const isSignUp = mode === 'signup'; const heads = { 'signin-form': { eb: 'sign in', h: 'Welcome back.', p: 'Pick up where you left off — every design is saved.' }, 'signup-form': { eb: 'create account', h: 'Set up your studio.', p: 'Free forever. One free credit to render your first scheme.' }, 'forgot-form': { eb: 'password reset', h: 'Forgot password?', p: 'Enter your email and we’ll send a 6-digit code to reset it.' }, 'verify': { eb: 'email code', h: 'Check your inbox.', p: <>We sent a 6-digit code to {email}. Enter it below to continue. }, 'two-factor': { eb: 'two-factor', h: 'One more step.', p: secondStrategy === 'phone_code' ? 'Enter the code we texted to your phone.' : 'Enter the current code from your authenticator app.' }, 'reset': { eb: 'reset · code', h: 'Set a new password.', p: <>Code sent to {email}. Enter it with your new password. }, }; const key = phase === 'form' ? `${mode}-form` : phase; const copy = heads[key] || heads['signin-form']; const codeInput = (val, set) => (
set(e.target.value)} maxLength={6} required autoFocus />
); return (
{/* Brand panel (desktop) */} {/* Form panel */}
{ e.preventDefault(); navigate('home'); }} style={{ display: 'flex' }}> PaintMini
{mode === 'signup' ? <>Have an account? switchMode('signin')}>Sign in → : <>New here? switchMode('signup')}>Create account →}
{copy.eb}

{copy.h}

{copy.p}

{error &&
{error}
} {/* ── SIGN IN — credentials ── */} {mode === 'signin' && phase === 'form' && (
setEmail(e.target.value)} required />
setPassword(e.target.value)} required minLength={8} />
)} {/* ── SIGN UP — form ── */} {mode === 'signup' && phase === 'form' && (
setName(e.target.value)} />
setEmail(e.target.value)} required />
setPassword(e.target.value)} required minLength={8} />
By continuing you agree to the terms & privacy policy.
)} {/* ── FORGOT — request ── */} {mode === 'forgot' && phase === 'form' && (
setEmail(e.target.value)} required />
)} {/* ── VERIFY (signup email OR signin email-code) ── */} {phase === 'verify' && (
{codeInput(code, setCode)}
)} {/* ── TWO-FACTOR ── */} {phase === 'two-factor' && (
setCode(e.target.value)} maxLength={8} required autoFocus />
)} {/* ── RESET (code + new password) ── */} {phase === 'reset' && (
{codeInput(code, setCode)}
setNewPassword(e.target.value)} required minLength={8} />
)}
); } Object.assign(window, { Auth });