Session 13: The Slate, Africa geo-restriction, OAuth providers, PropRow + GameCard (1311 tests)

web/src/app/signup/page.tsx

@@ -10,7 +10,7 @@ function SignupInner() {
   const router = useRouter();
   const search = useSearchParams();
   const next = search.get('next') || '/dashboard';
-  const { signUp, signInWithGoogle } = useAuth();
+  const { signUp, signInWithProvider } = useAuth();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -40,9 +40,17 @@ function SignupInner() {
     setTimeout(() => router.replace(next), 1500);
   };
 
-  const handleGoogle = async () => {
+  // Session 13 — generic OAuth dispatch. Same provider buttons as
+  // the login page; same graceful-error contract for unconfigured
+  // providers (Apple/X).
+  const handleOAuth = async (provider: 'google' | 'apple' | 'twitter') => {
     setBusy(true);
-    await signInWithGoogle();
+    setError('');
+    const { error: err } = await signInWithProvider(provider);
+    if (err) {
+      setError(err);
+      setBusy(false);
+    }
   };
 
   if (done) {
@@ -75,9 +83,17 @@ function SignupInner() {
           5 free reads every month. Your first read is fully unlocked. No credit card.
         </p>
 
-        <button onClick={handleGoogle} disabled={busy} className="btn-ghost" style={{ width: '100%', marginBottom: 16, padding: 12 }}>
-          Continue with Google
-        </button>
+        <div style={{ display: 'grid', gap: 8, marginBottom: 16 }}>
+          <button onClick={() => handleOAuth('google')} disabled={busy} className="btn-ghost" style={{ width: '100%', padding: 12 }}>
+            Continue with Google
+          </button>
+          <button onClick={() => handleOAuth('apple')} disabled={busy} className="btn-ghost" style={{ width: '100%', padding: 12 }}>
+            Continue with Apple
+          </button>
+          <button onClick={() => handleOAuth('twitter')} disabled={busy} className="btn-ghost" style={{ width: '100%', padding: 12 }}>
+            Continue with X
+          </button>
+        </div>
 
         <div style={dividerStyle}>
           <span style={dividerLine} />