{"id":15195291,"url":"https://github.com/a-type/auth0-react","last_synced_at":"2025-10-02T10:32:06.946Z","repository":{"id":57093905,"uuid":"304903933","full_name":"a-type/auth0-react","owner":"a-type","description":"Auth0 SDK for React Single Page Applications (SPA)","archived":false,"fork":true,"pushed_at":"2020-10-17T18:15:25.000Z","size":543,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-02T05:57:19.667Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"auth0/auth0-react","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-type.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2020-10-17T15:06:15.000Z","updated_at":"2020-10-17T18:15:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/a-type/auth0-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/a-type%2Fauth0-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-type%2Fauth0-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-type%2Fauth0-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-type%2Fauth0-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-type","download_url":"https://codeload.github.com/a-type/auth0-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234975102,"owners_count":18916157,"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-09-27T23:20:54.043Z","updated_at":"2025-10-02T10:32:06.522Z","avatar_url":"https://github.com/a-type.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @a-type/auth0-react\n\nAuth0 SDK for React Single Page Applications (SPA).\n\n[![CircleCI](https://img.shields.io/circleci/build/github/auth0/auth0-react.svg?branch=master\u0026style=flat)](https://circleci.com/gh/auth0/auth0-react)\n[![License](https://img.shields.io/:license-mit-blue.svg?style=flat)](https://opensource.org/licenses/MIT)\n[![npm](https://img.shields.io/npm/v/@a-type/auth0-react.svg?style=flat)](https://www.npmjs.com/package/@a-type/auth0-react)\n[![codecov](https://img.shields.io/codecov/c/github/auth0/auth0-react/master.svg?style=flat)](https://codecov.io/gh/auth0/auth0-react)\n\n## Table of Contents\n\n- [Documentation](#documentation)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Contributing](#contributing)\n- [Support + Feedback](#support--feedback)\n- [Troubleshooting](#troubleshooting)\n- [Frequently Asked Questions](#frequently-asked-questions)\n- [Vulnerability Reporting](#vulnerability-reporting)\n- [What is Auth0](#what-is-auth0)\n- [License](#license)\n\n## Documentation\n\n- [API Reference](https://auth0.github.io/auth0-react/)\n- [Quickstart Guide](https://auth0.com/docs/quickstart/spa/react)\n\n## Installation\n\nUsing [npm](https://npmjs.org/)\n\n```bash\nnpm install @a-type/auth0-react\n```\n\nUsing [yarn](https://yarnpkg.com/)\n\n```bash\nyarn add @a-type/auth0-react\n```\n\n## Getting Started\n\nConfigure the SDK by wrapping your application in `Auth0Provider`:\n\n```jsx\n// src/index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Auth0Provider } from '@a-type/auth0-react';\nimport App from './App';\n\nReactDOM.render(\n  \u003cAuth0Provider\n    domain=\"YOUR_AUTH0_DOMAIN\"\n    clientId=\"YOUR_AUTH0_CLIENT_ID\"\n    redirectUri={window.location.origin}\n  \u003e\n    \u003cApp /\u003e\n  \u003c/Auth0Provider\u003e,\n  document.getElementById('app')\n);\n```\n\nUse the `useAuth0` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):\n\n```jsx\n// src/App.js\nimport React from 'react';\nimport { useAuth0 } from '@a-type/auth0-react';\n\nfunction App() {\n  const {\n    isLoading,\n    isAuthenticated,\n    error,\n    user,\n    loginWithRedirect,\n    logout,\n  } = useAuth0();\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n  if (error) {\n    return \u003cdiv\u003eOops... {error.message}\u003c/div\u003e;\n  }\n\n  if (isAuthenticated) {\n    return (\n      \u003cdiv\u003e\n        Hello {user.name}{' '}\n        \u003cbutton onClick={() =\u003e logout({ returnTo: window.location.origin })}\u003e\n          Log out\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  } else {\n    return \u003cbutton onClick={loginWithRedirect}\u003eLog in\u003c/button\u003e;\n  }\n}\n\nexport default App;\n```\n\n### Use with a Class Component\n\nUse the `withAuth0` higher order component to add the `auth0` property to Class components:\n\n```jsx\nimport React, { Component } from 'react';\nimport { withAuth0 } from '@a-type/auth0-react';\n\nclass Profile extends Component {\n  render() {\n    // `this.props.auth0` has all the same properties as the `useAuth0` hook\n    const { user } = this.props.auth0;\n    return \u003cdiv\u003eHello {user.name}\u003c/div\u003e;\n  }\n}\n\nexport default withAuth0(Profile);\n```\n\n### Protect a Route\n\nProtect a route component using the `withAuthenticationRequired` higher order component. Visits to this route when unauthenticated will redirect the user to the login page and back to this page after login:\n\n```jsx\nimport React from 'react';\nimport { withAuthenticationRequired } from '@a-type/auth0-react';\n\nconst PrivateRoute = () =\u003e \u003cdiv\u003ePrivate\u003c/div\u003e;\n\nexport default withAuthenticationRequired(PrivateRoute, {\n  // Show a message while the user waits to be redirected to the login page.\n  onRedirecting: () =\u003e \u003cdiv\u003eRedirecting you to the login page...\u003c/div\u003e,\n});\n```\n\n**Note** If you are using a custom router, you will need to supply the `Auth0Provider` with a custom `onRedirectCallback` method to perform the action that returns the user to the protected page. See examples for [react-router](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#1-protecting-a-route-in-a-react-router-dom-app), [Gatsby](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#2-protecting-a-route-in-a-gatsby-app) and [Next.js](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#3-protecting-a-route-in-a-nextjs-app-in-spa-mode).\n\n### Call an API\n\nCall a protected API with an Access Token:\n\n```jsx\nimport React, { useEffect, useState } from 'react';\nimport { useAuth0 } from '@a-type/auth0-react';\n\nconst Posts = () =\u003e {\n  const { getAccessTokenSilently } = useAuth0();\n  const [posts, setPosts] = useState(null);\n\n  useEffect(() =\u003e {\n    (async () =\u003e {\n      try {\n        const token = await getAccessTokenSilently({\n          audience: 'https://api.example.com/',\n          scope: 'read:posts',\n        });\n        const response = await fetch('https://api.example.com/posts', {\n          headers: {\n            Authorization: `Bearer ${token}`,\n          },\n        });\n        setPosts(await response.json());\n      } catch (e) {\n        console.error(e);\n      }\n    })();\n  }, [getAccessTokenSilently]);\n\n  if (!posts) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n\n  return (\n    \u003cul\u003e\n      {posts.map((post, index) =\u003e {\n        return \u003cli key={index}\u003e{post}\u003c/li\u003e;\n      })}\n    \u003c/ul\u003e\n  );\n};\n\nexport default Posts;\n```\n\nFor a more detailed example see how to [create a `useApi` hook for accessing protected APIs with an access token](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#4-create-a-useapi-hook-for-accessing-protected-apis-with-an-access-token).\n\n## Contributing\n\nWe appreciate feedback and contribution to this repo! Before you get started, please see the following:\n\n- [Auth0's general contribution guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)\n- [Auth0's code of conduct guidelines](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)\n- [This repo's contribution guide](./CONTRIBUTING.md)\n\n## Support + Feedback\n\nFor support or to provide feedback, please [raise an issue on our issue tracker](https://github.com/a-type/auth0-react/issues).\n\n## Troubleshooting\n\nFor information on how to solve common problems, check out the [Troubleshooting](./TROUBLESHOOTING.md) guide\n\n## Frequently Asked Questions\n\nFor a rundown of common issues you might encounter when using the SDK, please check out the [FAQ](./FAQ.md).\n\n## Vulnerability Reporting\n\nPlease do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues.\n\n## What is Auth0?\n\nAuth0 helps you to easily:\n\n- Implement authentication with multiple identity providers, including social (e.g., Google, Facebook, Microsoft, LinkedIn, GitHub, Twitter, etc), or enterprise (e.g., Windows Azure AD, Google Apps, Active Directory, ADFS, SAML, etc.)\n- Log in users with username/password databases, passwordless, or multi-factor authentication\n- Link multiple user accounts together\n- Generate signed JSON Web Tokens to authorize your API calls and flow the user identity securely\n- Access demographics and analytics detailing how, when, and where users are logging in\n- Enrich user profiles from other data sources using customizable JavaScript rules\n\n[Why Auth0?](https://auth0.com/why-auth0)\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](https://github.com/a-type/auth0-react/blob/master/LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-type%2Fauth0-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-type%2Fauth0-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-type%2Fauth0-react/lists"}