nextauthz 1.3.34 → 1.3.37

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type User = {
     [key: string]: any;
@@ -10,7 +10,7 @@ type AuthContextType<UserType extends User = User> = {
     role: string | null;
     isAuthenticated: boolean;
     isAuthChecked: boolean;
-    login: (tokens: Record<string, string>, userData?: UserType, role?: string) => void;
+    login: (tokens: Record<string, string>, userData?: UserType) => void;
     logout: () => void;
     setUser: (user: UserType | null) => void;
     tokenKey: string;
@@ -24,22 +24,19 @@ declare function createAuthContext<UserType extends User = User>(option?: {
         children: ReactNode;
     }) => react_jsx_runtime.JSX.Element;
     useAuth: () => AuthContextType<UserType>;
-    tokenKey: string;
 };
 
-type AuthGuardProps = {
+declare const AuthGuard: ({ children, redirectTo, fallback, }: {
     children: React.ReactNode;
     redirectTo?: string;
     fallback?: React.ReactNode;
-};
-declare const AuthGuard: ({ children, redirectTo, fallback, }: AuthGuardProps) => react_jsx_runtime.JSX.Element | null;
+}) => react_jsx_runtime.JSX.Element | null;
 
-type RoleGuardProps = {
+declare const RoleGuard: ({ children, allowedRoles, redirectTo, fallback, }: {
     children: React.ReactNode;
     allowedRoles: string[];
     redirectTo?: string;
     fallback?: React.ReactNode;
-};
-declare const RoleGuard: ({ children, allowedRoles, redirectTo, fallback, }: RoleGuardProps) => react_jsx_runtime.JSX.Element | null;
+}) => react_jsx_runtime.JSX.Element | null;
 
 export { AuthGuard, RoleGuard, createAuthContext };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 type User = {
     [key: string]: any;
@@ -10,7 +10,7 @@ type AuthContextType<UserType extends User = User> = {
     role: string | null;
     isAuthenticated: boolean;
     isAuthChecked: boolean;
-    login: (tokens: Record<string, string>, userData?: UserType, role?: string) => void;
+    login: (tokens: Record<string, string>, userData?: UserType) => void;
     logout: () => void;
     setUser: (user: UserType | null) => void;
     tokenKey: string;
@@ -24,22 +24,19 @@ declare function createAuthContext<UserType extends User = User>(option?: {
         children: ReactNode;
     }) => react_jsx_runtime.JSX.Element;
     useAuth: () => AuthContextType<UserType>;
-    tokenKey: string;
 };
 
-type AuthGuardProps = {
+declare const AuthGuard: ({ children, redirectTo, fallback, }: {
     children: React.ReactNode;
     redirectTo?: string;
     fallback?: React.ReactNode;
-};
-declare const AuthGuard: ({ children, redirectTo, fallback, }: AuthGuardProps) => react_jsx_runtime.JSX.Element | null;
+}) => react_jsx_runtime.JSX.Element | null;
 
-type RoleGuardProps = {
+declare const RoleGuard: ({ children, allowedRoles, redirectTo, fallback, }: {
     children: React.ReactNode;
     allowedRoles: string[];
     redirectTo?: string;
     fallback?: React.ReactNode;
-};
-declare const RoleGuard: ({ children, allowedRoles, redirectTo, fallback, }: RoleGuardProps) => react_jsx_runtime.JSX.Element | null;
+}) => react_jsx_runtime.JSX.Element | null;
 
 export { AuthGuard, RoleGuard, createAuthContext };

package/dist/index.js

@@ -60,92 +60,95 @@ var useAuthStore = (0, import_zustand.create)((set) => ({
 // src/AuthProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function createAuthContext(option) {
-  const AuthContext = (0, import_react.createContext)(void 0);
+  const AuthContext = (0, import_react.createContext)(
+    void 0
+  );
   const AuthProvider = ({ children }) => {
     const storage = option?.storage ?? "cookie";
     const tokenKey = option?.tokenKey ?? "access_token";
     const rolePath = option?.rolePath ?? "role";
+    const manager = (0, import_react_token_manager.useTokenManager)();
+    const user = useAuthStore((s) => s.user);
+    const role = useAuthStore((s) => s.role);
+    const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+    const isAuthChecked = useAuthStore((s) => s.isAuthChecked);
+    const setUser = useAuthStore((s) => s.setUser);
+    const setRole = useAuthStore((s) => s.setRole);
+    const setAuth = useAuthStore((s) => s.setAuth);
+    const setAuthChecked = useAuthStore((s) => s.setAuthChecked);
+    const resetAuth = useAuthStore((s) => s.resetAuth);
     (0, import_react.useEffect)(() => {
       (0, import_react_token_manager.configureTokenManager)({ storage });
     }, [storage]);
-    const manager = (0, import_react_token_manager.useTokenManager)();
-    const {
-      user,
-      role,
-      setUser,
-      setRole,
-      resetAuth,
-      isAuthChecked,
-      isAuthenticated,
-      setAuth,
-      setAuthChecked
-    } = useAuthStore();
-    const extractRole = (userObj) => {
-      if (!userObj || !rolePath) return null;
-      return rolePath.split(".").reduce((acc, key) => acc?.[key], userObj) ?? null;
-    };
+    const extractRole = (0, import_react.useCallback)(
+      (userObj) => {
+        if (!userObj) return null;
+        return rolePath.split(".").reduce((acc, key) => acc?.[key], userObj) ?? null;
+      },
+      [rolePath]
+    );
     (0, import_react.useEffect)(() => {
-      const storedUser = manager.getSingleToken("user");
       const token = manager.getSingleToken(tokenKey);
       if (token && !manager.isExpired(token)) {
-        try {
-          setAuth(true);
-          if (storedUser) {
-            const parsedUser = JSON.parse(storedUser);
-            setUser(parsedUser);
-            setRole(extractRole(parsedUser));
+        setAuth(true);
+        if (user) {
+          try {
+            setUser(user);
+            setRole(extractRole(user));
+          } catch {
+            resetAuth();
           }
-        } catch {
-          resetAuth();
         }
       } else {
         resetAuth();
       }
       setAuthChecked(true);
-    }, [tokenKey]);
-    const login = (tokens, userData, role2) => {
-      const tokenValue = tokens[tokenKey] ?? tokens["access_token"] ?? Object.values(tokens)[0];
-      manager.setTokens({
-        ...tokens,
-        [tokenKey]: tokenValue,
-        user: JSON.stringify(userData ?? null)
-      });
-      if (userData) setUser(userData);
-      setRole(role2 ?? extractRole(userData));
-      setAuth(true);
-      setAuthChecked(true);
-    };
-    const logout = () => {
+    }, [tokenKey, manager, user, setAuth, setAuthChecked, setUser, setRole, resetAuth, extractRole]);
+    const login = (0, import_react.useCallback)(
+      (tokens, userData) => {
+        const tokenValue = tokens[tokenKey] ?? tokens["access_token"] ?? Object.values(tokens)[0];
+        manager.setTokens({
+          ...tokens,
+          [tokenKey]: tokenValue,
+          user: JSON.stringify(userData ?? null)
+        });
+        if (userData) {
+          setUser(userData);
+          setRole(extractRole(userData));
+        }
+        setAuth(true);
+        setAuthChecked(true);
+      },
+      [tokenKey, manager, setUser, setRole, extractRole, setAuth, setAuthChecked]
+    );
+    const logout = (0, import_react.useCallback)(() => {
       manager.clearTokens();
       resetAuth();
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      AuthContext.Provider,
-      {
-        value: {
-          user,
-          role,
-          isAuthenticated,
-          isAuthChecked,
-          login,
-          logout,
-          setUser: (u) => setUser(u),
-          tokenKey
+    }, [manager, resetAuth]);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        user,
+        role,
+        isAuthenticated,
+        isAuthChecked,
+        login,
+        logout,
+        setUser: (u) => {
+          setUser(u);
+          setRole(extractRole(u));
         },
-        children
-      }
+        tokenKey
+      }),
+      [user, role, isAuthenticated, isAuthChecked, login, logout, setUser, tokenKey, extractRole]
     );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthContext.Provider, { value, children });
   };
   const useAuth = () => {
     const context = (0, import_react.useContext)(AuthContext);
     if (!context) throw new Error("useAuth must be used within AuthProvider");
     return context;
   };
-  return {
-    AuthProvider,
-    useAuth,
-    tokenKey: option?.tokenKey ?? "access_token"
-  };
+  return { AuthProvider, useAuth };
 }
 
 // src/AuthGuard.tsx
@@ -158,18 +161,16 @@ var AuthGuard = ({
   fallback = null
 }) => {
   const router = (0, import_navigation.useRouter)();
-  const { isAuthenticated, isAuthChecked } = useAuthStore();
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const isAuthChecked = useAuthStore((s) => s.isAuthChecked);
   (0, import_react2.useEffect)(() => {
     if (!isAuthChecked) return;
     if (!isAuthenticated) {
       router.replace(redirectTo);
     }
-  }, [isAuthenticated, isAuthChecked, redirectTo, router]);
+  }, [isAuthenticated, isAuthChecked]);
   if (!isAuthChecked) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
-  if (!isAuthenticated) {
-    router.replace(redirectTo);
-    return null;
-  }
+  if (!isAuthenticated) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
 };
 var AuthGuard_default = AuthGuard;
