fix(auth): harden google callback otp step

src/pages/GoogleAuthCallback.tsx

@@ -17,6 +17,7 @@ import {
 } from "../api/users";
 import { useTranslation } from "../hooks/useTranslation";
 import { setSessionTokens } from "../lib/session";
+import { AuthOtpInput } from "./auth/AuthOtpInput";
 
 type GoogleStep = "loading" | "collect_mobile" | "claim_required" | "error";
 type CooldownKey = "otpSend" | "otpVerify";
@@ -106,6 +107,7 @@ export default function GoogleAuthCallback() {
 
     if (payload.status === "claim_required") {
       setMobile(payload.mobile);
+      setOtpCode("");
       setGoogleEmail(payload.email);
       setFlowResolution(payload.resolution);
       setMobileHint(payload.mobile_hint ?? null);
@@ -325,7 +327,7 @@ export default function GoogleAuthCallback() {
             )}
 
             {step === "collect_mobile" && (
-              <form onSubmit={handleCompleteSignup} className="grid gap-4">
+              <form key={`collect-mobile-${flowResolution ?? "default"}`} onSubmit={handleCompleteSignup} className="grid gap-4">
                 <div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                   <div className="mb-4 flex items-center gap-3">
                     <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">
@@ -370,7 +372,7 @@ export default function GoogleAuthCallback() {
             )}
 
             {step === "claim_required" && (
-              <form onSubmit={handleVerifyClaim} className="grid gap-4">
+              <form key={`claim-required-${flowResolution ?? "default"}`} onSubmit={handleVerifyClaim} className="grid gap-4">
                 <div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                   <p className="mb-3 text-sm text-slate-500 dark:text-slate-400">
                     {flowResolution === "existing_email_claim"
@@ -379,19 +381,17 @@ export default function GoogleAuthCallback() {
                         ? t.login.google.mobileClaimDescription(mobile)
                         : t.login.sentCodeDesc(mobile)}
                   </p>
-                  <Input
+                  <AuthOtpInput
                     id="google-claim-otp"
-                    placeholder={t.login.otpPlaceholder}
-                    type="text"
-                    dir="ltr"
                     value={otpCode}
-                    onChange={(event) => {
-                      setOtpCode(event.target.value)
+                    disabled={loading}
+                    onChange={(value) => {
+                      setOtpCode(value)
                       setErrorMessage("")
                     }}
-                    maxLength={6}
-                    disabled={loading}
-                    className="h-11 text-center text-lg tracking-widest"
+                    onComplete={(value) => {
+                      setOtpCode(value)
+                    }}
                   />
                 </div>