nextauthz 1.3.33 → 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,90 +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);
-            console.log("rolePath", rolePath);
-            console.log("parsedUser", parsedUser);
-            console.log("extractRole", extractRole(parsedUser));
-            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
@@ -161,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;
@@ -188,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,90 +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);
-            console.log("rolePath", rolePath);
-            console.log("parsedUser", parsedUser);
-            console.log("extractRole", extractRole(parsedUser));
-            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
@@ -134,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;
@@ -161,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.33",
+  "version": "1.3.36",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/readme.md

@@ -2,111 +2,158 @@
 
 ## Overview
 
-This authentication system provides:
+  ** NextAuthZ provides:
 
-    ** Global auth state
+  ** Global auth state
 
-    ** Token persistence
+  ** Token persistence
 
-    ** Typed AuthProvider & useAuth
+  ** Typed AuthProvider & useAuth
 
-    ** Route protection
+  ** Route protection (AuthGuard)
 
-    ** Role-based access
+  ** Role-based protection (RoleGuard)
 
-    ** Configurable storage system
+  ** Configurable storage system
+
+  ** Configurable role extraction (rolePath)
+
+Works perfectly with Next.js App Router.
 
 ## Installation
 
 npm install nextauthz
 
+## Setup
 
-## AuthProvider & useAuth
+1️⃣ Create Your Auth Instance
 
-Purpose
-
-Wrap your application with AuthProvider to provide global auth state (user, loading, error) and helper functions (login, logout, setUser).
+Because NextAuthZ uses a factory pattern, you must create your own auth instance.
 
 ```bash
-import { createAppAuth } from 'nextauthz'
+// src/lib/auth.ts
+import { createAuthContext } from 'nextauthz'
+
+export const {
+  AuthProvider,
+  useAuth,
+} = createAuthContext({
+  storage: 'cookie',        // 'localStorage' | 'sessionStorage' | 'cookie'
+  tokenKey: 'access_token', // optional (default: 'access_token')
+  rolePath: 'account_type', // optional (default: 'role')
+})
+```
+
+## Available Options
 
-// Choose storage type
-const { AuthProvider, useAuth } = createAppAuth('cookie', 'access_token')
+| Option     | Type                                             | Default          | Description                           |
+| ---------- | ------------------------------------------------ | ---------------- | ------------------------------------- |
+| `storage`  | `'localStorage' \| 'sessionStorage' \| 'cookie'` | `'cookie'`       | Where tokens are stored               |
+| `tokenKey` | `string`                                         | `'access_token'` | Key used for primary token            |
+| `rolePath` | `string`                                         | `'role'`         | Path to extract role from user object |
 
 
-// Options: 'localStorage' | 'sessionStorage' | 'cookie'
-// Defaults to 'cookie' if no storage is passed
 
