{"id":19360498,"url":"https://github.com/uber5/react-u5auth","last_synced_at":"2025-07-12T03:12:17.095Z","repository":{"id":12459703,"uuid":"71761342","full_name":"Uber5/react-u5auth","owner":"Uber5","description":"React components to authenticate via U5auth (OAuth2)","archived":false,"fork":false,"pushed_at":"2023-01-07T03:35:29.000Z","size":1124,"stargazers_count":4,"open_issues_count":31,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T00:10:01.652Z","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":"2016-10-24T07:06:09.000Z","updated_at":"2020-11-25T14:04:53.000Z","dependencies_parsed_at":"2023-01-13T16:57:40.668Z","dependency_job_id":null,"html_url":"https://github.com/Uber5/react-u5auth","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-u5auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-u5auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-u5auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Uber5%2Freact-u5auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Uber5","download_url":"https://codeload.github.com/Uber5/react-u5auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250435069,"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:19.244Z","updated_at":"2025-04-23T12:32:22.089Z","avatar_url":"https://github.com/Uber5.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is It?\n\nA simple React component and higher order function to facilitate authentication\nvia U5-Auth (or rather, any OAuth2 provider).\n\n# Prerequisites\n\n* The provider url, e.g. `https://login.u5auth.com`.\n* OAuth2 client credentials, where the client is allowed to use the\n  [implicit flow](https://tools.ietf.org/html/rfc6749#section-1.3.2).\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## Setup\n\nClient details need to be specified via the `AuthContext` component. The `AuthContext` must wrap any component that needs authentication, so the `AuthContext` is probably best placed high up in the component tree (maybe just above the router, if you use one):\n\nFirst, import the `AuthContext` component:\n\n```javascript\nimport { AuthContext } from 'react-u5auth'\n```\n\nThen, wrap your component(s):\n\n```react\n\u003cAuthContext clientId={\"123\"} provider={\"https://my-provider.com\"}\u003e\n  \u003cRouter history={browserHistory}\u003e\n    // ...\n  \u003c/Router\u003e\n\u003c/AuthContext\u003e\n```\n\n## Protecting Components\n\nNow, the higher-order function `authenticated` can be used to ensure a valid `access_token` whenever the component gets rendered:\n\n```js\nimport { authenticated } from 'react-u5auth'\n\nclass SomeComponent extends React.Component {\n  render() {\n    return \u003cp\u003eSome component that needs an authenticated user...\u003c/p\u003e\n  }\n}\n\nconst ProtectedComponent = authenticated()(SomeComponent)\n\nconst SomeOtherComponent = () =\u003e (\u003cp\u003eThis is some other component\u003c/p\u003e)\nconst ProtectedComponent = authenticated()(() =\u003e (\u003cSomeOtherComponent /\u003e))\n```\n\n## Using the `access_token`\n\nA protected component isn't too valuable on its own, you may need an access\ntoken when speaking to an API. Anywhere the access token can be accessed like\nthis:\n\n```\nimport { getLocalToken } from 'react-u5auth'\n\n...\nconst token = getLocalToken()\n...\n```\n\nPlease note: There is something fishy here about the `access_token`\nbeing kept in global state. See\n[this issue](https://github.com/Uber5/react-u5auth/issues/3).\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-u5auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuber5%2Freact-u5auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuber5%2Freact-u5auth/lists"}