@@ -185,19 +186,19 @@ var RoleGuard = ({
   fallback = null
 }) => {
   const router = (0, import_navigation2.useRouter)();
-  const { role, isAuthChecked, isAuthenticated } = useAuthStore();
+  const role = useAuthStore((s) => s.role);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const isAuthChecked = useAuthStore((s) => s.isAuthChecked);
   (0, import_react3.useEffect)(() => {
-    if (!isAuthChecked) return;
+    if (!isAuthChecked || !isAuthenticated) return;
     if (!role || !allowedRoles.includes(role)) {
       router.replace(redirectTo);
     }
-  }, [role, isAuthChecked, allowedRoles, redirectTo, router]);
+  }, [role, isAuthenticated, isAuthChecked]);
   if (!isAuthChecked) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
-  if (!isAuthenticated) {
-    router.replace(redirectTo);
-    return null;
-  }
+  if (!isAuthenticated) return null;
   if (!role || !allowedRoles.includes(role)) return null;
+  console.log(role);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
 };
 var RoleGuard_default = RoleGuard;

package/dist/index.mjs

@@ -1,7 +1,13 @@
 "use client";
 
 // src/AuthProvider.tsx
-import { createContext, useContext, useEffect } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useCallback
+} from "react";
 import { configureTokenManager, useTokenManager } from "react-token-manager";
 
 // store/useGuardStore.ts
