nextauthz 1.3.34 → 1.3.36

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;
@@ -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;
@@ -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

@@ -65,87 +65,82 @@ function createAuthContext(option) {
     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;
+      if (!userObj) return null;
       return rolePath.split(".").reduce((acc, key) => acc?.[key], userObj) ?? null;
     };
     (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 (storedUser) {
+          try {
+            const parsed = JSON.parse(storedUser);
+            setUser(parsed);
+            setRole(extractRole(parsed));
+          } 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 = () => {
+    const login = (0, import_react.useCallback)(
+      (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);
+      },
+      [tokenKey]
+    );
+    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
-        },
-        children
-      }
+    }, []);
+    const value = (0, import_react.useMemo)(
+      () => ({
+        user,
+        role,
+        isAuthenticated,
+        isAuthChecked,
+        login,
+        logout,
+        setUser,
+        tokenKey
+      }),
+      [user, role, isAuthenticated, isAuthChecked, login, logout, tokenKey]
     );
+    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 +153,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,18 +178,17 @@ 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;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
 };

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
@@ -38,87 +44,82 @@ function createAuthContext(option) {
     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;
+      if (!userObj) return null;
       return rolePath.split(".").reduce((acc, key) => acc?.[key], userObj) ?? null;
     };
     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 (storedUser) {
+          try {
+            const parsed = JSON.parse(storedUser);
+            setUser(parsed);
+            setRole(extractRole(parsed));
+          } 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 = () => {
+    const login = useCallback(
+      (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);
+      },
+      [tokenKey]
+    );
+    const logout = useCallback(() => {
       manager.clearTokens();
       resetAuth();
-    };
-    return /* @__PURE__ */ jsx(
-      AuthContext.Provider,
-      {
-        value: {
-          user,
-          role,
-          isAuthenticated,
-          isAuthChecked,
-          login,
-          logout,
-          setUser: (u) => setUser(u),
-          tokenKey
-        },
-        children
-      }
+    }, []);
+    const value = useMemo(
+      () => ({
+        user,
+        role,
+        isAuthenticated,
+        isAuthChecked,
+        login,
+        logout,
+        setUser,
+        tokenKey
+      }),
+      [user, role, isAuthenticated, isAuthChecked, login, logout, tokenKey]
     );
+    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 +132,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,18 +157,17 @@ 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;
   return /* @__PURE__ */ jsx3(Fragment2, { children });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextauthz",
-  "version": "1.3.34",
+  "version": "1.3.36",
   "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,13 +1,16 @@
 '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
@@ -19,14 +22,10 @@ export type AuthContextType<UserType extends User = User> = {
   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)
 
@@ -35,109 +34,94 @@ export function createAuthContext<UserType extends User = User>(option?: {
     const tokenKey = option?.tokenKey ?? 'access_token'
     const rolePath = option?.rolePath ?? 'role'
 
+    const manager = useTokenManager()
+
+    // ✅ Selectors (IMPORTANT)
+    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
+      if (!userObj) return null
       return rolePath.split('.').reduce((acc: any, key: string) => acc?.[key], userObj) ?? null
     }
-    
-
-    /* ---------------------------------- */
-    /* Hydrate user from storage */
-    /* ---------------------------------- */
 
+    // ✅ 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 (storedUser) {
+          try {
+            const parsed = JSON.parse(storedUser)
+            setUser(parsed)
+            setRole(extractRole(parsed))
+          } 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)
-    }
-
-    /* ---------------------------------- */
-    /* Logout */
-    /* ---------------------------------- */
+    const login = useCallback(
+      (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]
+    )
 
-    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>
+    }, [])
+
+    // ✅ MEMOIZED CONTEXT VALUE
+    const value = useMemo(
+      () => ({
+        user: user as UserType | null,
+        role,
+        isAuthenticated,
+        isAuthChecked,
+        login,
+        logout,
+        setUser,
+        tokenKey,
+      }),
+      [user, role, isAuthenticated, isAuthChecked, login, logout, tokenKey]
     )
-  }
 
-  /* ---------------------------------- */
-  /* Hook */
-  /* ---------------------------------- */
+    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+  }
 
   const useAuth = () => {
     const context = useContext(AuthContext)
@@ -145,9 +129,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,39 @@
 '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
 
   return <>{children}</>
 }
 
-export default RoleGuard
+export default RoleGuard