nextauthz 1.1.9 → 1.2.1

package/dist/index.d.mts

@@ -2,9 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 
-type AuthContextType<UserType> = {
+type User$1 = {
+    [key: string]: any;
+};
+
+type AuthContextType<UserType extends User$1> = {
     user: UserType | null;
-    login: (tokens: Record<string, string>, user: UserType) => void;
+    login: (tokens: Record<string, string>, userData: UserType) => void;
     logout: () => void;
     setUser: (user: UserType) => void;
     loading: boolean;
@@ -15,27 +19,22 @@ type AuthGuardProps = {
     children: React__default.ReactNode;
     redirectTo?: string;
     tokenKey?: string;
-    refreshToken?: () => Promise<string | null>;
 };
-declare const AuthGuard: ({ children, redirectTo, tokenKey, refreshToken, }: AuthGuardProps) => react_jsx_runtime.JSX.Element | null;
+declare const AuthGuard: ({ children, redirectTo, tokenKey, }: AuthGuardProps) => react_jsx_runtime.JSX.Element;
 
 type RoleGuardProps = {
     children: React__default.ReactNode;
     allowedRoles: string[];
     redirectTo?: string;
 };
-declare const RoleGuard: ({ children, allowedRoles, redirectTo, }: RoleGuardProps) => react_jsx_runtime.JSX.Element;
+declare const RoleGuard: ({ children, allowedRoles, redirectTo, }: RoleGuardProps) => react_jsx_runtime.JSX.Element | null;
 
 type User = any;
 declare function createAppAuth(storage?: 'localStorage' | 'sessionStorage' | 'cookie'): {
     AuthProvider: ({ children }: {
         children: React.ReactNode;
     }) => react_jsx_runtime.JSX.Element;
-    useAuth: () => AuthContextType<any>;
+    useAuth: () => AuthContextType<User$1>;
 };
-declare const AuthProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-declare const useAuth: () => AuthContextType<any>;
 
-export { AuthGuard, AuthProvider, RoleGuard, type User, createAppAuth, useAuth };
+export { AuthGuard, RoleGuard, type User, createAppAuth };

package/dist/index.d.ts

@@ -2,9 +2,13 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
 
-type AuthContextType<UserType> = {
+type User$1 = {
+    [key: string]: any;
+};
+
+type AuthContextType<UserType extends User$1> = {
     user: UserType | null;
-    login: (tokens: Record<string, string>, user: UserType) => void;
+    login: (tokens: Record<string, string>, userData: UserType) => void;
     logout: () => void;
     setUser: (user: UserType) => void;
     loading: boolean;
@@ -15,27 +19,22 @@ type AuthGuardProps = {
     children: React__default.ReactNode;
     redirectTo?: string;
     tokenKey?: string;
-    refreshToken?: () => Promise<string | null>;
 };
-declare const AuthGuard: ({ children, redirectTo, tokenKey, refreshToken, }: AuthGuardProps) => react_jsx_runtime.JSX.Element | null;
+declare const AuthGuard: ({ children, redirectTo, tokenKey, }: AuthGuardProps) => react_jsx_runtime.JSX.Element;
 
 type RoleGuardProps = {
     children: React__default.ReactNode;
     allowedRoles: string[];
     redirectTo?: string;
 };
-declare const RoleGuard: ({ children, allowedRoles, redirectTo, }: RoleGuardProps) => react_jsx_runtime.JSX.Element;
+declare const RoleGuard: ({ children, allowedRoles, redirectTo, }: RoleGuardProps) => react_jsx_runtime.JSX.Element | null;
 
 type User = any;
 declare function createAppAuth(storage?: 'localStorage' | 'sessionStorage' | 'cookie'): {
     AuthProvider: ({ children }: {
         children: React.ReactNode;
     }) => react_jsx_runtime.JSX.Element;
-    useAuth: () => AuthContextType<any>;
+    useAuth: () => AuthContextType<User$1>;
 };
-declare const AuthProvider: ({ children }: {
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-declare const useAuth: () => AuthContextType<any>;
 
-export { AuthGuard, AuthProvider, RoleGuard, type User, createAppAuth, useAuth };
+export { AuthGuard, RoleGuard, type User, createAppAuth };

package/dist/index.js

@@ -22,10 +22,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AuthGuard: () => AuthGuard_default,
-  AuthProvider: () => AuthProvider,
   RoleGuard: () => RoleGuard_default,
-  createAppAuth: () => createAppAuth,
-  useAuth: () => useAuth
+  createAppAuth: () => createAppAuth
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -39,88 +37,89 @@ var useAuthStore = (0, import_zustand.create)((set) => ({
   user: null,
   isAuthenticated: false,
   isAuthChecked: false,
+  loading: true,
+  // start as loading
   error: null,
   setUser: (user) => set({ user }),
   setAuth: (isAuth) => set({ isAuthenticated: isAuth }),
   setAuthChecked: (checked) => set({ isAuthChecked: checked }),
+  setLoading: (loading) => set({ loading }),
   setError: (err) => set({ error: err }),
   resetAuth: () => set({
     user: null,
     isAuthenticated: false,
     isAuthChecked: false,
+    loading: false,
     error: null
   })
 }));
 
 // src/AuthProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function createAuthContext(options) {
-  const AuthContext = (0, import_react.createContext)(null);
-  const AuthProvider2 = ({ children }) => {
-    const storageType = options?.storage || "cookie";
-    (0, import_react.useEffect)(() => {
-      (0, import_react_token_manager.configureTokenManager)({ storage: storageType });
-    }, [storageType]);
+function createAuthContext(options = {}) {
+  const { storage = "cookie" } = options;
+  const AuthContext = (0, import_react.createContext)(
+    void 0
+  );
+  const AuthProvider = ({ children }) => {
+    const configuredRef = (0, import_react.useRef)(false);
     const manager = (0, import_react_token_manager.useTokenManager)();
-    const [loading, setLoading] = (0, import_react.useState)(true);
-    const rawUser = useAuthStore((state) => state.user);
-    const error = useAuthStore((state) => state.error);
-    const user = rawUser;
+    const { user, loading, error, setUser, setLoading, setError, resetAuth } = useAuthStore();
+    (0, import_react.useEffect)(() => {
+      if (!configuredRef.current) {
+        (0, import_react_token_manager.configureTokenManager)({ storage });
+        configuredRef.current = true;
+      }
+    }, [storage]);
     (0, import_react.useEffect)(() => {
-      const savedUser = manager.getSingleToken("user");
-      if (savedUser) {
-        try {
-          const parsedUser = JSON.parse(savedUser);
-          useAuthStore.getState().setUser(parsedUser);
-          useAuthStore.getState().setError(null);
-        } catch {
-          useAuthStore.getState().resetAuth();
-          useAuthStore.getState().setError(
-            new Error("Failed to parse saved user")
-          );
+      try {
+        const savedUser = manager.getSingleToken("user");
+        if (savedUser) {
+          setUser(JSON.parse(savedUser));
         }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setLoading(false);
       }
-      setLoading(false);
-    }, [manager]);
-    const setUser = (userData) => {
-      useAuthStore.getState().setUser(userData);
-      useAuthStore.getState().setError(null);
-      manager.setTokens({ user: JSON.stringify(userData) });
-    };
+    }, [manager, setUser, setLoading, setError]);
     const login = (tokens, userData) => {
       try {
-        manager.setTokens(tokens);
+        manager.setTokens({ ...tokens, user: JSON.stringify(userData) });
         setUser(userData);
       } catch (err) {
-        useAuthStore.getState().setError(
-          err instanceof Error ? err : new Error(String(err))
-        );
+        setError(err instanceof Error ? err : new Error(String(err)));
       }
     };
     const logout = () => {
       try {
         manager.clearTokens();
-        useAuthStore.getState().resetAuth();
+        resetAuth();
       } catch (err) {
-        useAuthStore.getState().setError(
-          err instanceof Error ? err : new Error(String(err))
-        );
+        setError(err instanceof Error ? err : new Error(String(err)));
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       AuthContext.Provider,
       {
-        value: { user, login, logout, setUser, loading, error },
+        value: {
+          user,
+          login,
+          logout,
+          setUser: (u) => setUser(u),
+          loading,
+          error
+        },
         children
       }
     );
   };
-  const useAuth2 = () => {
+  const useAuth = () => {
     const ctx = (0, import_react.useContext)(AuthContext);
     if (!ctx) throw new Error("useAuth must be used inside AuthProvider");
     return ctx;
   };
-  return { AuthProvider: AuthProvider2, useAuth: useAuth2 };
+  return { AuthProvider, useAuth };
 }
 
 // src/AuthGuard.tsx
@@ -131,48 +130,25 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   redirectTo = "/login",
-  tokenKey = "access_token",
-  refreshToken
+  tokenKey = "access_token"
 }) => {
-  const manager = (0, import_react_token_manager2.useTokenManager)();
   const router = (0, import_navigation.useRouter)();
-  const isAuthChecked = useAuthStore((state) => state.isAuthChecked);
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const error = useAuthStore((state) => state.error);
+  const manager = (0, import_react_token_manager2.useTokenManager)();
+  const setAuth = useAuthStore((state) => state.setAuth);
+  const setAuthChecked = useAuthStore((state) => state.setAuthChecked);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
   (0, import_react2.useEffect)(() => {
-    const checkAuth = async () => {
-      try {
-        let token = manager.getSingleToken(tokenKey);
-        if (!token || manager.isExpired(token)) {
-          if (refreshToken) {
-            const newToken = await refreshToken();
-            if (newToken) {
-              manager.setTokens({ [tokenKey]: newToken });
-              token = newToken;
-            }
-          }
-        }
-        const isValid = token && !manager.isExpired(token);
-        useAuthStore.getState().setAuth(Boolean(isValid));
-        if (!isValid) {
-          router.replace(redirectTo);
-        }
-      } catch (err) {
-        useAuthStore.getState().setError(err instanceof Error ? err : new Error(String(err)));
-        useAuthStore.getState().setAuth(false);
-        router.replace(redirectTo);
-      } finally {
-        useAuthStore.getState().setAuthChecked(true);
-      }
-    };
-    checkAuth();
-  }, [manager, router, redirectTo, tokenKey, refreshToken]);
-  if (!isAuthChecked) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Loading..." });
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-    "Error: ",
-    error.message
-  ] });
-  if (!isAuthenticated) return null;
+    const token = manager.getSingleToken(tokenKey);
+    const isValid = Boolean(token) && !manager.isExpired(token);
+    setAuth(Boolean(isValid));
+    setAuthChecked(true);
+    if (!isValid) {
+      router.replace(redirectTo);
+    } else {
+      setLoading(false);
+    }
+  }, [manager, tokenKey, redirectTo, router, setAuth, setAuthChecked]);
+  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Loading..." });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
 };
 var AuthGuard_default = AuthGuard;
@@ -186,18 +162,23 @@ var RoleGuard = ({
   allowedRoles,
   redirectTo = "/unauthorized"
 }) => {
-  const { user, loading } = useAuth();
   const router = (0, import_navigation2.useRouter)();
-  const [isChecking, setIsChecking] = (0, import_react3.useState)(true);
+  const { user, isAuthChecked, isAuthenticated } = useAuthStore();
   (0, import_react3.useEffect)(() => {
-    if (!user) return;
-    const hasAccess = allowedRoles.includes(user?.role);
-    if (!hasAccess) {
+    if (!isAuthChecked) return;
+    if (!isAuthenticated || !user) {
+      router.replace("/login");
+      return;
+    }
+    const role2 = user?.role;
+    if (!allowedRoles.includes(role2)) {
       router.replace(redirectTo);
     }
-    setIsChecking(false);
-  }, [user, allowedRoles, redirectTo, router]);
-  if (loading || !user || isChecking) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "Loading..." });
+  }, [isAuthChecked, isAuthenticated, user, allowedRoles, redirectTo, router]);
+  if (!isAuthChecked) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "Loading..." });
+  if (!isAuthenticated || !user) return null;
+  const role = user?.role;
+  if (!allowedRoles.includes(role)) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
 };
 var RoleGuard_default = RoleGuard;
