97 lines
3.7 KiB
TypeScript
97 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { CheckCircle2, XCircle } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { supabase } from "@/lib/supabase";
|
|
|
|
export default function AuthCallbackPage() {
|
|
const router = useRouter();
|
|
const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
|
|
|
|
useEffect(() => {
|
|
// Supabase JS verarbeitet automatisch den ?code= oder #access_token= aus der URL
|
|
// und etabliert die Session (detectSessionInUrl ist standardmäßig aktiviert).
|
|
// Wir warten kurz und prüfen dann die Session.
|
|
const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
|
|
if (event === "SIGNED_IN" && session) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
} else if (event === "TOKEN_REFRESHED" && session) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
}
|
|
});
|
|
|
|
// Fallback: Session direkt prüfen (falls onAuthStateChange zu spät feuert)
|
|
supabase.auth.getSession().then(({ data: { session } }) => {
|
|
if (session) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
} else {
|
|
// Noch kurz warten, Supabase braucht manchmal einen Moment
|
|
setTimeout(() => {
|
|
supabase.auth.getSession().then(({ data: { session: s } }) => {
|
|
if (s) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
} else {
|
|
setStatus("error");
|
|
}
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
|
|
return () => subscription.unsubscribe();
|
|
}, [router]);
|
|
|
|
if (status === "loading") {
|
|
return (
|
|
<div className="min-h-[80vh] flex items-center justify-center px-4">
|
|
<div className="text-center">
|
|
<div className="w-10 h-10 border-2 border-[#f7d334] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
|
<p className="text-slate-500 text-sm">E-Mail-Adresse wird bestätigt…</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (status === "success") {
|
|
return (
|
|
<div className="min-h-[80vh] flex items-center justify-center px-4">
|
|
<div className="w-full max-w-md text-center border border-slate-200 bg-white p-8">
|
|
<div className="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<CheckCircle2 className="w-6 h-6 text-green-600" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-slate-900 mb-2">E-Mail bestätigt!</h2>
|
|
<p className="text-slate-500 text-sm">
|
|
Sie werden automatisch weitergeleitet…
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-[80vh] flex items-center justify-center px-4">
|
|
<div className="w-full max-w-md text-center border border-slate-200 bg-white p-8">
|
|
<div className="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<XCircle className="w-6 h-6 text-red-500" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-slate-900 mb-2">Bestätigung fehlgeschlagen</h2>
|
|
<p className="text-slate-500 text-sm mb-6">
|
|
Der Bestätigungslink ist abgelaufen oder ungültig. Bitte registrieren Sie sich erneut.
|
|
</p>
|
|
<Link
|
|
href="/kunden/registrieren"
|
|
className="inline-flex items-center justify-center bg-[#f7d334] hover:bg-[#fcd34d] text-[#1c1917] rounded-md font-semibold px-6 py-2.5 text-sm transition-all duration-200 hover:scale-110"
|
|
>
|
|
Zur Registrierung
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|