@@ -33,92 +39,95 @@ var useAuthStore = create((set) => ({
 // src/AuthProvider.tsx
 import { jsx } from "react/jsx-runtime";
 function createAuthContext(option) {
-  const AuthContext = createContext(void 0);
+  const AuthContext = createContext(
+    void 0
+  );
   const AuthProvider = ({ children }) => {
     const storage = option?.storage ?? "cookie";
     const tokenKey = option?.tokenKey ?? "access_token";
     const rolePath = option?.rolePath ?? "role";
+    const manager = useTokenManager();
+    const user = useAuthStore((s) => s.user);
+    const role = useAuthStore((s) => s.role);
+    const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+    const isAuthChecked = useAuthStore((s) => s.isAuthChecked);
+    const setUser = useAuthStore((s) => s.setUser);
+    const setRole = useAuthStore((s) => s.setRole);
+    const setAuth = useAuthStore((s) => s.setAuth);
+    const setAuthChecked = useAuthStore((s) => s.setAuthChecked);
+    const resetAuth = useAuthStore((s) => s.resetAuth);
     useEffect(() => {
       configureTokenManager({ storage });
     }, [storage]);
-    const manager = useTokenManager();
-    const {
-      user,
-      role,
-      setUser,
-      setRole,
-      resetAuth,
-      isAuthChecked,
-      isAuthenticated,
-      setAuth,
-      setAuthChecked
-    } = useAuthStore();
-    const extractRole = (userObj) => {
-      if (!userObj || !rolePath) return null;
-      return rolePath.split(".").reduce((acc, key) => acc?.[key], userObj) ?? null;
-    };
+    const extractRole = useCallback(
+      (userObj) => {
+        if (!userObj) return null;
+        return rolePath.split(".").reduce((acc, key) => acc?.[key], userObj) ?? null;
+      },
+      [rolePath]
+    );
     useEffect(() => {
-      const storedUser = manager.getSingleToken("user");
       const token = manager.getSingleToken(tokenKey);
       if (token && !manager.isExpired(token)) {
-        try {
-          setAuth(true);
-          if (storedUser) {
-            const parsedUser = JSON.parse(storedUser);
-            setUser(parsedUser);
-            setRole(extractRole(parsedUser));
+        setAuth(true);
+        if (user) {
+          try {
+            setUser(user);
+            setRole(extractRole(user));
+          } catch {
+            resetAuth();
           }
-        } catch {
-          resetAuth();
         }
       } else {
         resetAuth();
       }
       setAuthChecked(true);
-    }, [tokenKey]);
-    const login = (tokens, userData, role2) => {
-      const tokenValue = tokens[tokenKey] ?? tokens["access_token"] ?? Object.values(tokens)[0];
-      manager.setTokens({
-        ...tokens,
-        [tokenKey]: tokenValue,
-        user: JSON.stringify(userData ?? null)
-      });
-      if (userData) setUser(userData);
-      setRole(role2 ?? extractRole(userData));
-      setAuth(true);
-      setAuthChecked(true);
-    };
-    const logout = () => {
+    }, [tokenKey, manager, user, setAuth, setAuthChecked, setUser, setRole, resetAuth, extractRole]);
+    const login = useCallback(
+      (tokens, userData) => {
+        const tokenValue = tokens[tokenKey] ?? tokens["access_token"] ?? Object.values(tokens)[0];
+        manager.setTokens({
+          ...tokens,
+          [tokenKey]: tokenValue,
+          user: JSON.stringify(userData ?? null)
+        });
+        if (userData) {
+          setUser(userData);
+          setRole(extractRole(userData));
+        }
+        setAuth(true);
+        setAuthChecked(true);
+      },
+      [tokenKey, manager, setUser, setRole, extractRole, setAuth, setAuthChecked]
+    );
+    const logout = useCallback(() => {
       manager.clearTokens();
       resetAuth();
-    };
-    return /* @__PURE__ */ jsx(
-      AuthContext.Provider,
-      {
-        value: {
-          user,
-          role,
-          isAuthenticated,
-          isAuthChecked,
-          login,
-          logout,
-          setUser: (u) => setUser(u),
-          tokenKey
+    }, [manager, resetAuth]);
+    const value = useMemo(
+      () => ({
+        user,
+        role,
+        isAuthenticated,
+        isAuthChecked,
+        login,
+        logout,
+        setUser: (u) => {
+          setUser(u);
+          setRole(extractRole(u));
         },
-        children
-      }
+        tokenKey
+      }),
+      [user, role, isAuthenticated, isAuthChecked, login, logout, setUser, tokenKey, extractRole]
     );
+    return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
   };
   const useAuth = () => {
     const context = useContext(AuthContext);
     if (!context) throw new Error("useAuth must be used within AuthProvider");
     return context;
   };
-  return {
-    AuthProvider,
-    useAuth,
-    tokenKey: option?.tokenKey ?? "access_token"
-  };
+  return { AuthProvider, useAuth };
 }
 
 // src/AuthGuard.tsx
@@ -131,18 +140,16 @@ var AuthGuard = ({
   fallback = null
 }) => {
   const router = useRouter();
-  const { isAuthenticated, isAuthChecked } = useAuthStore();
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const isAuthChecked = useAuthStore((s) => s.isAuthChecked);
   useEffect2(() => {
     if (!isAuthChecked) return;
     if (!isAuthenticated) {
       router.replace(redirectTo);
     }
-  }, [isAuthenticated, isAuthChecked, redirectTo, router]);
+  }, [isAuthenticated, isAuthChecked]);
   if (!isAuthChecked) return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
-  if (!isAuthenticated) {
-    router.replace(redirectTo);
-    return null;
-  }
+  if (!isAuthenticated) return null;
   return /* @__PURE__ */ jsx2(Fragment, { children });
 };
 var AuthGuard_default = AuthGuard;
@@ -158,19 +165,19 @@ var RoleGuard = ({
   fallback = null
 }) => {
   const router = useRouter2();
-  const { role, isAuthChecked, isAuthenticated } = useAuthStore();
+  const role = useAuthStore((s) => s.role);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const isAuthChecked = useAuthStore((s) => s.isAuthChecked);
   useEffect3(() => {
-    if (!isAuthChecked) return;
+    if (!isAuthChecked || !isAuthenticated) return;
     if (!role || !allowedRoles.includes(role)) {
       router.replace(redirectTo);
     }
-  }, [role, isAuthChecked, allowedRoles, redirectTo, router]);
+  }, [role, isAuthenticated, isAuthChecked]);
   if (!isAuthChecked) return /* @__PURE__ */ jsx3(Fragment2, { children: fallback });
-  if (!isAuthenticated) {
-    router.replace(redirectTo);
-    return null;
-  }
+  if (!isAuthenticated) return null;
   if (!role || !allowedRoles.includes(role)) return null;
+  console.log(role);
   return /* @__PURE__ */ jsx3(Fragment2, { children });
 };
 var RoleGuard_default = RoleGuard;

package/package.json

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

package/readme.md

@@ -153,7 +153,7 @@ Props
 ## Usage Example
 
 ```bash
-import AuthGuard from 'nextauthz'
+import { AuthGuard } from 'nextauthz'
 
 function DashboardPage() {
   return (

package/src/AuthGuard.tsx

@@ -1,41 +1,34 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useAuthStore } from '../store/useGuardStore'
 
-type AuthGuardProps = {
-  children: React.ReactNode
-  redirectTo?: string
-  fallback?: React.ReactNode
-}
-
 const AuthGuard = ({
   children,
   redirectTo = '/login',
   fallback = null,
-}: AuthGuardProps) => {
+}: {
+  children: React.ReactNode
+  redirectTo?: string
+  fallback?: React.ReactNode
+}) => {
   const router = useRouter()
 
-  const { isAuthenticated, isAuthChecked } = useAuthStore()
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const isAuthChecked = useAuthStore((s) => s.isAuthChecked)
 
   useEffect(() => {
     if (!isAuthChecked) return
-
     if (!isAuthenticated) {
       router.replace(redirectTo)
     }
-  }, [isAuthenticated, isAuthChecked, redirectTo, router])
+  }, [isAuthenticated, isAuthChecked])
 
   if (!isAuthChecked) return <>{fallback}</>
-
-  if (!isAuthenticated) {
-    router.replace(redirectTo)
-    return null
-  }
-  
+  if (!isAuthenticated) return null
 
   return <>{children}</>
 }
 
-export default AuthGuard
+export default AuthGuard

package/src/AuthProvider.tsx

@@ -1,143 +1,138 @@
 'use client'
 
-import { createContext, useContext, ReactNode, useEffect } from 'react'
+import {
+  createContext,
+  useContext,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useCallback,
+} from 'react'
 import { configureTokenManager, useTokenManager } from 'react-token-manager'
 import { useAuthStore, User } from '../store/useGuardStore'
 
-/* ---------------------------------- */
-/* Types */
-/* ---------------------------------- */
-
 export type AuthContextType<UserType extends User = User> = {
   user: UserType | null
   role: string | null
   isAuthenticated: boolean
   isAuthChecked: boolean
-  login: (tokens: Record<string, string>, userData?: UserType, role?: string) => void
+  login: (tokens: Record<string, string>, userData?: UserType) => void
   logout: () => void
   setUser: (user: UserType | null) => void
   tokenKey: string
 }
 
-/* ---------------------------------- */
-/* Factory */
-/* ---------------------------------- */
-
 export function createAuthContext<UserType extends User = User>(option?: {
   storage?: 'localStorage' | 'sessionStorage' | 'cookie'
   tokenKey?: string
-  rolePath?: string // e.g. 'role' or 'profile.role'
+  rolePath?: string
 }) {
-  const AuthContext = createContext<AuthContextType<UserType> | undefined>(undefined)
+  const AuthContext = createContext<AuthContextType<UserType> | undefined>(
+    undefined
+  )
 
   const AuthProvider = ({ children }: { children: ReactNode }) => {
     const storage = option?.storage ?? 'cookie'
     const tokenKey = option?.tokenKey ?? 'access_token'
     const rolePath = option?.rolePath ?? 'role'
 
+    const manager = useTokenManager()
+
+    // ✅ Selectors
+    const user = useAuthStore((s) => s.user)
+    const role = useAuthStore((s) => s.role)
+    const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+    const isAuthChecked = useAuthStore((s) => s.isAuthChecked)
+
+    const setUser = useAuthStore((s) => s.setUser)
+    const setRole = useAuthStore((s) => s.setRole)
+    const setAuth = useAuthStore((s) => s.setAuth)
+    const setAuthChecked = useAuthStore((s) => s.setAuthChecked)
+    const resetAuth = useAuthStore((s) => s.resetAuth)
+
     useEffect(() => {
       configureTokenManager({ storage })
     }, [storage])
 
-    const manager = useTokenManager()
-    const {
-      user,
-      role,
-      setUser,
-      setRole,
-      resetAuth,
-      isAuthChecked,
-      isAuthenticated,
-      setAuth,
-      setAuthChecked,
-    } = useAuthStore()
-
-    /* ---------------------------------- */
-    /* Helper: get role from path */
-    /* ---------------------------------- */
-    const extractRole = (userObj: any) => {
-      if (!userObj || !rolePath) return null
-      return rolePath.split('.').reduce((acc: any, key: string) => acc?.[key], userObj) ?? null
-    }
-    
-
-    /* ---------------------------------- */
-    /* Hydrate user from storage */
-    /* ---------------------------------- */
+    // ✅ Extract role from user
+    const extractRole = useCallback(
+      (userObj: any) => {
+        if (!userObj) return null
+        return rolePath.split('.').reduce((acc: any, key: string) => acc?.[key], userObj) ?? null
+      },
+      [rolePath]
+    )
 
+    // ✅ Hydrate once
     useEffect(() => {
-      const storedUser = manager.getSingleToken('user')
       const token = manager.getSingleToken(tokenKey)
 
       if (token && !manager.isExpired(token)) {
-        try {
-          setAuth(true)
-
-          if (storedUser) {
-            const parsedUser = JSON.parse(storedUser) as UserType
-            setUser(parsedUser)
-            setRole(extractRole(parsedUser))
+        setAuth(true)
+
+        if (user) {
+          try {
+            setUser(user) // ensure user is set in store
+            setRole(extractRole(user)) // set role automatically
+          } catch {
+            resetAuth()
           }
-        } catch {
-          resetAuth()
         }
       } else {
         resetAuth()
       }
 
       setAuthChecked(true)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tokenKey])
-
-    /* ---------------------------------- */
-    /* Login */
-    /* ---------------------------------- */
-
-    const login = (tokens: Record<string, string>, userData?: UserType, role?: string) => {
-      const tokenValue = tokens[tokenKey] ?? tokens['access_token'] ?? Object.values(tokens)[0]
-
-      manager.setTokens({
-        ...tokens,
-        [tokenKey]: tokenValue,
-        user: JSON.stringify(userData ?? null),
-      })
-
-      if (userData) setUser(userData)
-      setRole(role ?? extractRole(userData))
-      setAuth(true)
-      setAuthChecked(true)
-    }
+    }, [tokenKey, manager, user, setAuth, setAuthChecked, setUser, setRole, resetAuth, extractRole])
+
+    // ✅ Login function
+    const login = useCallback(
+      (tokens: Record<string, string>, userData?: UserType) => {
+        const tokenValue =
+          tokens[tokenKey] ?? tokens['access_token'] ?? Object.values(tokens)[0]
+
+        manager.setTokens({
+          ...tokens,
+          [tokenKey]: tokenValue,
+          user: JSON.stringify(userData ?? null),
+        })
+
+        if (userData) {
+          setUser(userData)
+          setRole(extractRole(userData)) // set role whenever user is logged in
+        }
 
-    /* ---------------------------------- */
-    /* Logout */
-    /* ---------------------------------- */
+        setAuth(true)
+        setAuthChecked(true)
+      },
+      [tokenKey, manager, setUser, setRole, extractRole, setAuth, setAuthChecked]
+    )
 
-    const logout = () => {
+    const logout = useCallback(() => {
       manager.clearTokens()
       resetAuth()
-    }
-
-    return (
-      <AuthContext.Provider
-        value={{
-          user: user as UserType | null,
-          role,
-          isAuthenticated,
-          isAuthChecked,
-          login,
-          logout,
-          setUser: (u) => setUser(u),
-          tokenKey,
-        }}
-      >
-        {children}
-      </AuthContext.Provider>
+    }, [manager, resetAuth])
+
+    // ✅ MEMOIZED CONTEXT VALUE
+    const value = useMemo(
+      () => ({
+        user: user as UserType | null,
+        role,
+        isAuthenticated,
+        isAuthChecked,
+        login,
+        logout,
+        setUser: (u: UserType | null) => {
+          setUser(u)
+          setRole(extractRole(u))
+        },
+        tokenKey,
+      }),
+      [user, role, isAuthenticated, isAuthChecked, login, logout, setUser, tokenKey, extractRole]
     )
-  }
 
-  /* ---------------------------------- */
-  /* Hook */
-  /* ---------------------------------- */
+    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+  }
 
   const useAuth = () => {
     const context = useContext(AuthContext)
@@ -145,9 +140,5 @@ export function createAuthContext<UserType extends User = User>(option?: {
     return context
   }
 
-  return {
-    AuthProvider,
-    useAuth,
-    tokenKey: option?.tokenKey ?? 'access_token',
-  }
-}
+  return { AuthProvider, useAuth }
+}

package/src/RoleGuard.tsx

@@ -1,45 +1,42 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { useAuthStore } from '../store/useGuardStore'
 
-type RoleGuardProps = {
-  children: React.ReactNode
-  allowedRoles: string[]
-  redirectTo?: string
-  fallback?: React.ReactNode
-}
-
 const RoleGuard = ({
   children,
   allowedRoles,
   redirectTo = '/unauthorized',
   fallback = null,
-}: RoleGuardProps) => {
+}: {
+  children: React.ReactNode
+  allowedRoles: string[]
+  redirectTo?: string
+  fallback?: React.ReactNode
+}) => {
   const router = useRouter()
-  const { role, isAuthChecked, isAuthenticated } = useAuthStore()
+
+  const role = useAuthStore((s) => s.role)
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
+  const isAuthChecked = useAuthStore((s) => s.isAuthChecked)
 
   useEffect(() => {
-    if (!isAuthChecked) return
+    if (!isAuthChecked || !isAuthenticated) return
 
-    // If role not allowed, redirect
     if (!role || !allowedRoles.includes(role)) {
       router.replace(redirectTo)
     }
-  }, [role, isAuthChecked, allowedRoles, redirectTo, router])
+  }, [role, isAuthenticated, isAuthChecked])
 
   if (!isAuthChecked) return <>{fallback}</>
-
-  if (!isAuthenticated) {
-    router.replace(redirectTo)
-    return null
-  }
-
-  // Block rendering if role is not allowed
+  if (!isAuthenticated) return null
   if (!role || !allowedRoles.includes(role)) return null
 
+  console.log(role);
+  
+
   return <>{children}</>
 }
 
-export default RoleGuard
+export default RoleGuard