{"id":25588594,"url":"https://github.com/picketapi/picket-react","last_synced_at":"2026-04-11T05:30:16.842Z","repository":{"id":37946043,"uuid":"478267226","full_name":"picketapi/picket-react","owner":"picketapi","description":"React SDK for the picket-js client","archived":false,"fork":false,"pushed_at":"2023-03-18T23:30:49.000Z","size":6248,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-10T16:05:03.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/picketapi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-05T19:13:07.000Z","updated_at":"2022-04-21T22:12:29.000Z","dependencies_parsed_at":"2023-02-16T11:31:36.183Z","dependency_job_id":null,"html_url":"https://github.com/picketapi/picket-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picketapi%2Fpicket-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/picketapi","download_url":"https://codeload.github.com/picketapi/picket-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239985714,"owners_count":19729512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-21T08:38:57.086Z","updated_at":"2026-04-11T05:30:16.771Z","avatar_url":"https://github.com/picketapi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Picket React SDK\n\nThe Picket React SDK, `picket-react`, is a JavaScript library for integrating Picket into React apps. It gives access to a Picket context provider and custom hook for securing your app.\n\n## Installation\n\n`picket-react` is an [npm package](https://www.npmjs.com/package/@picketapi/picket-react).\n```shell\nnpm install \"@picketapi/picket-react\"\n```\n\n## Usage\n\nThe `PicketProvider` creates a Picket context, which makes user authentication information available throughout your app! It takes a publishable API key as a prop.\n\n```tsx\nimport { PicketProvider } from \"@picketapi/picket-react\"\n\nfunction MyApp({ children }) {\n  return (\n    \u003cPicketProvider apiKey=\"YOUR_PUBLISHABLE_KEY_HERE\"\u003e\n      {children}\n    \u003c/PicketProvider\u003e\n  );\n}\n```\n\nWe’ve placed a placeholder publishable API key in this example. Replace it with your [actual publishable API key](https://picketapi.com/dashboard). After instantiating the PicketProvider, you can use the `usePicket` hook to get user authentication information within your app. Below is an example of a component that renders different information based on the user's authentication state.\n\n```tsx\nimport { usePicket } from \"@picketapi/picket-react\"\n\nconst MySecurePage = () =\u003e {\n  const { \n          isAuthenticating, \n          isAuthenticated, \n          authState, \n          logout,\n          login\n          } = usePicket();\n  \n  // user is logging in\n  if (isAuthenticating) return \"Loading\";\n\n  // user is not logged in\n  if (!isAuthenticated) {\n      return (\n        \u003cdiv\u003e\n            \u003cp\u003eYou are not logged in!\u003c/p\u003e\n            \u003cbutton onClick={() =\u003e login()}\u003eLogin with Wallet\u003c/button\u003e\n        \u003c/div\u003e\n      )\n  }\n\n  // user is logged in 🎉\n  const { user } = authState;\n  const { walletAddress } = user;\n  \n  return (\n    \u003cdiv\u003e\n       \u003cp\u003eYou are logged in as {walletAddress} \u003c/p\u003e\n       \u003cbutton onClick={() =\u003e logout()}\u003eLogout\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nThe `usePicket` hook provides your components information about the user's authentication state. You can use it to require authentication on specific routes, get user information, or get the login and logout functions.\n\n## Documentation\n\nFor more information, checkout the [docs](https://docs.picketapi.com/picket-docs/reference/libraries-and-sdks/react-sdk-picket-react)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicketapi%2Fpicket-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicketapi%2Fpicket-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicketapi%2Fpicket-react/lists"}