{"id":15099140,"url":"https://github.com/sandrinodimattia/use-auth0-hooks","last_synced_at":"2025-10-08T05:30:20.609Z","repository":{"id":57387879,"uuid":"212080751","full_name":"sandrinodimattia/use-auth0-hooks","owner":"sandrinodimattia","description":"An easy way to sign in with Auth0 in your React application (client-side) using React Hooks","archived":true,"fork":false,"pushed_at":"2020-06-23T12:43:26.000Z","size":288,"stargazers_count":74,"open_issues_count":11,"forks_count":31,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T18:38:00.266Z","etag":null,"topics":["auth0","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"https://nextjs-spa-auth0-demo.now.sh/","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/sandrinodimattia.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}},"created_at":"2019-10-01T11:37:05.000Z","updated_at":"2023-08-19T11:24:49.000Z","dependencies_parsed_at":"2022-09-06T08:51:31.242Z","dependency_job_id":null,"html_url":"https://github.com/sandrinodimattia/use-auth0-hooks","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/sandrinodimattia/use-auth0-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrinodimattia%2Fuse-auth0-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrinodimattia%2Fuse-auth0-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrinodimattia%2Fuse-auth0-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrinodimattia%2Fuse-auth0-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandrinodimattia","download_url":"https://codeload.github.com/sandrinodimattia/use-auth0-hooks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandrinodimattia%2Fuse-auth0-hooks/sbom","scorecard":{"id":799264,"data":{"date":"2025-08-11","repo":{"name":"github.com/sandrinodimattia/use-auth0-hooks","commit":"35995e389178ca2f8cabe80b5220c58c39fe7dd9"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":3,"reason":"Found 6/16 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 21 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"104 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-8cf7-32gw-wr33","Warn: Project is vulnerable to: GHSA-hjrf-2m68-5959","Warn: Project is vulnerable to: GHSA-qwph-4952-7xr6","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-vxf5-wxwp-m7g9","Warn: Project is vulnerable to: GHSA-25mp-g6fv-mqxx","Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc","Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w","Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf","Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-6g6m-m6h5-w9gf","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T09:56:24.324Z","repository_id":57387879,"created_at":"2025-08-23T09:56:24.324Z","updated_at":"2025-08-23T09:56:24.324Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278892036,"owners_count":26063918,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["auth0","react-hooks","reactjs"],"created_at":"2024-09-25T17:06:22.797Z","updated_at":"2025-10-08T05:30:20.268Z","avatar_url":"https://github.com/sandrinodimattia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e This repository has been archived! Auth0's official React SDK is now available here: https://github.com/auth0/auth0-react\n\n# use-auth0-hooks\n\nAn easy way to sign in with Auth0 in your React application (client-side) using React Hooks.\n\nHighlights:\n\n - Support hooks and class based components\n - Pluggable architecture where you can add your error handlers and take action when redirecting\n - Sign in\n - Sign out\n - Request access tokens for your APIs, with automated handling of expired tokens.\n - Require the user to be signed in or make it optional, depending on the page you're on.\n - Built with TypeScript\n - Makes use of `@auth0/auth0-spa-js` which uses the Authorization Code grant with PKCE (instead of Implicit)\n\n## Installation\n\nUsing [npm](https://npmjs.org):\n\n```sh\nnpm install use-auth0-hooks\n```\n\nUsing [yarn](https://yarnpkg.com):\n\n```sh\nyarn add use-auth0-hooks\n```\n\n## Getting Started\n\n### Next.js\n\n\u003e A full example for Next.js can be found [here](examples/nextjs-spa).\n\nWrap your application with the `Auth0Provider` (under `/pages/_app.js`):\n\n```js\n// Create a page which wraps the Auth0 provider.\n\nimport { Auth0Provider } from 'use-auth0-hooks';\n\nexport default ({ Component, pageProps }) =\u003e (\n \u003cAuth0Provider\n  domain=\"sandrino-dev.auth0.com\"\n  clientId=\"9f6ClmBt37ZGCXNqToPbefKmzVBSOLa2\"\n  redirectUri=\"http://localhost:3000\"\n \u003e\n  \u003cComponent {...pageProps} /\u003e\n \u003c/Auth0Provider\u003e\n)\n\n```\n\nYou can then create a `NavBar` component with the necessary buttons:\n\n```js\nimport React from 'react';\nimport Link from 'next/link';\nimport { useRouter } from 'next/router'\n\nimport { useAuth } from 'use-auth0-hooks';\n\nexport default function NavBar() {\n  const { pathname, query } = useRouter();\n  const { isAuthenticated, isLoading, login, logout } = useAuth();\n\n  return (\n    \u003cheader\u003e\n      \u003cnav\u003e\n        \u003cul\u003e\n          \u003cli\u003e\n            \u003cLink href='/'\u003e\n              \u003ca\u003eHome\u003c/a\u003e\n            \u003c/Link\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cLink href='/about'\u003e\n              \u003ca\u003eAbout\u003c/a\u003e\n            \u003c/Link\u003e\n          \u003c/li\u003e\n          {!isLoading \u0026\u0026 (\n            isAuthenticated ? (\n              \u003c\u003e\n                \u003cli\u003e\n                  \u003cLink href='/profile'\u003e\n                    \u003ca\u003eProfile\u003c/a\u003e\n                  \u003c/Link\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\n                  \u003cbutton onClick={() =\u003e logout({ returnTo: 'http://localhost:3000' })}\u003eLog out\u003c/button\u003e\n                \u003c/li\u003e\n              \u003c/\u003e\n            ) : (\n              \u003cli\u003e\n                \u003cbutton onClick={() =\u003e login({ appState: { returnTo: { pathname, query } } })}\u003e\n                  Log in\n                \u003c/button\u003e\n              \u003c/li\u003e\n            )\n          )}\n        \u003c/ul\u003e\n      \u003c/nav\u003e\n\n      ...\n    \u003c/header\u003e\n  );\n};\n```\n\nAnd finally you can create pages which require authentication:\n\n```js\nimport React from 'react';\n\nimport { withAuth, withLoginRequired } from 'use-auth0-hooks';\n\nfunction Profile({ auth }) {\n  const { user } = auth;\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eProfile\u003c/h1\u003e\n      \u003cp\u003eThis is the profile page.\u003c/p\u003e\n      \u003cpre\u003e{JSON.stringify(user || { }, null, 2)}\u003c/pre\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default withLoginRequired(\n  withAuth(Profile)\n);\n```\n\n## Advanced Use Cases\n\n### Calling an API\n\nYou can use hooks or high order components to get an access token for your API:\n\n```js\nimport { useAuth, useAccessToken } from 'use-auth0-hooks';\n\nexport function SomePage() {\n  const { accessToken } = useAuth({\n    audience: 'https://api.mycompany.com/',\n    scope: 'read:things'\n  });\n\n  const { response, isLoading } = callMyApi(`https://localhost/api/my/shows`, accessToken);\n  if (isLoading) {\n    return (\n      \u003cdiv\u003eLoading your subscriptions ...\u003c/div\u003e\n    );\n  }\n\n  return (\n    \u003cdiv\u003eAPI call response: {response}\u003c/div\u003e\n  );\n}\n```\n\nOr you can also use it in class based components:\n\n```js\nimport { Component } from 'react';\nimport fetch from 'isomorphic-unfetch';\n\nimport { withAuth } from 'use-auth0-hooks';\n\nclass MyTvShows extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      myShows: null,\n      myShowsError: null\n    };\n  }\n\n  async fetchUserData() {\n    const { myShows, myShowsError } = this.state;\n    if (myShows || myShowsError) {\n      return;\n    }\n\n    const { accessToken } = this.props.auth;\n    if (!accessToken) {\n      return;\n    }\n\n    const res = await fetch(`${process.env.API_BASE_URL}/api/my/shows`, {\n      headers: {\n        'Authorization': `Bearer ${accessToken}`\n      }\n    });\n\n    if (res.status \u003e= 400) {\n      this.setState({\n        myShowsError: res.statusText || await res.json()\n      })\n    } else {\n      const { shows } = await res.json();\n      this.setState({\n        myShows: shows.map(entry =\u003e entry.show)\n      })\n    }\n  }\n\n  async componentDidMount () {\n    await this.fetchUserData();\n  }\n\n  async componentDidUpdate() {\n    await this.fetchUserData();\n  }\n\n  render() {\n    const { auth } = this.props;\n    const { myShows, myShowsError } = this.state;\n    return (\n      \u003cdiv\u003e\n        {\n          myShows \u0026\u0026 (\n            \u003cdiv\u003e\n              \u003ch1\u003eMy Favourite TV Shows ({auth.user.email})\u003c/h1\u003e\n              \u003cp\u003eThis is rendered on the client side.\u003c/p\u003e\n              {myShowsError \u0026\u0026 \u003cpre\u003eError loading my shows: {myShowsError}\u003c/pre\u003e}\n              \u003cul\u003e\n                {state.myShows \u0026\u0026 state.myShows.map(show =\u003e (\n                  \u003cli key={show.id}\u003e\n                    {show.name}\n                  \u003c/li\u003e\n                ))}\n              \u003c/ul\u003e\n            \u003c/div\u003e\n          )\n        }\n      \u003c/div\u003e\n    );\n  }\n};\n\nexport default withAuth(MyTvShows, {\n  audience: 'https://api/tv-shows',\n  scope: 'read:shows'\n});\n```\n\n### Deep Links\n\nWhen a user clicks the login button on a specific page you'll probably want to send them back to that page after the login is complete. In order to do this you'll want to store the current URL in the application state:\n\n```js\nconst { pathname, query } = useRouter();\nconst { login } = useAuth();\n\nreturn (\n  \u003cbutton onClick={() =\u003e login({ appState: { returnTo: { pathname, query } } })}\u003e\n    Log in\n  \u003c/button\u003e\n);\n```\n\nAnd then you'll just provide a method which will be called after the login completed (ie: to redirect the user back to the page they were one):\n\n```js\nimport App from 'next/app';\nimport Router from 'next/router';\n\nimport Layout from '../components/layout';\nimport { Auth0Provider } from '../components/auth';\n\n/**\n * Where to send the user after they have signed in.\n */\nconst onRedirectCallback = appState =\u003e {\n  if (appState \u0026\u0026 appState.returnTo) {\n    Router.push({\n      pathname: appState.returnTo.pathname,\n      query: appState.returnTo.query\n    })\n  }\n};\n\n/**\n * Create a page which wraps the Auth0 provider.\n */\nexport default class Root extends App {\n  render () {\n    const { Component, pageProps } = this.props;\n    return (\n      \u003cAuth0Provider\n        ...\n        onRedirectCallback={onRedirectCallback}\u003e\n          \u003cLayout\u003e\n            \u003cComponent {...pageProps} /\u003e\n          \u003c/Layout\u003e\n      \u003c/Auth0Provider\u003e\n    );\n  }\n}\n```\n\n### Before Login\n\nWhen redirecting to the login page you'll end up in a state where the login page is still loading and the current page is still showing. You can render a message to explain that the user is being redirected.\n\n```js\n/**\n * When redirecting to the login page you'll end up in this state where the login page is still loading.\n * You can render a message to show that the user is being redirected.\n */\nconst onRedirecting = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eSigning you in\u003c/h1\u003e\n      \u003cp\u003e\n        In order to access this page you will need to sign in.\n        Please wait while we redirect you to the login page...\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\n/**\n * Create a page which wraps the Auth0 provider.\n */\nexport default class Root extends App {\n  render () {\n    const { Component, pageProps } = this.props;\n    return (\n      \u003cAuth0Provider\n        ...\n        onRedirecting={onRedirecting}\u003e\n          \u003cLayout\u003e\n            \u003cComponent {...pageProps} /\u003e\n          \u003c/Layout\u003e\n      \u003c/Auth0Provider\u003e\n    );\n  }\n}\n```\n\n### Error Handling\n\nIf for some reason the login fails (eg: an Auth0 Rule returns an error), you'll want to handle this in your application. One way to do this is to redirect to an error page:\n\n```js\n/**\n * When signing in fails for some reason, we want to show it here.\n * @param {Error} err\n */\nconst onLoginError = (err) =\u003e {\n  Router.push({\n    pathname: '/oops',\n    query: {\n      message: err.error_description || err.message\n    }\n  })\n};\n\n/**\n * Create a page which wraps the Auth0 provider.\n */\nexport default class Root extends App {\n  render () {\n    const { Component, pageProps } = this.props;\n    return (\n      \u003cAuth0Provider\n        ...\n        onLoginError={onLoginError}\u003e\n          \u003cLayout\u003e\n            \u003cComponent {...pageProps} /\u003e\n          \u003c/Layout\u003e\n      \u003c/Auth0Provider\u003e\n    );\n  }\n}\n```\n\nYou can also be notified when retrieving an new access token is not possible:\n\n```js\nconst onAccessTokenError = (err, options) =\u003e {\n  console.error('Failed to retrieve access token: ', err);\n};\n\n/**\n * Create a page which wraps the Auth0 provider.\n */\nexport default class Root extends App {\n  render () {\n    const { Component, pageProps } = this.props;\n    return (\n      \u003cAuth0Provider\n        ...\n        onAccessTokenError={onAccessTokenError}\u003e\n          \u003cLayout\u003e\n            \u003cComponent {...pageProps} /\u003e\n          \u003c/Layout\u003e\n      \u003c/Auth0Provider\u003e\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandrinodimattia%2Fuse-auth0-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandrinodimattia%2Fuse-auth0-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandrinodimattia%2Fuse-auth0-hooks/lists"}