Auth0 SDK for React Single Page Applications (SPA)
Installations
npm install @auth0/auth0-reactDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
18.20.4
NPM Version
10.7.0
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (87.65%)
JavaScript (7.09%)
HTML (5.18%)
Shell (0.09%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
auth0
Download Statistics
Total Downloads
76,025,061
Last Day
98,032
Last Week
508,671
Last Month
2,192,869
Last Year
22,953,952
GitHub Statistics
MIT License
925 Stars
510 Commits
271 Forks
27 Watchers
25 Branches
62 Contributors
Updated on Feb 22, 2025
Maintainers
Package Meta Information
Latest Version
2.3.0
Package Id
@auth0/auth0-react@2.3.0
Unpacked Size
849.88 kB
Size
209.25 kB
File Count
41
NPM Version
10.7.0
Node Version
18.20.4
Published on
Jan 23, 2025
Total Downloads
Cumulative downloads
Total Downloads
76,025,061
Last Day
1.7%
98,032
Compared to previous day
Last Week
2.4%
508,671
Compared to previous week
Last Month
36.7%
2,192,869
Compared to previous month
Last Year
20.3%
22,953,952
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
38
📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 Feedback
Documentation
- Quickstart - our interactive guide for quickly adding login, logout and user information to a React app using Auth0.
- Sample App - a full-fledged React application integrated with Auth0.
- FAQs - frequently asked questions about the auth0-react SDK.
- Examples - code samples for common React authentication scenario's.
- Docs site - explore our docs site and learn more about Auth0.
Getting started
Installation
Using npm
1npm install @auth0/auth0-react
Using yarn
1yarn add @auth0/auth0-react
Configure Auth0
Create a Single Page Application in the Auth0 Dashboard.
If you're using an existing application, verify that you have configured the following settings in your Single Page Application:
- Click on the "Settings" tab of your application's page.
- Scroll down and click on the "Show Advanced Settings" link.
- Under "Advanced Settings", click on the "OAuth" tab.
- Ensure that "JsonWebToken Signature Algorithm" is set to
RS256and that "OIDC Conformant" is enabled.
Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:
- Allowed Callback URLs:
http://localhost:3000 - Allowed Logout URLs:
http://localhost:3000 - Allowed Web Origins:
http://localhost:3000
These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback.
Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.
Configure the SDK
Configure the SDK by wrapping your application in Auth0Provider:
1// src/index.js 2import React from 'react'; 3import { createRoot } from 'react-dom/client'; 4import { Auth0Provider } from '@auth0/auth0-react'; 5import App from './App'; 6 7const root = createRoot(document.getElementById('app')); 8 9root.render( 10 <Auth0Provider 11 domain="YOUR_AUTH0_DOMAIN" 12 clientId="YOUR_AUTH0_CLIENT_ID" 13 authorizationParams={{ 14 redirect_uri: window.location.origin, 15 }} 16 > 17 <App /> 18 </Auth0Provider> 19);
Instructions for React <18
1// src/index.js 2import React from 'react'; 3import ReactDOM from 'react-dom'; 4import { Auth0Provider } from '@auth0/auth0-react'; 5import App from './App'; 6 7ReactDOM.render( 8 <Auth0Provider 9 domain="YOUR_AUTH0_DOMAIN" 10 clientId="YOUR_AUTH0_CLIENT_ID" 11 authorizationParams={{ 12 redirect_uri: window.location.origin, 13 }} 14 > 15 <App /> 16 </Auth0Provider>, 17 document.getElementById('app') 18);
Use the useAuth0 hook in your components to access authentication state (isLoading, isAuthenticated and user) and authentication methods (loginWithRedirect and logout):
1// src/App.js 2import React from 'react'; 3import { useAuth0 } from '@auth0/auth0-react'; 4 5function App() { 6 const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } = 7 useAuth0(); 8 9 if (isLoading) { 10 return <div>Loading...</div>; 11 } 12 if (error) { 13 return <div>Oops... {error.message}</div>; 14 } 15 16 if (isAuthenticated) { 17 return ( 18 <div> 19 Hello {user.name}{' '} 20 <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}> 21 Log out 22 </button> 23 </div> 24 ); 25 } else { 26 return <button onClick={() => loginWithRedirect()}>Log in</button>; 27 } 28} 29 30export default App;
For more code samples on how to integrate auth0-react SDK in your React application, have a look at our examples.
API reference
Explore public API's available in auth0-react.
Feedback
Contributing
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
- Auth0's general contribution guidelines
- Auth0's code of conduct guidelines
- This repo's contribution guide
Raise an issue
To provide feedback or report a bug, please raise an issue on our issue tracker.
Vulnerability Reporting
Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?
This project is licensed under the MIT license. See the LICENSE file for more info.
No vulnerabilities found.
Reason
all changesets reviewed
Reason
16 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/auth0/.github/.github/SECURITY.md:1
- Info: Found linked content: github.com/auth0/.github/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/auth0/.github/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/auth0/.github/.github/SECURITY.md:1
Reason
SAST tool detected
Details
- Info: SAST configuration detected: CodeQL
- Info: SAST configuration detected: Snyk
- Info: all commits (30) are checked with a SAST tool
Reason
dependency not pinned by hash detected -- score normalized to 4
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browserstack.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/browserstack.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browserstack.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/browserstack.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/integration.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/integration.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-release.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/npm-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/rl-secure.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/rl-secure.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/semgrep.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/semgrep.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snyk.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/snyk.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-react/test.yml/main?enable=pin
- Info: 0 out of 16 GitHub-owned GitHubAction dependencies pinned
- Info: 2 out of 2 third-party GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
8 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: topLevel 'contents' permission set to 'read': .github/workflows/browserstack.yml:15
- Info: topLevel 'actions' permission set to 'read': .github/workflows/codeql.yml:17
- Info: topLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:18
- Warn: topLevel 'security-events' permission set to 'write': .github/workflows/codeql.yml:19
- Info: topLevel 'contents' permission set to 'read': .github/workflows/integration.yml:15
- Warn: no topLevel permission defined: .github/workflows/npm-release.yml:1
- Warn: topLevel 'contents' permission set to 'write': .github/workflows/release.yml:9
- Warn: no topLevel permission defined: .github/workflows/rl-secure.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/semgrep.yml:17
- Info: topLevel 'contents' permission set to 'read': .github/workflows/snyk.yml:18
- Info: topLevel 'contents' permission set to 'read': .github/workflows/test.yml:14
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact v2.3.0 not signed: https://api.github.com/repos/auth0/auth0-react/releases/196374858
- Warn: release artifact v2.3.0 does not have provenance: https://api.github.com/repos/auth0/auth0-react/releases/196374858
Score
6.1
/10
Last Scanned on 2025-02-24
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More