128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { Suspense, useEffect, useState } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { storeAuthTokens } from "@/lib/api";
|
|
|
|
type ApiResponse<T> = {
|
|
data: T;
|
|
meta: { timestamp: string; version: "v1" };
|
|
error: null | { message: string; code?: string };
|
|
};
|
|
|
|
type SocialAuthData = {
|
|
user: { id: string; email: string; fullName?: string; emailVerified?: boolean };
|
|
accessToken?: string;
|
|
refreshToken?: string;
|
|
next?: string;
|
|
};
|
|
|
|
function decodeProvider(state: string | null) {
|
|
if (!state) return "";
|
|
try {
|
|
const [body] = state.split(".");
|
|
const normalized = body.replace(/-/g, "+").replace(/_/g, "/").padEnd(Math.ceil(body.length / 4) * 4, "=");
|
|
const json = JSON.parse(atob(normalized)) as { provider?: string };
|
|
return json.provider === "apple" || json.provider === "google" ? json.provider : "";
|
|
} catch {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function SocialCallbackContent() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
|
|
const [message, setMessage] = useState("Completing sign in...");
|
|
|
|
useEffect(() => {
|
|
const error = searchParams.get("error");
|
|
const code = searchParams.get("code");
|
|
const state = searchParams.get("state");
|
|
const provider = decodeProvider(state);
|
|
|
|
if (error) {
|
|
setStatus("error");
|
|
setMessage(error === "access_denied" ? "You declined social sign in." : `Provider returned an error: ${error}`);
|
|
return;
|
|
}
|
|
if (!provider || !code || !state) {
|
|
setStatus("error");
|
|
setMessage("Social sign in callback is missing required data.");
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/auth/social/${provider}/callback`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ code, state }),
|
|
})
|
|
.then(async (res) => {
|
|
const payload = (await res.json()) as ApiResponse<SocialAuthData>;
|
|
if (!res.ok || payload.error) throw new Error(payload.error?.message ?? "Social sign in failed.");
|
|
storeAuthTokens({
|
|
user: payload.data.user,
|
|
});
|
|
setStatus("success");
|
|
setMessage(`Signed in as ${payload.data.user.email}.`);
|
|
setTimeout(() => router.replace(payload.data.next || "/app"), 800);
|
|
})
|
|
.catch((err: Error) => {
|
|
setStatus("error");
|
|
setMessage(err.message || "Social sign in failed.");
|
|
});
|
|
}, [router, searchParams]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background px-6">
|
|
<div className="glass-panel rounded-2xl p-10 text-center max-w-sm w-full shadow-lg">
|
|
{status === "loading" && (
|
|
<>
|
|
<div className="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin mx-auto mb-4" />
|
|
<p className="text-sm text-muted-foreground">{message}</p>
|
|
</>
|
|
)}
|
|
{status === "success" && (
|
|
<>
|
|
<div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-4">
|
|
<svg className="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-sm font-semibold text-foreground">Signed in</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{message}</p>
|
|
</>
|
|
)}
|
|
{status === "error" && (
|
|
<>
|
|
<div className="h-12 w-12 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-4">
|
|
<svg className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-sm font-semibold text-foreground">Sign in failed</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{message}</p>
|
|
<button onClick={() => router.replace("/login")} className="mt-4 text-xs text-primary hover:underline">
|
|
Back to sign in
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SocialCallbackPage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<div className="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin" />
|
|
</div>
|
|
}
|
|
>
|
|
<SocialCallbackContent />
|
|
</Suspense>
|
|
);
|
|
}
|