Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(auth): handle google oauth account claim conflicts
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-05-14 21:15:30 +03:30
parent 38ba89b82f
commit cd5409c9b2
4 changed files with 105 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/GoogleAuthCallback.tsx
View File

@@ -39,6 +39,10 @@ export default function GoogleAuthCallback() {
const [mobile, setMobile] = useState("");
const [otpCode, setOtpCode] = useState("");
const [googleEmail, setGoogleEmail] = useState("");
const [flowResolution, setFlowResolution] = useState<
"new_account" | "existing_email_claim" | "existing_mobile_claim" | null
>(null);
const [mobileHint, setMobileHint] = useState<string | null>(null);
const [errorMessage, setErrorMessage] = useState("");
const [cooldowns, setCooldowns] = useState<Record<CooldownKey, number>>({
otpSend: 0,
@@ -93,12 +97,19 @@ export default function GoogleAuthCallback() {
if (payload.status === "collect_mobile") {
setGoogleEmail(payload.email);
setFlowResolution(payload.resolution);
setMobileHint(payload.mobile_hint ?? null);
setErrorMessage("");
setStep("collect_mobile");
return;
}
if (payload.status === "claim_required") {
setMobile(payload.mobile);
setGoogleEmail(payload.email);
setFlowResolution(payload.resolution);
setMobileHint(payload.mobile_hint ?? null);
setErrorMessage("");
setStep("claim_required");
}
};
@@ -174,7 +185,14 @@ export default function GoogleAuthCallback() {
toast.success(t.login.google.claimOtpSent);
}
} catch (error) {
toast.error(error instanceof Error ? error.message : t.login.google.completeFailed);
const message = error instanceof Error ? error.message : t.login.google.completeFailed;
setErrorMessage(message);
if (error instanceof ApiError) {
if (error.code === "google_email_mobile_conflict" || error.code === "google_mobile_belongs_to_other_email") {
setStep("collect_mobile");
}
}
toast.error(message);
} finally {
setLoading(false);
}
@@ -261,12 +279,26 @@ export default function GoogleAuthCallback() {
<p className="text-sm text-slate-500 dark:text-slate-400">
{step === "loading" && t.login.google.loadingDescription}
{step === "collect_mobile" &&
t.login.google.collectMobileDescription(googleEmail || "-")}
{step === "claim_required" && t.login.google.claimDescription(mobile)}
(flowResolution === "existing_email_claim"
? t.login.google.existingEmailClaimDescription(googleEmail || "-", mobileHint || "-")
: t.login.google.collectMobileDescription(googleEmail || "-"))}
{step === "claim_required" &&
(flowResolution === "existing_email_claim"
? t.login.google.claimDescription(mobileHint || mobile)
: t.login.google.mobileClaimDescription(mobile))}
{step === "error" && (errorMessage || t.login.google.loadFailed)}
</p>
</div>
{errorMessage && step !== "error" && (
<div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-start text-red-800 shadow-sm dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-100">
<div className="flex items-start gap-3">
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
<p className="text-sm">{errorMessage}</p>
</div>
</div>
)}
{activeWarning && (
<div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-start text-amber-900 shadow-sm dark:border-amber-900/50 dark:bg-amber-950/40 dark:text-amber-100">
<div className="flex items-start gap-3">
@@ -303,13 +335,21 @@ export default function GoogleAuthCallback() {
<p className="truncate text-sm text-slate-500 dark:text-slate-400">{googleEmail}</p>
</div>
</div>
{flowResolution === "existing_email_claim" && mobileHint && (
<div className="mb-4 rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-800 dark:border-sky-900/50 dark:bg-sky-950/30 dark:text-sky-100">
{t.login.google.mobileHintLabel(mobileHint)}
</div>
)}
<Input
id="google-mobile"
placeholder={t.login.mobilePlaceholder}
type="tel"
dir="ltr"
value={mobile}
onChange={(event) => setMobile(event.target.value)}
onChange={(event) => {
setMobile(event.target.value)
setErrorMessage("")
}}
maxLength={11}
disabled={loading}
className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
@@ -330,7 +370,9 @@ export default function GoogleAuthCallback() {
<form 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">
{t.login.google.claimDescription(mobile)}
{flowResolution === "existing_email_claim"
? t.login.google.claimDescription(mobileHint || mobile)
: t.login.google.mobileClaimDescription(mobile)}
</p>
<Input
id="google-claim-otp"
@@ -338,7 +380,10 @@ export default function GoogleAuthCallback() {
type="text"
dir="ltr"
value={otpCode}
onChange={(event) => setOtpCode(event.target.value)}
onChange={(event) => {
setOtpCode(event.target.value)
setErrorMessage("")
}}
maxLength={6}
disabled={loading}
className="h-11 text-center text-lg tracking-widest"