Mobile friendly, lint correction, typescript error clear

components/auth/RequireAuth.tsx

@@ -1,23 +1,32 @@
 "use client";
 
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useSyncExternalStore } from "react";
+
+function subscribe(callback: () => void) {
+  if (typeof window === "undefined") return () => {};
+  window.addEventListener("storage", callback);
+  return () => window.removeEventListener("storage", callback);
+}
+
+function getSnapshot() {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("ct_token");
+}
 
 export function RequireAuth({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
-  const [ready, setReady] = useState(false);
+  const token = useSyncExternalStore(subscribe, getSnapshot, () => null);
+  const hasToken = Boolean(token);
 
   useEffect(() => {
-    const token = localStorage.getItem("ct_token");
-    if (!token) {
+    if (!hasToken) {
       router.replace("/login");
-      return;
     }
-    setReady(true);
-  }, [router, pathname]);
+  }, [router, pathname, hasToken]);
 
-  if (!ready) {
+  if (!hasToken) {
     return (
       <div className="min-h-screen bg-black text-zinc-200 flex items-center justify-center">
         Loading…