@@ -206,12 +187,9 @@ var RoleGuard_default = RoleGuard;
 function createAppAuth(storage = "cookie") {
   return createAuthContext({ storage });
 }
-var { AuthProvider, useAuth } = createAppAuth();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AuthGuard,
-  AuthProvider,
   RoleGuard,
-  createAppAuth,
-  useAuth
+  createAppAuth
 });

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   createContext,
   useContext,
   useEffect,
-  useState
+  useRef
 } from "react";
 import { configureTokenManager, useTokenManager } from "react-token-manager";
 
@@ -15,146 +15,124 @@ var useAuthStore = create((set) => ({
   user: null,
   isAuthenticated: false,
   isAuthChecked: false,
+  loading: true,
+  // start as loading
   error: null,
   setUser: (user) => set({ user }),
   setAuth: (isAuth) => set({ isAuthenticated: isAuth }),
   setAuthChecked: (checked) => set({ isAuthChecked: checked }),
+  setLoading: (loading) => set({ loading }),
   setError: (err) => set({ error: err }),
   resetAuth: () => set({
     user: null,
     isAuthenticated: false,
     isAuthChecked: false,
+    loading: false,
     error: null
   })
 }));
 
 // src/AuthProvider.tsx
 import { jsx } from "react/jsx-runtime";
