generated from muhtadeetaron/nextjs-template
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect } from "react";
|
||
import { useAuthStore } from "@/stores/authStore";
|
||
import { useRouter, usePathname } from "next/navigation";
|
||
|
||
export default function AuthInitializer({
|
||
children,
|
||
}: {
|
||
children: React.ReactNode;
|
||
}) {
|
||
const { initializeAuth, token, hydrated } = useAuthStore();
|
||
const router = useRouter();
|
||
const pathname = usePathname();
|
||
|
||
// 1️⃣ Run initialization once
|
||
useEffect(() => {
|
||
initializeAuth();
|
||
}, [initializeAuth]);
|
||
|
||
// 2️⃣ Run routing logic only after hydration
|
||
useEffect(() => {
|
||
if (!hydrated) return;
|
||
|
||
const publicPages = ["/", "/login", "/register"];
|
||
|
||
if (token) {
|
||
if (publicPages.includes(pathname)) {
|
||
router.replace("/home");
|
||
}
|
||
} else {
|
||
if (!publicPages.includes(pathname)) {
|
||
router.replace("/login");
|
||
}
|
||
}
|
||
}, [pathname, token, hydrated, router]);
|
||
|
||
// 3️⃣ Show loading until hydrated
|
||
if (!hydrated) {
|
||
return (
|
||
<div className="min-h-screen flex flex-col justify-center items-center gap-3">
|
||
<div className="animate-spin rounded-full h-20 w-20 border-b-2 border-blue-500"></div>
|
||
<p className="text-2xl font-semibold tracking-tighter">Loading...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return <>{children}</>;
|
||
}
|