{"_id":"@aoculi/react-authentication","_rev":"5-f91dd9133341c196bec72cb97f28f771","name":"@aoculi/react-authentication","dist-tags":{"latest":"0.7.1"},"versions":{"0.3.2":{"name":"@aoculi/react-authentication","version":"0.3.2","license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","lint":"tsc","lint:fix":"eslint src --fix","dev":"tsup src/index.ts --watch"},"repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"devDependencies":{"@changesets/cli":"^2.27.1","@types/eslint":"^8.44.9","@types/react":"^18.2.45","@types/react-dom":"^18.2.17","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","jwt-decode":"^4.0.0","prettier":"^3.1.1","react":"^18.2.0","tslib":"^2.6.2","tsup":"^8.0.1","typescript":"<=5.2.0"},"peerDependencies":{"react":">=16","react-router-dom":">=6"},"dependencies":{"react-router-dom":">=6"},"_id":"@aoculi/react-authentication@0.3.2","gitHead":"e33ef86e63210c54ce4d32f7610992eb46cadf62","description":"React Authentication offers a straightforward and efficient way to handle user authentication in your React applications. The primary goal of this package is to store the access token and optional user data returned by the authentication API during the lo","bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"homepage":"https://github.com/aoculi/react-authentication#readme","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-T/pAr6R8XqQTk1Ix5EKL8qHzOYywwiYG7zIKz5SAiHXbit4ybeJuoLKBbTvF4p9cTE4VALjbZrXeI8p3EsHlOA==","shasum":"284285515008209d37efdce7eb035f4ac3518fed","tarball":"https://registry.npmjs.org/@aoculi/react-authentication/-/react-authentication-0.3.2.tgz","fileCount":17,"unpackedSize":39408,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3gY223KLZ8fhaoP2xJzuehnNo0RYMg15gi7W5XVRK1AiEA2hvxVkwgQfNFz9J/FWA0FOEyHqi7McxuloA0hq03k8k="}]},"_npmUser":{"name":"aoculi","email":"alexis.oculi@gmail.com"},"directories":{},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-authentication_0.3.2_1702760722958_0.9312988233576236"},"_hasShrinkwrap":false},"0.4.0":{"name":"@aoculi/react-authentication","version":"0.4.0","license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","lint":"tsc","lint:fix":"eslint src --fix","dev":"tsup src/index.ts --watch"},"repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"devDependencies":{"@changesets/cli":"^2.27.1","@types/eslint":"^8.44.9","@types/react":"^18.2.45","@types/react-dom":"^18.2.17","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","jwt-decode":"^4.0.0","prettier":"^3.1.1","react":"^18.2.0","tslib":"^2.6.2","tsup":"^8.0.1","typescript":"<=5.2.0"},"peerDependencies":{"react":">=16","react-router-dom":">=6"},"dependencies":{"react-router-dom":">=6"},"_id":"@aoculi/react-authentication@0.4.0","gitHead":"f35b942f1e5e9a7615f7e76bcc181b5097aeeb04","description":"React Authentication offers a straightforward and efficient way to handle user authentication in your React applications. The primary goal of this package is to store the access token and optional user data returned by the authentication API during the lo","bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"homepage":"https://github.com/aoculi/react-authentication#readme","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-LAbOjY21AaYW3ZNSjDc1X9fA14/RtjA6XSqEVP5gK3Aib1ooAAa/1SfxmUCRafzR+dGWE53b7sEeTlmjiKNJDg==","shasum":"16a278f564fb0e8600d03ac74e2b49241436e703","tarball":"https://registry.npmjs.org/@aoculi/react-authentication/-/react-authentication-0.4.0.tgz","fileCount":17,"unpackedSize":39464,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlaS4nWqIhMmJVrPd/P+iwNRkWvANfT5xQSfIlBni0gQIhALxX7zI0iV1sU+AUPfy1xa5lk63vVaDjKlSMlVqhvmfq"}]},"_npmUser":{"name":"aoculi","email":"alexis.oculi@gmail.com"},"directories":{},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-authentication_0.4.0_1702761624987_0.832503773102107"},"_hasShrinkwrap":false},"0.5.0":{"name":"@aoculi/react-authentication","version":"0.5.0","license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","lint":"eslint src --fix","dev":"tsup src/index.ts --watch"},"repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"devDependencies":{"@changesets/cli":"^2.27.1","@types/eslint":"^8.44.9","@types/react":"^18.2.45","@types/react-dom":"^18.2.17","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","jwt-decode":"^4.0.0","prettier":"^3.1.1","react":"^18.2.0","tslib":"^2.6.2","tsup":"^8.0.1","typescript":"<=5.2.0"},"peerDependencies":{"react":">=16","react-router-dom":">=6"},"dependencies":{"react-router-dom":">=6"},"_id":"@aoculi/react-authentication@0.5.0","gitHead":"7b26d5c15d76d166f8b49e5a82f183bad233a33d","description":"> **⚠️ Important Notice: This library is currently in beta, and its API is subject to change. It is not recommended for use in production environments at this stage.**","bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"homepage":"https://github.com/aoculi/react-authentication#readme","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-TcM/DC4RHc+/h24l/3jOgQzw/CrAWr/pG0TfXBy0Vub4FRuY1LNxRXk5hsH94RKmPS1PlMtp7XfpA+azeALpzA==","shasum":"1a17a6bdfcc912b3e559737b43258122b71c60fd","tarball":"https://registry.npmjs.org/@aoculi/react-authentication/-/react-authentication-0.5.0.tgz","fileCount":17,"unpackedSize":40778,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2G9091PW8F+Be/AevKo4tT+V7Df1+zTMFGpM3yoBDhgIhAKHWZPv/WN0Inh4dZI7/YVhibbfir+Ik7FfaUQkgFsTI"}]},"_npmUser":{"name":"aoculi","email":"alexis.oculi@gmail.com"},"directories":{},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-authentication_0.5.0_1702811982637_0.2220979188525487"},"_hasShrinkwrap":false},"0.6.0":{"name":"@aoculi/react-authentication","version":"0.6.0","license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","keywords":["auth","authentication","jwt","react","role","permission"],"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","lint":"eslint src --fix","dev":"tsup src/index.ts --watch"},"repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"devDependencies":{"@changesets/cli":"^2.27.1","@types/eslint":"^8.44.9","@types/react":"^18.2.45","@types/react-dom":"^18.2.17","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","jwt-decode":"^4.0.0","prettier":"^3.1.1","react":"^18.2.0","tslib":"^2.6.2","tsup":"^8.0.1","typescript":"<=5.2.0"},"peerDependencies":{"react":">=16","react-router-dom":">=6"},"dependencies":{"react-router-dom":">=6"},"_id":"@aoculi/react-authentication@0.6.0","gitHead":"72ed1fd10e928bf51143dc96c47141b690f64c36","description":"> **⚠️ Important Notice: This library is currently in beta, and its API is subject to change. It is not recommended for use in production environments at this stage.**","bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"homepage":"https://github.com/aoculi/react-authentication#readme","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-+BD0F6YHlKShrcC2tbzI45jOyaGbN69gNBDQUqHUWQpZYRj8iYzmCP+GKOEXEbA8aYH+fE+bSv1qGKkNQsREHg==","shasum":"46b8d8c07cef3c4eb1df1bfebd20aa8719f094ad","tarball":"https://registry.npmjs.org/@aoculi/react-authentication/-/react-authentication-0.6.0.tgz","fileCount":18,"unpackedSize":49788,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh10B4XeRAaz0B9A7WBcgSmfGYsBaxfymKujLYNRzVQAiASyVEUj5iGT5SZMvJRPigPIXGdTbCIC6w1W18xGvVKrw=="}]},"_npmUser":{"name":"aoculi","email":"alexis.oculi@gmail.com"},"directories":{},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-authentication_0.6.0_1702915126203_0.6611035537646612"},"_hasShrinkwrap":false},"0.7.0":{"name":"@aoculi/react-authentication","version":"0.7.0","license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","keywords":["auth","authentication","jwt","react","role","permission"],"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","lint":"eslint src --fix","dev":"tsup src/index.ts --watch"},"repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"devDependencies":{"@changesets/cli":"^2.27.1","@types/eslint":"^8.44.9","@types/react":"^18.2.45","@types/react-dom":"^18.2.17","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","jwt-decode":"^4.0.0","prettier":"^3.1.1","react":"^18.2.0","tslib":"^2.6.2","tsup":"^8.0.1","typescript":"<=5.2.0"},"peerDependencies":{"react":">=16","react-router-dom":">=6"},"dependencies":{"react-router-dom":">=6"},"_id":"@aoculi/react-authentication@0.7.0","gitHead":"0334b1dfaea9e2b9d67875e30a05137f5aab8edf","description":"> **⚠️ Important Notice: This library is currently in beta, and its API is subject to change. It is not recommended for use in production environments at this stage.**","bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"homepage":"https://github.com/aoculi/react-authentication#readme","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-u7c7LW7GEUaGcdlJ3OXDZx8FXuksVk6tpIGbjaB4bsPtTtrS8aP5RJf3JH4H2QKhMzJJgvSYgz1SSKMs/8QxKg==","shasum":"1054d3029f9e1d5f7146e3f79f47dbc44281cbb8","tarball":"https://registry.npmjs.org/@aoculi/react-authentication/-/react-authentication-0.7.0.tgz","fileCount":19,"unpackedSize":53658,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfizrkwSHo/sLADn8fNiI9L0qBJwBGlPRp1nbH60WsVwIgAgFAugeybQ35FtjAnfYxjIFLxlpuKlnTWgRO/VfArnI="}]},"_npmUser":{"name":"aoculi","email":"alexis.oculi@gmail.com"},"directories":{},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-authentication_0.7.0_1705576026052_0.24517258294868327"},"_hasShrinkwrap":false},"0.7.1":{"name":"@aoculi/react-authentication","version":"0.7.1","license":"MIT","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","keywords":["auth","authentication","jwt","react","role","permission"],"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","lint":"eslint src --fix","dev":"tsup src/index.ts --watch"},"repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"devDependencies":{"@changesets/cli":"^2.27.1","@types/eslint":"^8.44.9","@types/react":"^18.2.45","@types/react-dom":"^18.2.17","eslint":"^8.55.0","eslint-config-prettier":"^9.1.0","eslint-config-react-app":"^7.0.1","eslint-plugin-prettier":"^5.0.1","husky":"^8.0.3","jwt-decode":"^4.0.0","prettier":"^3.1.1","react":"^18.2.0","tslib":"^2.6.2","tsup":"^8.0.1","typescript":"<=5.2.0"},"peerDependencies":{"react":">=16","react-router-dom":">=6"},"dependencies":{"react-router-dom":">=6"},"_id":"@aoculi/react-authentication@0.7.1","gitHead":"87903b6e79ce0174c99878ed8eb78e358b1534d6","description":"> **⚠️ Important Notice: This library is currently in beta, and its API is subject to change. It is not recommended for use in production environments at this stage.**","bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"homepage":"https://github.com/aoculi/react-authentication#readme","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-3k9q9XueWUW5CgPk7RIR5aiQzAPwlNqWo3QDp3a2l0w5pEnrzHkYZ6OhM+x0AQbozjvsVjilr/rorXUdz/ggUg==","shasum":"7aa927b4661233ce4ecf4fed293fe13dcf177168","tarball":"https://registry.npmjs.org/@aoculi/react-authentication/-/react-authentication-0.7.1.tgz","fileCount":19,"unpackedSize":53806,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHL5eRnKlbd2JkMo/B+FDm7gVBHfDg4rK4X47/SjNGOhAiBv1hYCdlTc2LuDOLFjW55GNtQTO4l6GfSB1/J818Mhag=="}]},"_npmUser":{"name":"aoculi","email":"alexis.oculi@gmail.com"},"directories":{},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-authentication_0.7.1_1705847343526_0.5203509744385253"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-16T21:05:22.821Z","0.3.2":"2023-12-16T21:05:23.173Z","modified":"2024-01-21T14:29:03.881Z","0.4.0":"2023-12-16T21:20:25.217Z","0.5.0":"2023-12-17T11:19:42.889Z","0.6.0":"2023-12-18T15:58:46.444Z","0.7.0":"2024-01-18T11:07:06.225Z","0.7.1":"2024-01-21T14:29:03.706Z"},"maintainers":[{"name":"aoculi","email":"alexis.oculi@gmail.com"}],"description":"> **⚠️ Important Notice: This library is currently in beta, and its API is subject to change. It is not recommended for use in production environments at this stage.**","homepage":"https://github.com/aoculi/react-authentication#readme","repository":{"type":"git","url":"git+https://github.com/aoculi/react-authentication.git"},"bugs":{"url":"https://github.com/aoculi/react-authentication/issues"},"license":"MIT","readme":"# React Authentication\r\n\r\n> **⚠️ Important Notice: This library is currently in beta, and its API is subject to change. It is not recommended for use in production environments at this stage.**\r\n\r\n## Introduction\r\n\r\nThe primary goal of **React Authentication** is to store the JWT accessToken and optional user data returned by the authentication API during the login process. By managing these critical pieces of authentication information, this package simplifies the process of guarding certain pages in your React app, ensuring that only **authenticated** users with the proper **permissions** can access them.\r\n\r\n## Installation\r\n\r\nTo install the package, use npm or yarn:\r\n\r\n```sh\r\nnpm install @aoculi/react-authentication\r\n# or\r\nyarn add @aoculi/react-authentication\r\n```\r\n\r\n## Integration Example\r\n\r\n```jsx\r\nimport { AuthenticationProvider, useAuthentication, usePermission } from '@aoculi/react-authentication'\r\nimport { login } from './service/authApi'\r\nimport { LoginForm } from './component/LoginForm'\r\n\r\nfunction App() {\r\n  return (\r\n    <AuthenticationProvider>\r\n      <Page />\r\n    </AuthenticationProvider>\r\n  )\r\n}\r\n\r\nfunction Page() {\r\n  const {\r\n    signIn,\r\n    signOut,\r\n    isAuthenticated,\r\n    isLoading,\r\n    jwt,\r\n    data,\r\n  } = useAuthentication()\r\n\r\n  const { hasPermissions } = usePermission()\r\n\r\n  const onLogin = (event) => {\r\n    event.preventDefault()\r\n\r\n    const formData = new FormData(event.target);\r\n    const response = await fetch('https://my-api.com/login', {\r\n      method: 'POST',\r\n      body: formData\r\n    })\r\n\r\n    if (response.ok) {\r\n      const data = await response.json();\r\n      signin({\r\n        jwt: data.accessToken,\r\n        data: { username: data.username},\r\n        roles: data.roles,\r\n        permissions: data.permissions\r\n      })\r\n    }\r\n  }\r\n\r\n  const onLogout = () => {\r\n    /* Application logic here */\r\n    signOut()\r\n  }\r\n\r\n  if(isLoading) return <div>Loading..</div>\r\n\r\n  return (\r\n    <div>\r\n      <h1>My Page</div>\r\n      <main>\r\n        /* Display a login form when the user is not authenticated */\r\n        {!isAuthenticated && <LoginForm onSubmit={onLogin} />}\r\n\r\n        /* Display user information after authentication */\r\n        {isAuthenticated && <div>Welcome {data.username}!</div>}\r\n\r\n        /* Log out the user */\r\n        {isAuthenticated && <button onClick={onLogout}>Log out</button>}\r\n\r\n        /* Determine if the user has a specific permission */\r\n        {hasPermissions(['write articles']) && <button onClick={}>New article</button>}\r\n      </main>\r\n    </div>\r\n  )\r\n}\r\n\r\nrender(<App />, document.getElementById('root'))\r\n```\r\n\r\n## API\r\n\r\n### AuthenticationProvider\r\n\r\nA context provider that wraps your application or components where authentication state is needed.\r\n\r\n```jsx\r\nimport { AuthenticationProvider } from '@aoculi/react-authentication'\r\n\r\nfunction App() {\r\n  return (\r\n    <AuthenticationProvider>\r\n      {/* Your application components */}\r\n    </AuthenticationProvider>\r\n  )\r\n}\r\n```\r\n\r\n#### Optional Props\r\n\r\nThe AuthenticationProvider component accepts several optional props to customize its behavior and functionality:\r\n\r\n| Property       | Description                                                                                                                                                                                                                           |\r\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `refreshToken` | A function that contains the logic for refreshing the authentication token. This is invoked when the token needs to be refreshed, such as when it's nearing expiration.                                                               |\r\n| `storageKey`   | A string specifying the name of the key used by the localStorage store. The default value is \\_authentication. This is useful if you need to customize the storage key, for instance, to avoid conflicts with other items in storage. |\r\n\r\n### useAuthentication\r\n\r\nWithin any component wrapped by AuthenticationProvider, you can use the useAuthentication hook to access the authentication state and control methods.\r\n\r\n```jsx\r\nimport { useAuthentication } from '@aoculi/react-authentication'\r\n\r\nfunction YourComponent() {\r\n  const {\r\n    signIn,\r\n    signOut,\r\n    isAuthenticated,\r\n    isLoading,\r\n    isError,\r\n    error,\r\n    jwt,\r\n    data,\r\n    roles,\r\n    permissions,\r\n  } = useAuthentication()\r\n}\r\n```\r\n\r\n#### signing\r\n\r\nCall this method with an object containing your valid JWT accessToken, and any additional information you need to store.\r\n\r\n```javascript\r\nsignIn({\r\n  jwt: 'your_jwt_accessToken',\r\n  data: {\r\n    /* optional data */\r\n  },\r\n  roles: [\r\n    /* optional user roles */\r\n  ],\r\n  permissions: [\r\n    /* optional user permissions */\r\n  ],\r\n  afterSignIn: async () => {\r\n    /* a function that is executed after the sign-in process*/\r\n  },\r\n})\r\n```\r\n\r\n#### signout\r\n\r\nThis method, which requires no parameters, clears the authentication state.\r\n\r\n```javascript\r\nsignOut({\r\n  afterSignOut: async () => {\r\n    /* a function that is called following a successful sign-out */\r\n  },\r\n})\r\n```\r\n\r\n#### isAuthenticated\r\n\r\nA boolean flag that represents the user's authentication status in your application. When isAuthenticated is true, it indicates that the user is currently authenticated, meaning they have successfully logged in or have a valid accesToken.\r\n\r\n#### isLoading\r\n\r\nIndicates whether the authentication process is in progress. This is particularly useful for handling UI states in your application, such as displaying loading indicators or disabling certain elements while the authentication status is being determined.\r\n\r\nFor example, you can use isLoading to show a spinner on your login page or to prevent user interaction with parts of your application until the authentication process has completed [cf: Guard code below](#guard).\r\n\r\n#### isError\r\n\r\nIf an error arises while attempting to refresh the token—such as network issues, invalid credentials, or expired tokens—this flag is set to true. This allows you to respond appropriately, for instance, by alerting the user, redirecting to a login page, or attempting a re-authentication.\r\n\r\n#### error\r\n\r\nThe error message that appears in case of an error occurrence.\r\n\r\n#### jwt\r\n\r\nThe token value returned by the sign-in process.\r\n\r\n#### data\r\n\r\nOptionnal data returned by the sign-in process.\r\n\r\n#### roles\r\n\r\nOptionnal user roles returned by the sign-in process.\r\n\r\n#### permissions\r\n\r\nOptionnal user permissions returned by the sign-in process.\r\n\r\n### usePermission\r\n\r\nWithin any component wrapped by AuthenticationProvider, you can use the usePermission hook to manage your user permissions.\r\n\r\n```jsx\r\nimport { usePermission } from '@aoculi/react-authentication'\r\n\r\nfunction YourComponent() {\r\n  const { hasRoles, hasPermissions, assignRole, givePermissionTo } =\r\n    usePermission()\r\n}\r\n```\r\n\r\n#### hasRoles\r\n\r\nThis method, allow you to check the user roles.\r\n\r\n```javascript\r\nconst isWriter = hasRoles(['writer'])\r\n```\r\n\r\n#### hasPermissions\r\n\r\nThis method, allow you to check the user permissions.\r\n\r\n```javascript\r\nconst allow = hasPermissions(['write articles'])\r\n```\r\n\r\n#### assignRole\r\n\r\nThis method allow you to change the roles of the user anywhere in the lifecycle of your application.\r\n\r\n```javascript\r\nassignRole('editor')\r\n```\r\n\r\n#### givePermissionTo\r\n\r\nThis method allow you to change the permissions of the user anywhere in the lifecycle of your application.\r\n\r\n```javascript\r\ngivePermissionTo('delete articles')\r\n```\r\n\r\n### Middlewares\r\n\r\n#### RequireAuth (require react-router-dom)\r\n\r\nThe RequireAuth component is used to protect routes that should only be accessible to authenticated users. If the user is not authenticated, they are redirected to a specified login or authentication route.\r\n\r\nUsage Example\r\n\r\n```jsx\r\nimport { Routes, Route } from 'react-router-dom'\r\nimport { RequireAuth } from '@aoculi/react-authentication'\r\nimport Loader from './components/Loader'\r\nimport Home from './pages/Home'\r\n\r\nfunction App() {\r\n  return\r\n    <Routes>\r\n      <Route element={\r\n        <RequireAuth redirectPath=\"/auth/login\" loader={<Loader />} />}\r\n      >\r\n        <Route path=\"/\" element={<Home />} />\r\n      </Route>\r\n    <Routes>\r\n}\r\n```\r\n\r\n##### Props\r\n\r\n| Property       | Description                                                                                                                                |\r\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| `redirectPath` | (string): The path to redirect unauthenticated users to.                                                                                   |\r\n| `loader`       | (React component, optional): A loader component displayed while authentication status is being determined (e.g., during token validation). |\r\n\r\n#### RequireNoAuth (require react-router-dom)\r\n\r\nThe RequireNoAuth component is used to protect routes that should be accessible only to unauthenticated users, like login or sign-up pages. Authenticated users visiting these routes are redirected to a specified path.\r\n\r\nUsage Example\r\n\r\n```jsx\r\nimport { Routes, Route } from 'react-router-dom'\r\nimport { RequireAuth } from '@aoculi/react-authentication'\r\nimport Loader from './components/Loader'\r\nimport Login from './pages/Login'\r\n\r\nfunction App() {\r\n  return\r\n    <Routes>\r\n      <Route element={\r\n        <RequireNoAuth redirectPath=\"/\" loader={<Loader />} />}\r\n      >\r\n        <Route path=\"/auth/login\" element={<Login />} />\r\n      </Route>\r\n    <Routes>\r\n}\r\n```\r\n\r\n##### Props\r\n\r\n| Property       | Description                                                                                                                                |\r\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| `redirectPath` | (string): The path to redirect authenticated users to.                                                                                     |\r\n| `loader`       | (React component, optional): A loader component displayed while authentication status is being determined (e.g., during token validation). |\r\n\r\n#### RequirePermissions\r\n\r\nThe RequirePermissions component is used to guard specific routes or components, ensuring that only users with the specified roles can access them. If a user does not have all the required roles, a fallback component is rendered instead.\r\n\r\nUsage Example\r\n\r\n```jsx\r\nimport { RequirePermissions } from '@aoculi/react-authentication'\r\nimport AdminDashboard from './components/AdminDashboard'\r\nimport AccessDenied from './components/AccessDenied'\r\n\r\nfunction Component() {\r\n  return (\r\n    <RequirePermissions\r\n      roles={['editor']}\r\n      permissions={['delete articles']}\r\n      fallBack={<AccessDenied />}\r\n    >\r\n      <AdminDashboard />\r\n    </RequirePermissions>\r\n  )\r\n}\r\n```\r\n\r\n##### Props\r\n\r\n| Property                  | Description                                                                                                                                                                                                                                                                         |\r\n| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `roles` and `permissions` | (array of strings, optional): Arrays specifying the roles and permissions required for accessing the component or route. Users must possess all listed roles and permissions to access the content. If either array is empty or not provided, that particular criterion is ignored. |\r\n| `children`                | (ReactNode): The protected content or components displayed when access criteria are met.                                                                                                                                                                                            |\r\n| `fallBack`                | (ReactNode, optional): A component rendered when the user lacks the required roles or permissions. Defaults to **null**.                                                                                                                                                            |\r\n\r\n## Contributing\r\n\r\nContributions, issues, and feature requests are welcome. Feel free to check issues page for open issues or to open a new issue.\r\n\r\n## License\r\n\r\nDistributed under the MIT License. See LICENSE for more information.\r\n\r\n## Inspiration\r\n\r\n- react-auth-kit\r\n","readmeFilename":"README.md","keywords":["auth","authentication","jwt","react","role","permission"]}