{"id":18321083,"url":"https://github.com/workos/authkit-react","last_synced_at":"2025-07-06T12:03:10.219Z","repository":{"id":251257509,"uuid":"830656086","full_name":"workos/authkit-react","owner":"workos","description":"React SDK for AuthKit","archived":false,"fork":false,"pushed_at":"2025-03-18T13:36:20.000Z","size":147,"stargazers_count":22,"open_issues_count":6,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T20:50:17.661Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/workos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-18T17:46:01.000Z","updated_at":"2025-03-18T13:36:30.000Z","dependencies_parsed_at":"2024-09-06T02:43:43.991Z","dependency_job_id":"06f0dfc8-f2d6-4377-8762-f46e8b297ce1","html_url":"https://github.com/workos/authkit-react","commit_stats":null,"previous_names":["workos/authkit-react"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workos%2Fauthkit-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/workos","download_url":"https://codeload.github.com/workos/authkit-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411234,"owners_count":20934650,"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":"2024-11-05T18:18:17.507Z","updated_at":"2025-07-06T12:03:10.213Z","avatar_url":"https://github.com/workos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AuthKit React Library\n\n## Installation\n\n```bash\nnpm install @workos-inc/authkit-react\n```\n\nor\n\n```bash\nyarn add @workos-inc/authkit-react\n```\n\n## Setup\n\nAdd your site's URL to the list of allowed origins in the WorkOS dashboard by\nclicking on the \"Configure CORS\" button of the \"Authentication\" page.\n\n## Usage\n\n```jsx\nimport { useAuth, AuthKitProvider } from \"@workos-inc/authkit-react\";\n\nfunction Root() {\n  return (\n    \u003cAuthKitProvider clientId=\"client_123456\" apiHostname=\"auth.example.com\"\u003e\n      \u003cApp /\u003e\n    \u003c/AuthKitProvider\u003e\n  );\n}\n\nfunction App() {\n  const { user, getAccessToken, isLoading, signIn, signUp, signOut } =\n    useAuth();\n\n  // This `/login` endpoint should be registered on the \"Redirects\" page of the\n  // WorkOS Dashboard.\n  // In a real app, this code would live in a route instead\n  // of in the main \u003cApp/\u003e component\n  React.useEffect(() =\u003e {\n    if (window.location.pathname === \"/login\") {\n      const searchParams = new URLSearchParams(window.location.search);\n      const context = searchParams.get(\"context\") ?? undefined;\n      signIn({ context });\n    }\n  }, [window.location, signIn]);\n\n  if (isLoading) {\n    return \"Loading...\";\n  }\n\n  const performMutation = async () =\u003e {\n    const accessToken = await getAccessToken();\n    alert(`API request with accessToken: ${accessToken}`);\n  };\n\n  if (user) {\n    return (\n      \u003cdiv\u003e\n        Hello, {user.email}\n        \u003cp\u003e\n          \u003cbutton\n            onClick={() =\u003e {\n              performMutation();\n            }}\n          \u003e\n            Make API Request\n          \u003c/button\u003e\n        \u003c/p\u003e\n        \u003cp\u003e\n          \u003cbutton onClick={() =\u003e signOut()}\u003eSign out\u003c/button\u003e\n        \u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e signIn()}\u003eSign in\u003c/button\u003e{\" \"}\n      \u003cbutton onClick={() =\u003e signUp()}\u003eSign up\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Reference\n\n### `\u003cAuthKitProvider /\u003e`\n\nYour app should be wrapped in the `AuthKitProvider` component. This component\ntakes the following props:\n\n- `clientId` (required): Your `WORKOS_CLIENT_ID`\n- `apiHostname`: Defaults to `api.workos.com`. This should be set to your custom Authentication API domain in production.\n- `redirectUri`: The url that WorkOS will redirect to upon successful authentication. (Used when constructing sign-in/sign-up URLs).\n- `devMode`: Defaults to `true` if window.location is \"localhost\" or \"127.0.0.1\". Tokens will be stored in localStorage when this prop is true.\n- `onRedirectCallback`: Called after exchanging the\n  `authorization_code`. Can be used for things like redirecting to a \"return\n  to\" path in the OAuth state.\n\n### `useAuth`\n\nThe `useAuth` hook returns user information and helper functions:\n\n- `isLoading`: true while user information is being obtained from fetch during initial load.\n- `user`: The WorkOS `User` object for this session.\n- `getAccessToken`: Returns an access token. Will fetch a fresh access token if necessary.\n- `signIn`: Redirects the user to the Hosted AuthKit sign-in page. Takes an optional `state` argument.\n- `signUp`: Redirects the user to the Hosted AuthKit sign-up page. Takes an optional `state` argument.\n- `signOut`: Ends the session.\n- `switchToOrganization`: Switches to the given organization. Redirects to the hosted login page if switch is unsuccessful.\n\nThe following claims may be populated if the user is part of an organization:\n\n- `organizationId`: The currently-selected organization.\n- `role`: The `role` of the user for the current organization.\n- `permissions`: Permissions corresponding to this role.\n- `featureFlags`: Enabled feature flags for the current organization.\n\n## Passing Data Through Authentication Flows\n\nWhen building authentication flows, you often need to maintain state across redirects. For example, you might want to return users to the page they were viewing before login or preserve other application state. AuthKit provides a way to pass and retrieve data through the authentication process.\n\n### Using `state`\n\n`state` is used to pass data that you need to retrieve after authentication completes\n\n```tsx\n// When signing in, pass your data using the state parameter\nfunction LoginButton() {\n  return (\n    \u003cbutton\n      onClick={() =\u003e {\n        signIn({ state: { returnTo: \"/dashboard\" } });\n      }}\n    \u003e\n      Sign in\n    \u003c/button\u003e\n  );\n}\n\n// Then retrieve your data in the onRedirectCallback\nfunction App() {\n  return (\n    \u003cAuthKitProvider\n      clientId=\"client_123\"\n      apiHostname=\"auth.example.com\"\n      onRedirectCallback={(state) =\u003e {\n        // Access your data here\n        if (state?.returnTo) {\n          window.location.href = state.returnTo;\n        }\n      }}\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/AuthKitProvider\u003e\n  );\n}\n```\n\nThis pattern works with both `signIn` and `signUp` functions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkos%2Fauthkit-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkos%2Fauthkit-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkos%2Fauthkit-react/lists"}