{"_id":"@a-type/auth0-react","_rev":"1-331597b496e408634753b851f7944469","name":"@a-type/auth0-react","dist-tags":{"latest":"1.2.0"},"versions":{"1.2.0":{"author":{"name":"Auth0"},"name":"@a-type/auth0-react","version":"1.2.0","description":"[forked] Auth0 SDK for React Single Page Applications (SPA)","keywords":["auth0","login","Authorization Code Grant Flow","PKCE","Single Page Application authentication","SPA authentication","react"],"main":"dist/auth0-react.cjs.js","types":"dist/index.d.ts","module":"dist/auth0-react.esm.js","scripts":{"build":"npm run lint && rollup -c --environment NODE_ENV:production","lint":"eslint --ext=tsx ./src ./__tests__","start":"rollup -cw","test":"jest --coverage","prepack":"npm run test && npm run build","docs":"typedoc --options typedoc.js src node_modules/@auth0/auth0-spa-js/dist/typings/global.d.ts","install:examples":"npm i --prefix=examples/cra-react-router --no-package-lock; npm i --prefix=examples/gatsby-app --no-package-lock; npm i --prefix=examples/nextjs-app --no-package-lock; npm ci --prefix=examples/users-api","start:cra":"npm start --prefix=examples/cra-react-router","start:gatsby":"npm start --prefix=examples/gatsby-app","start:nextjs":"npm run dev --prefix=examples/nextjs-app","start:api":"npm start --prefix=examples/users-api","test:cra":"start-server-and-test start:api 3001 start:cra 3000 cypress:run","test:cra:watch":"start-server-and-test start:api 3001 start:cra 3000 cypress:open","test:gatsby":"start-server-and-test start:api 3001 start:gatsby 3000 cypress:run","test:gatsby:watch":"start-server-and-test start:api 3001 start:gatsby 3000 cypress:open","test:nextjs":"start-server-and-test start:api 3001 start:nextjs 3000 cypress:run","test:nextjs:watch":"start-server-and-test start:api 3001 start:nextjs 3000 cypress:open","test:integration":"npm run test:cra; npm run test:gatsby; npm run test:nextjs","cypress:run":"cypress run","cypress:open":"cypress open","codecov":"codecov"},"repository":{"type":"git","url":"git+https://github.com/a-type/auth0-react.git"},"license":"MIT","bugs":{"url":"https://github.com/a-type/auth0-react/issues"},"homepage":"https://github.com/a-type/auth0-react#readme","devDependencies":{"@rollup/plugin-node-resolve":"^7.1.3","@rollup/plugin-replace":"^2.3.2","@testing-library/jest-dom":"^5.5.0","@testing-library/react":"^10.0.4","@testing-library/react-hooks":"^3.2.1","@types/jest":"^25.2.1","@types/react":"^16.9.34","@types/react-dom":"^16.9.6","@typescript-eslint/eslint-plugin":"^2.30.0","@typescript-eslint/parser":"^2.30.0","codecov":"^3.7.2","cypress":"^4.12.1","eslint":"^6.8.0","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.0.0","husky":"^4.2.5","jest":"^25.5.2","jest-junit":"^10.0.0","prettier":"2.0.5","pretty-quick":"^2.0.1","react":"^16.13.1","react-dom":"^16.13.1","react-test-renderer":"^16.13.1","rollup":"^2.7.2","rollup-plugin-delete":"^1.2.0","rollup-plugin-livereload":"^1.2.0","rollup-plugin-peer-deps-external":"^2.2.2","rollup-plugin-serve":"^1.0.1","rollup-plugin-terser":"^7.0.0","rollup-plugin-typescript2":"^0.27.0","start-server-and-test":"^1.11.0","ts-jest":"^25.4.0","tslib":"^1.11.1","typedoc":"^0.17.7","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.11.0","react-dom":"^16.11.0"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"dependencies":{"@auth0/auth0-spa-js":"^1.12.1"},"gitHead":"7c9bac38252c926af483d7d4f9a2fb24703bdf29","_id":"@a-type/auth0-react@1.2.0","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-6nbCHsB/YusXlk25B8W/9psU5iDb6CjK+DPRG/nigFqTYYRiZNHqD8iLAMJriNXLLTjkqzsrAc/9GQtNXXGUiw==","shasum":"1fac836947247907da801b90e8ddd256d94b2f40","tarball":"https://registry.npmjs.org/@a-type/auth0-react/-/auth0-react-1.2.0.tgz","fileCount":42,"unpackedSize":1504366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfizRbCRA9TVsSAnZWagAAYbgP/1MNRZX6ngSk5UXdUzec\ncSobT5loqM0MtSyANTDWzY2g63bgc1hqlmu2/BKserQn5Jzxg5Lj55U6XdQk\npgS0PK/kw8ZpW7C46BRnQ0RCl/j0M5YYFIjFKKcEqxg8wCEgJuDuDD9+R6YX\na2rvClJFVaNFlnG4MwkIlITodbArTVWj4e9iube86b1Uu3RealauM6MSss7Y\nGu3RoMrrIWGoyN3hFRgoh5TWX+RDTe3AtuJdWZxUrPzVhmIbXMZNxvm2itwV\nP9Xupfz0CXQ8nhfz5EB8cu+/DWhwAPcxZZOX/G++OOGcoeLCBzv8szCtClnf\nBmjz72EZNVgg2wMJQPlZfwWT58m3/+td3xQEcerfcMcbFJN5EP4Rb0gLSU+1\ndI4nQy/x54IyCSwcK/mG/CVJRDq5VD6ALPC31oOOvEagmwAnHvCXPho0ikxu\nBDzFQfw+ziRhssAg9kCD1/Mrpi2+oXlry0k6U5zgxRp7tur8CKNG+ctc6fZX\n8YQ/scY28zwqz+K11prI0gd9OID3TKijtOOEfT881G2oeYGvCq35YXA0R7ZZ\notxUkoVvZUoTguDAefwLXoPgjA522+FTXKlyEjIImun1B8RPk41z0UyGAh0u\nDVvmjwYnlaugdmQQwkSEOIN+zoVl6yEwFMRAjT3eISJTO7fjhHLFjTEApnJO\n+WD3\r\n=Wtfr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0BwbQ+p+RhaVm6d/T3WoNQB5GrNnOb+l3Semj5G8tAwIgUI+cG3nlO3oguNwiTjweiyNlA+tZPaoMDRPq+iv6NnU="}]},"maintainers":[{"name":"a-type","email":"gaforres@gmail.com"}],"_npmUser":{"name":"a-type","email":"gaforres@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/auth0-react_1.2.0_1602958427336_0.40945926501457075"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-17T18:13:47.291Z","1.2.0":"2020-10-17T18:13:47.517Z","modified":"2022-04-04T10:52:36.067Z"},"maintainers":[{"name":"a-type","email":"gaforres@gmail.com"}],"description":"[forked] Auth0 SDK for React Single Page Applications (SPA)","homepage":"https://github.com/a-type/auth0-react#readme","keywords":["auth0","login","Authorization Code Grant Flow","PKCE","Single Page Application authentication","SPA authentication","react"],"repository":{"type":"git","url":"git+https://github.com/a-type/auth0-react.git"},"author":{"name":"Auth0"},"bugs":{"url":"https://github.com/a-type/auth0-react/issues"},"license":"MIT","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&style=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  <Auth0Provider\n    domain=\"YOUR_AUTH0_DOMAIN\"\n    clientId=\"YOUR_AUTH0_CLIENT_ID\"\n    redirectUri={window.location.origin}\n  >\n    <App />\n  </Auth0Provider>,\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 <div>Loading...</div>;\n  }\n  if (error) {\n    return <div>Oops... {error.message}</div>;\n  }\n\n  if (isAuthenticated) {\n    return (\n      <div>\n        Hello {user.name}{' '}\n        <button onClick={() => logout({ returnTo: window.location.origin })}>\n          Log out\n        </button>\n      </div>\n    );\n  } else {\n    return <button onClick={loginWithRedirect}>Log in</button>;\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 <div>Hello {user.name}</div>;\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 = () => <div>Private</div>;\n\nexport default withAuthenticationRequired(PrivateRoute, {\n  // Show a message while the user waits to be redirected to the login page.\n  onRedirecting: () => <div>Redirecting you to the login page...</div>,\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 = () => {\n  const { getAccessTokenSilently } = useAuth0();\n  const [posts, setPosts] = useState(null);\n\n  useEffect(() => {\n    (async () => {\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 <div>Loading...</div>;\n  }\n\n  return (\n    <ul>\n      {posts.map((post, index) => {\n        return <li key={index}>{post}</li>;\n      })}\n    </ul>\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","readmeFilename":"README.md"}