-function App({ children }: { children: React.ReactNode }) {
+
+## 2️⃣ Wrap Your App
+
+Wrap your application with AuthProvider to provide global auth state (user, loading, error) and helper functions (login, logout, setUser).
+
+```bash
+// app/layout.tsx
+
+import { AuthProvider } from '@/lib/auth'
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return <AuthProvider>{children}</AuthProvider>
 }
-
-export default App
 ```
 
-## Hook: useAuth
+## useAuth Hook
 
 ```bash 
-import { useAuth } from 'nextauthz'
-
-const { user, role, login, logout, setUser, isAuthenticated, isAuthChecked } = useAuth()
+import { useAuth } from '@/lib/auth'
+
+const {
+  user,
+  role,
+  isAuthenticated,
+  isAuthChecked,
+  login,
+  logout,
+  setUser,
+} = useAuth()
 ```
 
 Available Properties
 
-| Name              | Type                                 | Description                                                   |
-| ----------------- | ------------------------------------ | ------------------------------------------------------------- |
-| `user`            | `User \| null`                       | Current authenticated user                                    |
-| `role`            | `string \| null`                     | User role                                                     |
-| `isAuthenticated` | `boolean`                            | True if the user is logged in                                 |
-| `isAuthChecked`   | `boolean`                            | True if auth state has finished restoring from storage/token  |
-| `login`           | `(tokens, userData?, role?) => void` | Logs in a user, saves tokens, and optionally sets user + role |
-| `logout`          | `() => void`                         | Clears auth tokens and resets state                           |
-| `setUser`         | `(user: User \| null) => void`       | Update user state manually                                    |
+| Name              | Type                                 | Description                              |
+| ----------------- | ------------------------------------ | ---------------------------------------- |
+| `user`            | `User \| null`                       | Current authenticated user               |
+| `role`            | `string \| null`                     | Extracted user role                      |
+| `isAuthenticated` | `boolean`                            | True if logged in                        |
+| `isAuthChecked`   | `boolean`                            | True when auth hydration is complete     |
+| `login`           | `(tokens, userData?, role?) => void` | Save tokens + optionally set user + role |
+| `logout`          | `() => void`                         | Clears tokens and resets auth            |
+| `setUser`         | `(user \| null) => void`             | Manually update user                     |
 
-
-Example: Logging in
+Example: Logging In
 
 ```bash 
-const handleLogin = () => {
+const { login } = useAuth()
+
+const handleLogin = async () => {
   const tokens = {
     access_token: 'abc123',
     refresh_token: 'xyz789',
   }
 
   const user = {
-    id: 1,
+    id: '1',
     name: 'John',
-    role: 'admin',
+    account_type: 'admin',
   }
 
-  login(tokens, user, user.role)
+  login(tokens, user)
 }
+```
 
-const handleLogout = () => {
-    logout(); // clears token and user
-    router.replace('/authentication/login');
-};
+If rolePath: 'account_type' is configured, role is automatically extracted.
+
+You can also override it manually:
+
+``` bash
+login(tokens, user, 'admin')
+```
+## Logging Out
+
+```bash
+const { logout } = useAuth()
+
+const handleLogin = async () => {
+  logout()
+  router.replace('/authentication/login');
+}
 ```
 
 ## AuthGuard
 
 Purpose
 
-Protect routes/pages to ensure only authenticated users can access them.
+Protect pages so only authenticated users can access them.
 
 Props
 
-| Name         | Type        | Default  | Description                            |
-| ------------ | ----------- | -------- | -------------------------------------- |
-| `children`   | `ReactNode` | required | Components to render if authenticated  |
-| `redirectTo` | `string`    | `/login` | Page to redirect unauthenticated users |
-| `fallback`   | `ReactNode` | `null`   | Optional loading or fallback UI        |
+| Name         | Type        | Default  | Description                        |
+| ------------ | ----------- | -------- | ---------------------------------- |
+| `children`   | `ReactNode` | required | Content to render if authenticated |
+| `redirectTo` | `string`    | `/login` | Redirect if not authenticated      |
+| `fallback`   | `ReactNode` | `null`   | Optional loading UI                |
 
 ## Usage Example
 
 ```bash
-import AuthGuard from 'nextauthz'
+import { AuthGuard } from 'nextauthz'
 
 function DashboardPage() {
   return (
@@ -118,36 +165,34 @@ function DashboardPage() {
 ```
 Behavior:
 
-    ** Redirects to /login if the user is not authenticated.
+    ** Waits for isAuthChecked
+    ** Redirects to redirectTo value if not authenticated
+    ** Renders children if authenticated
 
 
 ## RoleGuard
 
-Purpose
+Restrict access based on role.
 
-RoleGuard restricts access to certain pages or components based on a user’s role. It assumes authentication is already handled (e.g., via AuthGuard or useAuth) and only checks whether the user’s role is allowed to access the content.
+Props
 
-| Name           | Type        | Default         | Description                                                   |
-| -------------- | ----------- | --------------- | ------------------------------------------------------------- |
-| `children`     | `ReactNode` | required        | Components to render if the user role is allowed              |
-| `allowedRoles` | `string[]`  | required        | List of roles allowed to access this page                     |
-| `redirectTo`   | `string`    | `/unauthorized` | Redirect page for unauthorized roles                          |
-| `fallback`     | `ReactNode` | `null`          | Optional loading or fallback UI displayed while checking role |
+| Name           | Type        | Default         | Description                  |
+| -------------- | ----------- | --------------- | ---------------------------- |
+| `children`     | `ReactNode` | required        | Content to render            |
+| `allowedRoles` | `string[]`  | required        | Allowed roles                |
+| `redirectTo`   | `string`    | `/unauthorized` | Redirect if role not allowed |
+| `fallback`     | `ReactNode` | `null`          | Optional loading UI          |
 
 
 Usage Example
 
 ```bash
-import RoleGuard from 'nextauthz'
-import { useAuth } from 'nextauthz'
-
-function AdminPage() {
-  const { user } = useAuth()
+import { RoleGuard } from 'nextauthz'
 
+export default function AdminPage() {
   return (
-    <RoleGuard allowedRoles={['admin']} fallback={<p>Checking permissions...</p>}>
+    <RoleGuard allowedRoles={['admin']} fallback={<p>Checking role...</p>}>
       <h1>Admin Dashboard</h1>
-      <p>Welcome, {user?.name}</p>
     </RoleGuard>
   )
 }
@@ -155,19 +200,52 @@ function AdminPage() {
 
 Behavior:
 
-    ** RoleGuard will show the fallback UI while the authentication state is loading (isAuthChecked is false).
-    ** 
+    ** Waits for isAuthChecked
+    ** Redirects if role not in allowedRoles
+    ** Blocks rendering if unauthorized
 
 
 ## Storage Options
 
 You can configure token storage:
 
-| Storage Type     | Description                     |
-| ---------------- | ------------------------------- |
-| `localStorage`   | Persists until manually cleared |
-| `sessionStorage` | Clears on tab close             |
-| `cookie`         | Cookie-based storage (default)  |
+| Storage Type     | Behavior               |
+| ---------------- | ---------------------- |
+| `localStorage`   | Persists until cleared |
+| `sessionStorage` | Clears on tab close    |
+| `cookie`         | Cookie-based (default) |
+
+## Role Path Examples
+Given this user:
+
+```bash 
+{
+  id: "1",
+  email: "user@email.com",
+  account_type: "artist"
+}
+```
+
+Use:
+
+```bash
+rolePath: 'account_type'
+```
+
+Nested example:
+```bash
+{
+  profile: {
+    role: 'admin'
+  }
+}
+```
+
+Use:
+
+```bash
+rolePath: 'profile.role'
+```
 
 
 ## Why NextAuthZ?
@@ -184,4 +262,8 @@ You can configure token storage:
 
     ** Lightweight
 
-    ** No opinionated backend
+    ** No opinionated backend
+
+    ** Backend agnostic
+
+    ** Factory-based (multiple auth instances supported)

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,112 +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
-            console.log('rolePath', rolePath);
-            console.log('parsedUser', parsedUser);
-            console.log('extractRole', extractRole(parsedUser));
-            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)
@@ -148,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