-function createAuthContext(options) {
-  const AuthContext = createContext(null);
-  const AuthProvider2 = ({ children }) => {
-    const storageType = options?.storage || "cookie";
-    useEffect(() => {
-      configureTokenManager({ storage: storageType });
-    }, [storageType]);
+function createAuthContext(options = {}) {
+  const { storage = "cookie" } = options;
+  const AuthContext = createContext(
+    void 0
+  );
+  const AuthProvider = ({ children }) => {
+    const configuredRef = useRef(false);
     const manager = useTokenManager();
-    const [loading, setLoading] = useState(true);
-    const rawUser = useAuthStore((state) => state.user);
-    const error = useAuthStore((state) => state.error);
-    const user = rawUser;
+    const { user, loading, error, setUser, setLoading, setError, resetAuth } = useAuthStore();
+    useEffect(() => {
+      if (!configuredRef.current) {
+        configureTokenManager({ storage });
+        configuredRef.current = true;
+      }
+    }, [storage]);
     useEffect(() => {
-      const savedUser = manager.getSingleToken("user");
-      if (savedUser) {
-        try {
-          const parsedUser = JSON.parse(savedUser);
-          useAuthStore.getState().setUser(parsedUser);
-          useAuthStore.getState().setError(null);
-        } catch {
-          useAuthStore.getState().resetAuth();
-          useAuthStore.getState().setError(
-            new Error("Failed to parse saved user")
-          );
+      try {
+        const savedUser = manager.getSingleToken("user");
+        if (savedUser) {
+          setUser(JSON.parse(savedUser));
         }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setLoading(false);
       }
-      setLoading(false);
-    }, [manager]);
-    const setUser = (userData) => {
-      useAuthStore.getState().setUser(userData);
-      useAuthStore.getState().setError(null);
-      manager.setTokens({ user: JSON.stringify(userData) });
-    };
+    }, [manager, setUser, setLoading, setError]);
     const login = (tokens, userData) => {
       try {
-        manager.setTokens(tokens);
+        manager.setTokens({ ...tokens, user: JSON.stringify(userData) });
         setUser(userData);
       } catch (err) {
-        useAuthStore.getState().setError(
-          err instanceof Error ? err : new Error(String(err))
-        );
+        setError(err instanceof Error ? err : new Error(String(err)));
       }
     };
     const logout = () => {
       try {
         manager.clearTokens();
-        useAuthStore.getState().resetAuth();
+        resetAuth();
       } catch (err) {
-        useAuthStore.getState().setError(
-          err instanceof Error ? err : new Error(String(err))
-        );
+        setError(err instanceof Error ? err : new Error(String(err)));
       }
     };
     return /* @__PURE__ */ jsx(
       AuthContext.Provider,
       {
-        value: { user, login, logout, setUser, loading, error },
+        value: {
+          user,
+          login,
+          logout,
+          setUser: (u) => setUser(u),
+          loading,
+          error
+        },
         children
       }
     );
   };
-  const useAuth2 = () => {
+  const useAuth = () => {
     const ctx = useContext(AuthContext);
     if (!ctx) throw new Error("useAuth must be used inside AuthProvider");
     return ctx;
   };
-  return { AuthProvider: AuthProvider2, useAuth: useAuth2 };
+  return { AuthProvider, useAuth };
 }
 
 // src/AuthGuard.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTokenManager as useTokenManager2 } from "react-token-manager";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 var AuthGuard = ({
   children,
   redirectTo = "/login",
-  tokenKey = "access_token",
-  refreshToken
+  tokenKey = "access_token"
 }) => {
-  const manager = useTokenManager2();
   const router = useRouter();
-  const isAuthChecked = useAuthStore((state) => state.isAuthChecked);
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const error = useAuthStore((state) => state.error);
+  const manager = useTokenManager2();
+  const setAuth = useAuthStore((state) => state.setAuth);
+  const setAuthChecked = useAuthStore((state) => state.setAuthChecked);
+  const [loading, setLoading] = useState(true);
   useEffect2(() => {
-    const checkAuth = async () => {
-      try {
-        let token = manager.getSingleToken(tokenKey);
-        if (!token || manager.isExpired(token)) {
-          if (refreshToken) {
-            const newToken = await refreshToken();
-            if (newToken) {
-              manager.setTokens({ [tokenKey]: newToken });
-              token = newToken;
-            }
-          }
-        }
-        const isValid = token && !manager.isExpired(token);
-        useAuthStore.getState().setAuth(Boolean(isValid));
-        if (!isValid) {
-          router.replace(redirectTo);
-        }
-      } catch (err) {
-        useAuthStore.getState().setError(err instanceof Error ? err : new Error(String(err)));
-        useAuthStore.getState().setAuth(false);
-        router.replace(redirectTo);
-      } finally {
-        useAuthStore.getState().setAuthChecked(true);
-      }
-    };
-    checkAuth();
-  }, [manager, router, redirectTo, tokenKey, refreshToken]);
-  if (!isAuthChecked) return /* @__PURE__ */ jsx2("div", { children: "Loading..." });
-  if (error) return /* @__PURE__ */ jsxs("div", { children: [
-    "Error: ",
-    error.message
-  ] });
-  if (!isAuthenticated) return null;
+    const token = manager.getSingleToken(tokenKey);
+    const isValid = Boolean(token) && !manager.isExpired(token);
+    setAuth(Boolean(isValid));
+    setAuthChecked(true);
+    if (!isValid) {
+      router.replace(redirectTo);
+    } else {
+      setLoading(false);
+    }
+  }, [manager, tokenKey, redirectTo, router, setAuth, setAuthChecked]);
+  if (loading) return /* @__PURE__ */ jsx2("div", { children: "Loading..." });
   return /* @__PURE__ */ jsx2(Fragment, { children });
 };
 var AuthGuard_default = AuthGuard;
 
 // src/RoleGuard.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { useRouter as useRouter2 } from "next/navigation";
 import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 var RoleGuard = ({
@@ -162,18 +140,23 @@ var RoleGuard = ({
   allowedRoles,
   redirectTo = "/unauthorized"
 }) => {
-  const { user, loading } = useAuth();
   const router = useRouter2();
-  const [isChecking, setIsChecking] = useState3(true);
+  const { user, isAuthChecked, isAuthenticated } = useAuthStore();
   useEffect3(() => {
-    if (!user) return;
-    const hasAccess = allowedRoles.includes(user?.role);
-    if (!hasAccess) {
+    if (!isAuthChecked) return;
+    if (!isAuthenticated || !user) {
+      router.replace("/login");
+      return;
+    }
+    const role2 = user?.role;
+    if (!allowedRoles.includes(role2)) {
       router.replace(redirectTo);
     }
-    setIsChecking(false);
-  }, [user, allowedRoles, redirectTo, router]);
-  if (loading || !user || isChecking) return /* @__PURE__ */ jsx3("div", { children: "Loading..." });
+  }, [isAuthChecked, isAuthenticated, user, allowedRoles, redirectTo, router]);
+  if (!isAuthChecked) return /* @__PURE__ */ jsx3("div", { children: "Loading..." });
+  if (!isAuthenticated || !user) return null;
+  const role = user?.role;
+  if (!allowedRoles.includes(role)) return null;
   return /* @__PURE__ */ jsx3(Fragment2, { children });
 };
 var RoleGuard_default = RoleGuard;
@@ -182,11 +165,8 @@ var RoleGuard_default = RoleGuard;
 function createAppAuth(storage = "cookie") {
   return createAuthContext({ storage });
 }
-var { AuthProvider, useAuth } = createAppAuth();
 export {
   AuthGuard_default as AuthGuard,
-  AuthProvider,
   RoleGuard_default as RoleGuard,
-  createAppAuth,
-  useAuth
+  createAppAuth
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextauthz",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AuthGuard.tsx

@@ -9,57 +9,34 @@ type AuthGuardProps = {
   children: React.ReactNode
   redirectTo?: string
   tokenKey?: string
-  refreshToken?: () => Promise<string | null>
 }
 
 const AuthGuard = ({
   children,
   redirectTo = '/login',
   tokenKey = 'access_token',
-  refreshToken,
 }: AuthGuardProps) => {
-  const manager = useTokenManager()
   const router = useRouter()
-  const isAuthChecked = useAuthStore((state) => state.isAuthChecked)
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
-  const error = useAuthStore((state) => state.error)
+  const manager = useTokenManager()
+  const setAuth = useAuthStore((state) => state.setAuth)
+  const setAuthChecked = useAuthStore((state) => state.setAuthChecked)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    const checkAuth = async () => {
-      try {
-        let token = manager.getSingleToken(tokenKey)
+    const token = manager.getSingleToken(tokenKey)
+    const isValid = Boolean(token) && !manager.isExpired(token as any)
 
-        if (!token || manager.isExpired(token)) {
-          if (refreshToken) {
-            const newToken = await refreshToken()
-            if (newToken) {
-              manager.setTokens({ [tokenKey]: newToken })
-              token = newToken
-            }
-          }
-        }
+    setAuth(Boolean(isValid))
+    setAuthChecked(true)
 
-        const isValid = token && !manager.isExpired(token)
-        useAuthStore.getState().setAuth(Boolean(isValid))
-
-        if (!isValid) {
-          router.replace(redirectTo)
-        }
-      } catch (err: any) {
-        useAuthStore.getState().setError(err instanceof Error ? err : new Error(String(err)))
-        useAuthStore.getState().setAuth(false)
-        router.replace(redirectTo)
-      } finally {
-        useAuthStore.getState().setAuthChecked(true)
-      }
+    if (!isValid) {
+      router.replace(redirectTo)
+    } else {
+      setLoading(false)
     }
+  }, [manager, tokenKey, redirectTo, router, setAuth, setAuthChecked])
 
-    checkAuth()
-  }, [manager, router, redirectTo, tokenKey, refreshToken])
-
-  if (!isAuthChecked) return <div>Loading...</div>
-  if (error) return <div>Error: {error.message}</div>
-  if (!isAuthenticated) return null
+  if (loading) return <div>Loading...</div>
 
   return <>{children}</>
 }

