Auth0 authentication for Single Page Applications (SPA) with PKCE
Installations
npm install @auth0/auth0-spa-jsDeveloper
auth0
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
18.19.0
NPM Version
10.2.3
Statistics
925 Stars
751 Commits
363 Forks
31 Watching
28 Branches
85 Contributors
Updated on 26 Nov 2024
Bundle Size
44.32 kB
Minified
13.58 kB
Minified + Gzipped
Languages
TypeScript (59.27%)
JavaScript (32.2%)
HTML (8.53%)
Total Downloads
Cumulative downloads
Total Downloads
119,210,571
Last day
-9.7%
143,599
Compared to previous day
Last week
0.6%
805,128
Compared to previous week
Last month
5.5%
3,460,175
Compared to previous month
Last year
22.3%
37,296,958
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
45
📚 Documentation - 🚀 Getting Started - 💻 API Reference - 💬 Feedback
Documentation
- Quickstart - our interactive guide for quickly adding login, logout and user information to your app using Auth0.
- Sample app - a full-fledged sample app integrated with Auth0.
- FAQs - frequently asked questions about auth0-spa-js SDK.
- Examples - code samples for common scenarios.
- Docs Site - explore our Docs site and learn more about Auth0.
Getting Started
Installation
Using npm in your project directory run the following command:
1npm install @auth0/auth0-spa-js
From the CDN:
1<script src="https://cdn.auth0.com/js/auth0-spa-js/2.1/auth0-spa-js.production.js"></script>
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 (see below).
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
Create an Auth0Client instance before rendering or initializing your application. You should only have one instance of the client.
1import { createAuth0Client } from '@auth0/auth0-spa-js'; 2 3//with async/await 4const auth0 = await createAuth0Client({ 5 domain: '<AUTH0_DOMAIN>', 6 clientId: '<AUTH0_CLIENT_ID>', 7 authorizationParams: { 8 redirect_uri: '<MY_CALLBACK_URL>' 9 } 10}); 11 12//or, you can just instantiate the client on its own 13import { Auth0Client } from '@auth0/auth0-spa-js'; 14 15const auth0 = new Auth0Client({ 16 domain: '<AUTH0_DOMAIN>', 17 clientId: '<AUTH0_CLIENT_ID>', 18 authorizationParams: { 19 redirect_uri: '<MY_CALLBACK_URL>' 20 } 21}); 22 23//if you do this, you'll need to check the session yourself 24try { 25 await auth0.getTokenSilently(); 26} catch (error) { 27 if (error.error !== 'login_required') { 28 throw error; 29 } 30}
Logging In
You can then use login using the Auth0Client instance you created:
1<button id="login">Click to Login</button>
1//redirect to the Universal Login Page 2document.getElementById('login').addEventListener('click', async () => { 3 await auth0.loginWithRedirect(); 4}); 5 6//in your callback route (<MY_CALLBACK_URL>) 7window.addEventListener('load', async () => { 8 const redirectResult = await auth0.handleRedirectCallback(); 9 //logged in. you can get the user profile like this: 10 const user = await auth0.getUser(); 11 console.log(user); 12});
For other comprehensive examples, see the EXAMPLES.md document.
API Reference
Explore API Methods available in auth0-spa-js.
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.
What is Auth0?
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
no dangerous workflow patterns detected
Reason
no binaries found in the repo
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 (28) are checked with a SAST tool
Reason
Found 13/15 approved changesets -- score normalized to 8
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'allow deletion' disabled on branch 'main'
- Info: 'force pushes' disabled on branch 'main'
- Warn: 'branch protection settings apply to administrators' is disabled on branch 'main'
- Info: 'stale review dismissal' is required to merge on branch 'main'
- Warn: required approving review count is 1 on branch 'main'
- Warn: codeowners review is not required on branch 'main'
- Info: 'last push approval' is required to merge on branch 'main'
- Warn: no status checks found to merge onto branch 'main'
- Info: PRs are required in order to make changes on branch 'main'
Reason
6 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 5
Reason
dependency not pinned by hash detected -- score normalized to 3
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-spa-js/browserstack.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/codeql.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-spa-js/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-spa-js/rl-secure.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/semgrep.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/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-spa-js/snyk.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:113: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:135: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/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-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/auth0/auth0-spa-js/test.yml/main?enable=pin
- Info: 0 out of 18 GitHub-owned GitHubAction dependencies pinned
- Info: 2 out of 2 third-party GitHubAction dependencies pinned
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:18
- Info: topLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:19
- Warn: topLevel 'security-events' permission set to 'write': .github/workflows/codeql.yml:20
- Warn: no topLevel permission defined: .github/workflows/npm-release.yml:1
- Warn: topLevel 'contents' permission set to 'write': .github/workflows/release.yml:10
- Warn: no topLevel permission defined: .github/workflows/rl-secure.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/semgrep.yml:16
- Info: topLevel 'contents' permission set to 'read': .github/workflows/snyk.yml:17
- 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
12 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-qxrj-hx23-xp82
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-hhhv-q57g-882q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
5.7
/10
Last Scanned on 2024-11-25
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