'use client'; import { CountryPicker } from '@/components/country-picker'; import { Input, Label } from '@/components/input'; import { Logo } from '@/components/logo'; import { Button } from '@/components/ui/button'; import { apiFetch, apiUrl } from '@/lib/api'; import Link from 'next/link'; import { useEffect, useState } from 'react'; const ERROR_COPY: Record = { google_failed: 'Google sign-in could not be completed. Please try again.', google_state: 'Google sign-in expired or was interrupted. Please try again.', github_failed: 'GitHub sign-in could not be completed. Please try again.', github_state: 'GitHub sign-in expired or was interrupted. Please try again.', invalid_phone: 'That phone number does not look right. Check the country and number.', rate_limited: 'Too many requests. Wait a few minutes and try again.', sms_request_failed: 'Could not send the SMS. Check the number and try again.', invalid_or_expired_code: 'That code has expired. Request a new one.', invalid_code: 'Wrong code. Check the SMS and try again.', too_many_attempts: 'Too many wrong attempts. Request a new code.', sms_verify_failed: 'Could not verify the code. Try again.', }; // Country dial codes for the phone-login picker. ~150 entries — every country // with a non-trivial diaspora. Sorted alphabetically by name. Switzerland is // the default (Swiss-built product, Swiss Twilio sender number). const COUNTRIES: { code: string; name: string; dial: string }[] = [ { code: 'AL', name: 'Albania', dial: '+355' }, { code: 'DZ', name: 'Algeria', dial: '+213' }, { code: 'AD', name: 'Andorra', dial: '+376' }, { code: 'AO', name: 'Angola', dial: '+244' }, { code: 'AR', name: 'Argentina', dial: '+54' }, { code: 'AM', name: 'Armenia', dial: '+374' }, { code: 'AW', name: 'Aruba', dial: '+297' }, { code: 'AU', name: 'Australia', dial: '+61' }, { code: 'AT', name: 'Austria', dial: '+43' }, { code: 'AZ', name: 'Azerbaijan', dial: '+994' }, { code: 'BS', name: 'Bahamas', dial: '+1' }, { code: 'BH', name: 'Bahrain', dial: '+973' }, { code: 'BD', name: 'Bangladesh', dial: '+880' }, { code: 'BB', name: 'Barbados', dial: '+1' }, { code: 'BY', name: 'Belarus', dial: '+375' }, { code: 'BE', name: 'Belgium', dial: '+32' }, { code: 'BZ', name: 'Belize', dial: '+501' }, { code: 'BJ', name: 'Benin', dial: '+229' }, { code: 'BM', name: 'Bermuda', dial: '+1' }, { code: 'BT', name: 'Bhutan', dial: '+975' }, { code: 'BO', name: 'Bolivia', dial: '+591' }, { code: 'BA', name: 'Bosnia & Herzegovina', dial: '+387' }, { code: 'BW', name: 'Botswana', dial: '+267' }, { code: 'BR', name: 'Brazil', dial: '+55' }, { code: 'BN', name: 'Brunei', dial: '+673' }, { code: 'BG', name: 'Bulgaria', dial: '+359' }, { code: 'BF', name: 'Burkina Faso', dial: '+226' }, { code: 'KH', name: 'Cambodia', dial: '+855' }, { code: 'CM', name: 'Cameroon', dial: '+237' }, { code: 'CA', name: 'Canada', dial: '+1' }, { code: 'CV', name: 'Cape Verde', dial: '+238' }, { code: 'KY', name: 'Cayman Islands', dial: '+1' }, { code: 'CL', name: 'Chile', dial: '+56' }, { code: 'CN', name: 'China', dial: '+86' }, { code: 'CO', name: 'Colombia', dial: '+57' }, { code: 'CR', name: 'Costa Rica', dial: '+506' }, { code: 'HR', name: 'Croatia', dial: '+385' }, { code: 'CY', name: 'Cyprus', dial: '+357' }, { code: 'CZ', name: 'Czechia', dial: '+420' }, { code: 'DK', name: 'Denmark', dial: '+45' }, { code: 'DO', name: 'Dominican Republic', dial: '+1' }, { code: 'EC', name: 'Ecuador', dial: '+593' }, { code: 'EG', name: 'Egypt', dial: '+20' }, { code: 'SV', name: 'El Salvador', dial: '+503' }, { code: 'EE', name: 'Estonia', dial: '+372' }, { code: 'ET', name: 'Ethiopia', dial: '+251' }, { code: 'FJ', name: 'Fiji', dial: '+679' }, { code: 'FI', name: 'Finland', dial: '+358' }, { code: 'FR', name: 'France', dial: '+33' }, { code: 'GE', name: 'Georgia', dial: '+995' }, { code: 'DE', name: 'Germany', dial: '+49' }, { code: 'GH', name: 'Ghana', dial: '+233' }, { code: 'GR', name: 'Greece', dial: '+30' }, { code: 'GT', name: 'Guatemala', dial: '+502' }, { code: 'HN', name: 'Honduras', dial: '+504' }, { code: 'HK', name: 'Hong Kong', dial: '+852' }, { code: 'HU', name: 'Hungary', dial: '+36' }, { code: 'IS', name: 'Iceland', dial: '+354' }, { code: 'IN', name: 'India', dial: '+91' }, { code: 'ID', name: 'Indonesia', dial: '+62' }, { code: 'IR', name: 'Iran', dial: '+98' }, { code: 'IQ', name: 'Iraq', dial: '+964' }, { code: 'IE', name: 'Ireland', dial: '+353' }, { code: 'IL', name: 'Israel', dial: '+972' }, { code: 'IT', name: 'Italy', dial: '+39' }, { code: 'CI', name: 'Ivory Coast', dial: '+225' }, { code: 'JM', name: 'Jamaica', dial: '+1' }, { code: 'JP', name: 'Japan', dial: '+81' }, { code: 'JO', name: 'Jordan', dial: '+962' }, { code: 'KZ', name: 'Kazakhstan', dial: '+7' }, { code: 'KE', name: 'Kenya', dial: '+254' }, { code: 'XK', name: 'Kosovo', dial: '+383' }, { code: 'KW', name: 'Kuwait', dial: '+965' }, { code: 'KG', name: 'Kyrgyzstan', dial: '+996' }, { code: 'LA', name: 'Laos', dial: '+856' }, { code: 'LV', name: 'Latvia', dial: '+371' }, { code: 'LB', name: 'Lebanon', dial: '+961' }, { code: 'LY', name: 'Libya', dial: '+218' }, { code: 'LI', name: 'Liechtenstein', dial: '+423' }, { code: 'LT', name: 'Lithuania', dial: '+370' }, { code: 'LU', name: 'Luxembourg', dial: '+352' }, { code: 'MO', name: 'Macau', dial: '+853' }, { code: 'MK', name: 'North Macedonia', dial: '+389' }, { code: 'MG', name: 'Madagascar', dial: '+261' }, { code: 'MY', name: 'Malaysia', dial: '+60' }, { code: 'MV', name: 'Maldives', dial: '+960' }, { code: 'MT', name: 'Malta', dial: '+356' }, { code: 'MX', name: 'Mexico', dial: '+52' }, { code: 'MD', name: 'Moldova', dial: '+373' }, { code: 'MC', name: 'Monaco', dial: '+377' }, { code: 'MN', name: 'Mongolia', dial: '+976' }, { code: 'ME', name: 'Montenegro', dial: '+382' }, { code: 'MA', name: 'Morocco', dial: '+212' }, { code: 'MZ', name: 'Mozambique', dial: '+258' }, { code: 'MM', name: 'Myanmar', dial: '+95' }, { code: 'NA', name: 'Namibia', dial: '+264' }, { code: 'NP', name: 'Nepal', dial: '+977' }, { code: 'NL', name: 'Netherlands', dial: '+31' }, { code: 'NZ', name: 'New Zealand', dial: '+64' }, { code: 'NI', name: 'Nicaragua', dial: '+505' }, { code: 'NG', name: 'Nigeria', dial: '+234' }, { code: 'NO', name: 'Norway', dial: '+47' }, { code: 'OM', name: 'Oman', dial: '+968' }, { code: 'PK', name: 'Pakistan', dial: '+92' }, { code: 'PS', name: 'Palestine', dial: '+970' }, { code: 'PA', name: 'Panama', dial: '+507' }, { code: 'PG', name: 'Papua New Guinea', dial: '+675' }, { code: 'PY', name: 'Paraguay', dial: '+595' }, { code: 'PE', name: 'Peru', dial: '+51' }, { code: 'PH', name: 'Philippines', dial: '+63' }, { code: 'PL', name: 'Poland', dial: '+48' }, { code: 'PT', name: 'Portugal', dial: '+351' }, { code: 'PR', name: 'Puerto Rico', dial: '+1' }, { code: 'QA', name: 'Qatar', dial: '+974' }, { code: 'RO', name: 'Romania', dial: '+40' }, { code: 'RU', name: 'Russia', dial: '+7' }, { code: 'RW', name: 'Rwanda', dial: '+250' }, { code: 'SM', name: 'San Marino', dial: '+378' }, { code: 'SA', name: 'Saudi Arabia', dial: '+966' }, { code: 'SN', name: 'Senegal', dial: '+221' }, { code: 'RS', name: 'Serbia', dial: '+381' }, { code: 'SG', name: 'Singapore', dial: '+65' }, { code: 'SK', name: 'Slovakia', dial: '+421' }, { code: 'SI', name: 'Slovenia', dial: '+386' }, { code: 'SO', name: 'Somalia', dial: '+252' }, { code: 'ZA', name: 'South Africa', dial: '+27' }, { code: 'KR', name: 'South Korea', dial: '+82' }, { code: 'ES', name: 'Spain', dial: '+34' }, { code: 'LK', name: 'Sri Lanka', dial: '+94' }, { code: 'SD', name: 'Sudan', dial: '+249' }, { code: 'SE', name: 'Sweden', dial: '+46' }, { code: 'CH', name: 'Switzerland', dial: '+41' }, { code: 'SY', name: 'Syria', dial: '+963' }, { code: 'TW', name: 'Taiwan', dial: '+886' }, { code: 'TJ', name: 'Tajikistan', dial: '+992' }, { code: 'TZ', name: 'Tanzania', dial: '+255' }, { code: 'TH', name: 'Thailand', dial: '+66' }, { code: 'TT', name: 'Trinidad & Tobago', dial: '+1' }, { code: 'TN', name: 'Tunisia', dial: '+216' }, { code: 'TR', name: 'Turkey', dial: '+90' }, { code: 'TM', name: 'Turkmenistan', dial: '+993' }, { code: 'UG', name: 'Uganda', dial: '+256' }, { code: 'UA', name: 'Ukraine', dial: '+380' }, { code: 'AE', name: 'United Arab Emirates', dial: '+971' }, { code: 'GB', name: 'United Kingdom', dial: '+44' }, { code: 'US', name: 'United States', dial: '+1' }, { code: 'UY', name: 'Uruguay', dial: '+598' }, { code: 'UZ', name: 'Uzbekistan', dial: '+998' }, { code: 'VE', name: 'Venezuela', dial: '+58' }, { code: 'VN', name: 'Vietnam', dial: '+84' }, { code: 'YE', name: 'Yemen', dial: '+967' }, { code: 'ZM', name: 'Zambia', dial: '+260' }, { code: 'ZW', name: 'Zimbabwe', dial: '+263' }, ]; function dialFor(code: string): string { return COUNTRIES.find((c) => c.code === code)?.dial ?? '+41'; } /** Combine a dial code and a locally-typed number into strict E.164. */ function toE164(dial: string, local: string): string { const digits = local.replace(/\D/g, '').replace(/^0+/, ''); return dial + digits; } function errCode(err: unknown): string { const detail = (err as { detail?: { error?: string } }).detail; return detail?.error ?? (err as Error).message ?? 'unknown'; } export default function LoginPage() { const [providers, setProviders] = useState({ google: false, github: false, sms: false, email: false, }); // Default to SMS — email is off by default until an SMTP/Resend provider // is wired. The effect below flips to 'email' if the backend says it's on. const [method, setMethod] = useState<'email' | 'phone'>('phone'); const [error, setError] = useState(null); // Email magic-link const [email, setEmail] = useState(''); const [emailState, setEmailState] = useState<'idle' | 'sending' | 'sent'>('idle'); // SMS one-time code const [country, setCountry] = useState('CH'); const [phoneLocal, setPhoneLocal] = useState(''); const [sentTo, setSentTo] = useState(''); const [code, setCode] = useState(''); const [smsStep, setSmsStep] = useState<'phone' | 'code'>('phone'); const [smsBusy, setSmsBusy] = useState(false); useEffect(() => { apiFetch<{ google: boolean; github: boolean; sms: boolean; email: boolean }>( '/v1/auth/providers', ) .then((p) => { setProviders(p); // Pick the most-likely method up-front: email if enabled, else SMS. if (p.email) setMethod('email'); else if (p.sms) setMethod('phone'); }) .catch(() => undefined); const err = new URLSearchParams(window.location.search).get('error'); if (err) setError(ERROR_COPY[err] ?? 'Sign-in failed. Please try again.'); }, []); async function sendMagicLink(e: React.FormEvent) { e.preventDefault(); setEmailState('sending'); setError(null); try { await apiFetch('/v1/auth/magic-link', { method: 'POST', body: JSON.stringify({ email }) }); setEmailState('sent'); } catch (err) { setEmailState('idle'); setError(ERROR_COPY[errCode(err)] ?? 'Could not send the link.'); } } async function requestSmsCode(e: React.FormEvent) { e.preventDefault(); setSmsBusy(true); setError(null); const full = toE164(dialFor(country), phoneLocal); try { await apiFetch('/v1/auth/sms/request', { method: 'POST', body: JSON.stringify({ phone: full }), }); setSentTo(full); setSmsStep('code'); } catch (err) { setError(ERROR_COPY[errCode(err)] ?? 'Could not send the SMS.'); } finally { setSmsBusy(false); } } async function verifySmsCode(e: React.FormEvent) { e.preventDefault(); setSmsBusy(true); setError(null); try { await apiFetch('/v1/auth/sms/verify', { method: 'POST', body: JSON.stringify({ phone: sentTo, code }), }); window.location.href = '/dashboard'; } catch (err) { setError(ERROR_COPY[errCode(err)] ?? 'Could not verify the code.'); setSmsBusy(false); } } const hasOAuth = providers.google || providers.github; return (

Sign in to your workspace

Passwordless — pick whichever is easiest.

{hasOAuth && (
{providers.google && ( Continue with Google )} {providers.github && ( Continue with GitHub )}
)} {hasOAuth && (
or
)} {/* Tab toggle only shown when BOTH email and SMS are enabled — if just one is configured, that method's form renders directly without a useless one-tab toggle. */} {providers.sms && providers.email && (
{(['email', 'phone'] as const).map((m) => ( ))}
)}
{method === 'email' && providers.email && emailState !== 'sent' && (
setEmail(e.target.value)} placeholder="you@company.com" />
)} {method === 'email' && providers.email && emailState === 'sent' && (

Magic link sent to {email}.

Open it on this device to finish signing in.

)} {method === 'phone' && smsStep === 'phone' && (
setPhoneLocal(e.target.value)} placeholder="79 123 45 67" />
)} {method === 'phone' && smsStep === 'code' && (
setCode(e.target.value.replace(/\D/g, ''))} placeholder="123456" className="mono tracking-[0.3em]" />
)} {error &&

{error}

}
← Back to home
); } function GoogleIcon() { return ( ); } function GitHubIcon() { return ( ); }