package/src/AuthProvider.tsx

@@ -5,96 +5,90 @@ import React, {
   useContext,
   ReactNode,
   useEffect,
-  useState,
+  useRef,
 } from 'react'
 import { configureTokenManager, useTokenManager } from 'react-token-manager'
-import { useAuthStore } from '../store/useGuardStore'
+import { useAuthStore, User } from '../store/useGuardStore'
 
-export type AuthContextType<UserType> = {
+export type AuthContextType<UserType extends User> = {
   user: UserType | null
-  login: (tokens: Record<string, string>, user: UserType) => void
+  login: (tokens: Record<string, string>, userData: UserType) => void
   logout: () => void
   setUser: (user: UserType) => void
   loading: boolean
   error: Error | null
 }
 
-export type AuthContextOptions = {
+type CreateAuthOptions = {
   storage?: 'localStorage' | 'sessionStorage' | 'cookie'
 }
 
-/**
- * Factory to create AuthProvider and typed useAuth hook
- */
-export function createAuthContext<UserType>(options?: AuthContextOptions) {
-  const AuthContext = createContext<AuthContextType<UserType> | null>(null)
+export function createAuthContext<UserType extends User = User>(
+  options: CreateAuthOptions = {}
+) {
+  const { storage = 'cookie' } = options
 
-  const AuthProvider = ({ children }: { children: ReactNode }) => {
-    const storageType = options?.storage || 'cookie'
-
-    // Configure token manager once on mount
-    useEffect(() => {
-      configureTokenManager({ storage: storageType })
-    }, [storageType])
+  const AuthContext = createContext<AuthContextType<UserType> | undefined>(
+    undefined
+  )
 
-    // ✅ Hooks must be called inside component
+  const AuthProvider = ({ children }: { children: ReactNode }) => {
+    const configuredRef = useRef(false)
     const manager = useTokenManager()
 
-    const [loading, setLoading] = useState(true)
+    const { user, loading, error, setUser, setLoading, setError, resetAuth } =
+      useAuthStore()
 
-    const rawUser = useAuthStore((state) => state.user)
-    const error = useAuthStore((state) => state.error)
-    const user = rawUser as UserType | null
+    // Configure token manager once
+    useEffect(() => {
+      if (!configuredRef.current) {
+        configureTokenManager({ storage })
+        configuredRef.current = true
+      }
+    }, [storage])
 
-    // Restore saved user from token manager
+    // Restore user from token storage
     useEffect(() => {
-      const savedUser = manager.getSingleToken('user')
-      if (savedUser) {
-        try {
-          const parsedUser = JSON.parse(savedUser)
-          useAuthStore.getState().setUser(parsedUser)
-          useAuthStore.getState().setError(null)
-        } catch {
-          useAuthStore.getState().resetAuth()
-          useAuthStore.getState().setError(
-            new Error('Failed to parse saved user')
-          )
+      try {
+        const savedUser = manager.getSingleToken('user')
+        if (savedUser) {
+          setUser(JSON.parse(savedUser) as UserType)
         }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)))
+      } finally {
+        setLoading(false)
       }
-      setLoading(false)
-    }, [manager])
-
-    const setUser = (userData: UserType) => {
-      useAuthStore.getState().setUser(userData as any)
-      useAuthStore.getState().setError(null)
-      manager.setTokens({ user: JSON.stringify(userData) })
-    }
+    }, [manager, setUser, setLoading, setError])
 
     const login = (tokens: Record<string, string>, userData: UserType) => {
       try {
-        manager.setTokens(tokens)
+        manager.setTokens({ ...tokens, user: JSON.stringify(userData) })
         setUser(userData)
       } catch (err) {
-        useAuthStore.getState().setError(
-          err instanceof Error ? err : new Error(String(err))
-        )
+        setError(err instanceof Error ? err : new Error(String(err)))
       }
     }
 
     const logout = () => {
       try {
         manager.clearTokens()
-        useAuthStore.getState().resetAuth()
+        resetAuth()
       } catch (err) {
-        useAuthStore.getState().setError(
-          err instanceof Error ? err : new Error(String(err))
-        )
+        setError(err instanceof Error ? err : new Error(String(err)))
       }
     }
 
     return (
       <AuthContext.Provider
-        value={{ user, login, logout, setUser, loading, error }}
+        value={{
+          user: user as UserType | null,
+          login,
+          logout,
+          setUser: (u: UserType) => setUser(u),
+          loading,
+          error,
+        }}
       >
         {children}
       </AuthContext.Provider>

package/src/RoleGuard.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
-import { useAuth } from '.'
+import { useAuthStore } from '../store/useGuardStore'
 
 type RoleGuardProps = {
   children: React.ReactNode
@@ -15,21 +15,37 @@ const RoleGuard = ({
   allowedRoles,
   redirectTo = '/unauthorized',
 }: RoleGuardProps) => {
-  const { user, loading } = useAuth()
   const router = useRouter()
-  const [isChecking, setIsChecking] = useState(true)
+
+  // Get auth state from Zustand
+  const { user, isAuthChecked, isAuthenticated } = useAuthStore()
 
   useEffect(() => {
-    if (!user) return
+    // Wait until auth is checked
+    if (!isAuthChecked) return
+
+    // Not authenticated
+    if (!isAuthenticated || !user) {
+      router.replace('/login')
+      return
+    }
 
-    const hasAccess = allowedRoles.includes(user?.role)
-    if (!hasAccess) {
+    // Role check
+    const role = user?.role
+    if (!allowedRoles.includes(role)) {
       router.replace(redirectTo)
     }
-    setIsChecking(false)
-  }, [user, allowedRoles, redirectTo, router])
+  }, [isAuthChecked, isAuthenticated, user, allowedRoles, redirectTo, router])
+
+  // Show loading until auth is checked
+  if (!isAuthChecked) return <div>Loading...</div>
+
+  // Not authenticated
+  if (!isAuthenticated || !user) return null
 
-  if (loading || !user || isChecking) return <div>Loading...</div>
+  // Role not allowed
+  const role = (user as any)?.role
+  if (!allowedRoles.includes(role)) return null
 
   return <>{children}</>
 }

package/src/index.ts

@@ -1,18 +1,14 @@
-// src/index.ts
 'use client'
 
 import { createAuthContext } from './AuthProvider'
+
 export { default as AuthGuard } from './AuthGuard'
 export { default as RoleGuard } from './RoleGuard'
 
 export type User = any
 
-// Factory function for app
 export function createAppAuth(
   storage: 'localStorage' | 'sessionStorage' | 'cookie' = 'cookie'
 ) {
-  return createAuthContext<User>({ storage })
+  return createAuthContext({ storage })
 }
-
-// Default instance (optional)
-export const { AuthProvider, useAuth } = createAppAuth()

package/store/useGuardStore.ts

@@ -7,13 +7,15 @@ export type User = {
 }
 
 type AuthState = {
-  user: User | null       // user can be null
+  user: User | null        // user can be null
   isAuthenticated: boolean
   isAuthChecked: boolean
+  loading: boolean         // new loading state
   error: Error | null
   setUser: (user: User | null) => void
   setAuth: (isAuth: boolean) => void
   setAuthChecked: (checked: boolean) => void
+  setLoading: (loading: boolean) => void
   setError: (err: Error | null) => void
   resetAuth: () => void
 }
@@ -22,11 +24,13 @@ export const useAuthStore = create<AuthState>((set) => ({
   user: null,
   isAuthenticated: false,
   isAuthChecked: false,
+  loading: true, // start as loading
   error: null,
 
   setUser: (user) => set({ user }),
   setAuth: (isAuth) => set({ isAuthenticated: isAuth }),
   setAuthChecked: (checked) => set({ isAuthChecked: checked }),
+  setLoading: (loading) => set({ loading }),
   setError: (err) => set({ error: err }),
 
   resetAuth: () =>
@@ -34,6 +38,7 @@ export const useAuthStore = create<AuthState>((set) => ({
       user: null,
       isAuthenticated: false,
       isAuthChecked: false,
+      loading: false,
       error: null,
     }),
 }))