File size: 7,717 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | "use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { ArrowRight, CheckCircle, LoaderCircle, XCircle } from "lucide-react";
import {
getAuthToken,
getStoredUser,
setAuthSession,
startGoogleSignIn,
} from "@/lib/auth/auth-client";
import type { AuthTokenResponse } from "@/lib/api/types";
import { hydratePendingProductIntentAfterAuthBounded } from "@/lib/onboarding-intent";
function readSafeNextPath(value: string | null): string {
if (!value || !value.startsWith("/") || value.startsWith("//")) return "/study-chat";
return value;
}
function userSafeGoogleError(rawError: string | null): string {
if (!rawError) return "Could not finish Google sign-in right now.";
const normalized = rawError.toLowerCase();
if (normalized.includes("cancel")) return "Google sign-in was cancelled.";
if (normalized.includes("not ready")) return "Google sign-in is not set up yet. Contact support.";
if (normalized.includes("expired") || normalized.includes("already used")) {
return "That Google sign-in attempt expired. Start a fresh sign-in to continue.";
}
return "Could not finish Google sign-in right now.";
}
type Status =
| { kind: "loading" }
| { kind: "redirecting" }
| { kind: "error"; message: string; nextPath: string };
/** Parse the OAuth fragment after hydration so server and first-client markup match. */
export function GoogleCallbackClient() {
const [status, setStatus] = useState<Status>({ kind: "loading" });
useEffect(() => {
const params = new URLSearchParams(window.location.hash.replace(/^#/, ""));
const requestedNextPath = readSafeNextPath(params.get("next"));
window.history.replaceState(null, "", "/auth/google/callback");
let nextStatus: Status;
let shouldRedirect = false;
const callbackError = params.get("error");
const accessToken = params.get("access_token");
const expiresIn = Number(params.get("expires_in"));
const userValue = params.get("user");
if (callbackError) {
nextStatus = {
kind: "error",
message: userSafeGoogleError(callbackError),
nextPath: requestedNextPath,
};
} else if (!accessToken || !userValue || !Number.isFinite(expiresIn) || expiresIn <= 0) {
// The callback fragment is intentionally removed after it is consumed.
// If the student refreshes or revisits this URL after a successful
// exchange, resume the already-valid account instead of showing a false
// sign-in failure.
if (getAuthToken() && getStoredUser()) {
nextStatus = { kind: "redirecting" };
shouldRedirect = true;
} else {
nextStatus = {
kind: "error",
message: "Could not finish Google sign-in right now.",
nextPath: requestedNextPath,
};
}
} else {
try {
const parsedSession: AuthTokenResponse = {
access_token: accessToken,
token_type: params.get("token_type") ?? "bearer",
expires_in: expiresIn,
user: JSON.parse(userValue) as AuthTokenResponse["user"],
};
setAuthSession(parsedSession);
nextStatus = { kind: "redirecting" };
shouldRedirect = true;
} catch {
nextStatus = {
kind: "error",
message: "Session data was malformed. Please try again.",
nextPath: requestedNextPath,
};
}
}
// eslint-disable-next-line react-hooks/set-state-in-effect -- URL hash parsing must happen after hydration.
setStatus(nextStatus);
if (shouldRedirect) {
void hydratePendingProductIntentAfterAuthBounded().then((handoff) => {
// RootLoadingGuard evaluates the freshly persisted account and owns
// the onboarding and session decisions after the full navigation.
// The backend just minted this OAuth token, so holding the callback
// behind another /auth/session request only turns a cold or transient
// API response into a false sign-in failure.
const nextPath = handoff.redirectTo ?? requestedNextPath;
// OAuth changes the authentication identity outside React context.
// A full same-origin navigation guarantees every provider and route
// guard boots from the newly persisted account instead of retaining a
// stale guest state through a client transition.
window.location.replace(nextPath);
}).catch(() => {
// Product-intent hydration is optional post-auth work. It must never
// turn a successfully issued account session into a login-loop screen.
window.location.replace(requestedNextPath);
});
}
}, []);
if (status.kind === "error") {
return (
<section className="w-full max-w-[420px] rounded-[16px] border border-[#e3e1da] bg-[#fcfcfa] p-6 text-center text-[#171716] shadow-[0_18px_50px_rgba(23,23,22,0.08)] sm:p-8">
<div className="mx-auto grid size-12 place-items-center rounded-[12px] border border-[#e2b5b2] bg-[#fff6f5] text-[#b33a3a]">
<XCircle className="size-6" strokeWidth={1.7} aria-hidden="true" />
</div>
<h1 className="mt-5 text-[24px] font-semibold tracking-[-0.035em] text-[#171716]">Sign-in needs another try</h1>
<p className="mt-3 text-sm leading-6 text-[#62635e]" role="alert">
{status.message}
</p>
<div className="mt-6 grid gap-2">
<button
type="button"
onClick={() => startGoogleSignIn({ nextPath: status.nextPath })}
className="inline-flex min-h-11 items-center justify-center gap-2 rounded-[10px] bg-[#171716] px-5 text-sm font-semibold text-white transition hover:bg-[#30302e] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171716] focus-visible:ring-offset-2"
>
Try Google again
<ArrowRight className="size-4" aria-hidden="true" />
</button>
<Link
href="/login"
className="inline-flex min-h-11 items-center justify-center rounded-[10px] px-5 text-sm font-semibold text-[#4f504c] transition hover:bg-[#f5f4f0] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171716] focus-visible:ring-offset-2"
>
Use another sign-in method
</Link>
</div>
</section>
);
}
if (status.kind === "redirecting") {
return (
<section className="w-full max-w-[420px] rounded-[16px] border border-[#e3e1da] bg-[#fcfcfa] p-6 text-center text-[#171716] shadow-[0_18px_50px_rgba(23,23,22,0.08)] sm:p-8">
<div className="mx-auto grid size-12 place-items-center border border-[#b7cdbd] bg-[#f3f8f4] text-[#2f6240]">
<CheckCircle className="size-6" strokeWidth={1.7} aria-hidden="true" />
</div>
<h1 className="mt-5 text-[24px] font-semibold tracking-[-0.035em] text-[#171716]">Welcome to DocDoe</h1>
<p className="mt-2 text-[13px] leading-6 text-[#62635e]" role="status" aria-live="polite">
Taking you to your study workspace…
</p>
</section>
);
}
return (
<section className="w-full max-w-[420px] rounded-[16px] border border-[#e3e1da] bg-[#fcfcfa] p-6 text-center text-[#171716] shadow-[0_18px_50px_rgba(23,23,22,0.08)] sm:p-8">
<LoaderCircle className="mx-auto size-7 animate-spin text-[#4c4d48]" strokeWidth={1.8} aria-hidden="true" />
<h1 className="mt-5 text-[24px] font-semibold tracking-[-0.035em] text-[#171716]">Completing Google sign-in</h1>
<p className="mt-2 text-[13px] leading-6 text-[#62635e]" role="status" aria-live="polite">
Connecting your Google account securely.
</p>
</section>
);
}
|