fix: CallbackPage handles verification_pending and merge_pending states

frontend/src/pages/CallbackPage.tsx

@@ -10,15 +10,20 @@ interface SessionResponse {
   data: { user: User };
 }
 
+type PendingState =
+  | { kind: 'verification_pending'; email: string }
+  | { kind: 'merge_pending'; email: string; provider: string };
+
 export default function CallbackPage() {
   const navigate = useNavigate();
   const { setUser } = useAuthContext();
   const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState<PendingState | null>(null);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
 
-    // --- Erreur OAuth explicite (state=error, error=access_denied, etc.) ---
+    // --- Erreur OAuth explicite ---
     const oauthError = params.get('error');
     if (oauthError) {
       const desc = params.get('error_description') ?? oauthError;
@@ -26,6 +31,21 @@ export default function CallbackPage() {
       return;
     }
 
+    // --- Pending states (verification / merge) ---
+    const status = params.get('status');
+    if (status === 'verification_pending') {
+      setPending({ kind: 'verification_pending', email: params.get('email') ?? '' });
+      return;
+    }
+    if (status === 'merge_pending') {
+      setPending({
+        kind: 'merge_pending',
+        email: params.get('email') ?? '',
+        provider: params.get('provider') ?? '',
+      });
+      return;
+    }
+
     // --- Flow PKCE : ?code= présent ---
     const code = params.get('code');
     if (code) {
@@ -38,7 +58,6 @@ export default function CallbackPage() {
 
       exchangeCode(code, verifier, redirectUri)
         .then((tokens) => {
-          // Pass tokens to backend to set httpOnly cookies + sync user
           return apiFetch<SessionResponse>('/auth/session', {
             method: 'POST',
             body: JSON.stringify({
@@ -55,7 +74,7 @@ export default function CallbackPage() {
       return;
     }
 
-    // --- Flow session (Step 2 — token JWT passé en query param) ---
+    // --- Flow session (token JWT en query param) ---
     const token = params.get('token');
     if (token) {
       apiFetch<SessionResponse>('/auth/session', {
@@ -74,6 +93,47 @@ export default function CallbackPage() {
     navigate('/', { replace: true });
   }, [navigate, setUser]);
 
+  // --- Pending UI ---
+  if (pending) {
+    return (
+      <div className="flex flex-col items-center gap-6 pt-20 max-w-md mx-auto text-center">
+        {pending.kind === 'verification_pending' ? (
+          <>
+            <div className="text-4xl">📧</div>
+            <h2 className="text-lg font-semibold text-od-text">Vérifie ton email</h2>
+            <p className="text-sm text-od-muted">
+              Un email de vérification a été envoyé à{' '}
+              <span className="text-od-text font-mono">{pending.email}</span>.
+              <br />
+              Clique sur le lien pour activer ton compte.
+            </p>
+          </>
+        ) : (
+          <>
+            <div className="text-4xl">🔗</div>
+            <h2 className="text-lg font-semibold text-od-text">Fusion de compte</h2>
+            <p className="text-sm text-od-muted">
+              Un compte existe déjà avec l'email{' '}
+              <span className="text-od-text font-mono">{pending.email}</span>.
+              <br />
+              Un email a été envoyé pour fusionner ton compte{' '}
+              <span className="text-od-accent capitalize">{pending.provider}</span>.
+              <br />
+              Clique sur le lien dans l'email pour confirmer.
+            </p>
+          </>
+        )}
+        <a
+          href="/login"
+          className="font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+        >
+          ← Retour à la connexion
+        </a>
+      </div>
+    );
+  }
+
+  // --- Error UI ---
   if (error) {
     return (
       <div className="flex flex-col items-center gap-4 pt-20">