{"id":19360505,"url":"https://github.com/uber5/react-pkce","last_synced_at":"2025-04-23T12:32:22.604Z","repository":{"id":55034056,"uuid":"227530791","full_name":"Uber5/react-pkce","owner":"Uber5","description":"OAuth2 authentication for React, using the PKCE flow","archived":false,"fork":false,"pushed_at":"2021-02-11T06:58:21.000Z","size":981,"stargazers_count":20,"open_issues_count":3,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T16:43:19.501Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Uber5.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":"2019-12-12T05:54:37.000Z","updated_at":"2025-02-20T20:12:49.000Z","dependencies_parsed_at":"2022-08-14T09:40:46.684Z","dependency_job_id":null,"html_url":"https://github.com/Uber5/react-pkce","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-pkce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-pkce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-pkce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-pkce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Uber5","download_url":"https://codeload.github.com/Uber5/react-pkce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250435070,"owners_count":21430212,"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-10T07:18:21.115Z","updated_at":"2025-04-23T12:32:22.231Z","avatar_url":"https://github.com/Uber5.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is It?\n\nThis zero-dependency package enables [React](https://reactjs.org/) applications\nto use an OAuth2 provider for\nauthentication. The OAuth2 provider must support the\n[PKCE Spec](https://tools.ietf.org/html/rfc7636).\n\n(TODO: Links to resources that explain why this is a good idea / better than\nusing the implicit flow.)\n\nCheck the [live demo](https://uber5.github.io/react-pkce-sample/)\n([source](https://github.com/Uber5/react-pkce-sample)).\nWhen prompted to login, you can signup with email (use link at the bottom of the form).\n\n# Prerequisites\n\n* The provider url, e.g. `https://login.u5auth.com`\n* OAuth2 client credentials (client id and secret),\n  where the client is allowed to use the\n  [Authorization code grant](https://tools.ietf.org/html/rfc6749#section-4.1).\n* A React application, which is supposed to be secured via OAuth2 (or\n  rather, needs an `access_token` to authenticate e.g. calls to APIs).\n\n# How\n\n## Install\n\n```\nnpm i react-pkce\n```\n\n## Use\n\nFirst, create an auth context (and related things):\n\n```js\nconst clientId = \"8cb4904ae5581ecc2b3a1774\"\nconst clientSecret = \"b683283462070edbac15a8fdab751ada0f501ab48a5f06aa20aee3be24eac9cc\"\nconst provider = \"https://authenticate.u5auth.com\"\n\nconst {AuthContext, Authenticated, useToken} = createAuthContext({\n  clientId,\n  clientSecret, // optional, only specify if provider requires it\n  provider,\n  scopes: [ 'profile', 'otherScope' ]\n})\n```\n\nYou probably need those in other files, so you may want to `export` them:\n\n```js\nexport { AuthContext, Authenticated, useToken }\n```\n\nNext, use the `AuthContext` to wrap anything that may require\nan authenticated user / an access token for an authenticated user.\nTypically, you would wrap the whole app inside of an `AuthContext`:\n\n```js\nfunction App() {\n  return (\n    \u003cAuthContext\u003e\n      // ... all my other components, e.g. router, pages, etc.\n    \u003c/AuthContext\u003e\n  )\n}\n```\n\nThirdly, when implementing a component that requires an authenticated user,\nwrap anything you want to protect from the public in an `Authenticated`\ncomponent. This will ensure the user gets authanticated, before anything\nwrapped by `Authenticated` gets mounted / rendered:\n\n```js\nfunction ProtectedComponent() {\n  return (\n    \u003cAuthenticated\u003e\n      \u003cProtectedComponent /\u003e\n    \u003c/Authenticated\u003e\n  )\n}\n```\n\nLastly, if you require the access token, you can use the `useToken()` hook:\n\n```js\nfunction ComponentWithToken() {\n  const { access_token } = useToken()\n  const [data, setData] = useState(null)\n  useEffect(() =\u003e {\n    if (!data) {\n      fetchData({ token: access_token }).then(setData)\n    }\n  }, [access_token])\n  return (\n    // render the data (or a loading indicator, while data === null)\n  )\n}\n```\n\nNote: You need to provide your own `fetchData()` function.\n\n## Options\n\nIn addition to the required properties (`clientId` etc), the following properties can be specified when calling `createAuthContext()`:\n\n- `busyIndicator`: A React element to be rendered while logging in, e.g. `\u003cSpinner /\u003e`.\n- `fetch`: HTTP requests to talk to the OAuth2 provider are done using `window.fetch`, unless you specify your own `fetch` function as a property.\n- `storage`: By default, authentication information (the token) is kept in `window.sessionStorage`. If you want to use different storage (e.g. `window.localStorage`), set this property. (TODO: won't work yet, as we don't check expiry of tokens!)\n- `tokenEndpoint`: The default token endpoint is `${provider}/token`. Configure a different token endpoint here, if your OAuth2 provider does not follow this convention.\n\n\n# Example\n\nCheck the live demo (see above), also checkout [the test app](./src/App.js).\n\nYou can run the example, after cloning the repo, and:\n\n```bash\nnpm i\nnpm run start\n```\n\n... then connect to http://localhost:3001.\n\n# Develop\n\nRun the example, see above. As the example runs via `react-scripts`, you\ncan live-edit the sample, and the code of this package,\nwhich lives under `./src/lib`.\n\n# Status\n\nIt's fully functional, but does not deal with token expiry and/or certain error conditions yet. See the\n[issues and/or add a new issue](https://github.com/Uber5/react-u5auth/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber5%2Freact-pkce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuber5%2Freact-pkce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber5%2Freact-pkce/lists"}