https://github.com/stevehobbsdev/auth0-spa-js-shim
https://github.com/stevehobbsdev/auth0-spa-js-shim
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stevehobbsdev/auth0-spa-js-shim
- Owner: stevehobbsdev
- Created: 2020-01-24T14:09:49.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-24T14:20:26.000Z (over 6 years ago)
- Last Synced: 2024-12-31T20:15:58.490Z (over 1 year ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @auth0/auth0-spa-js
Auth0 SDK for Single Page Applications using [Authorization Code Grant Flow with PKCE](https://auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce).
[](https://circleci.com/gh/auth0/auth0-spa-js)
[](https://opensource.org/licenses/MIT)
## Table of Contents
- [Documentation](#documentation)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
- [Support + Feedback](#support--feedback)
- [Frequently Asked Questions](#frequently-asked-questions)
- [Vulnerability Reporting](#vulnerability-reporting)
- [What is Auth0](#what-is-auth0)
- [License](#license)
## Documentation
- [Documentation](https://auth0.com/docs/libraries/auth0-spa-js)
- [API reference](https://auth0.github.io/auth0-spa-js/)
- [Migrate from Auth0.js to the Auth0 Single Page App SDK](https://auth0.com/docs/libraries/auth0-spa-js/migrate-from-auth0js)
## Installation
From the CDN:
```html
```
Using [npm](https://npmjs.org):
```sh
npm install @auth0/auth0-spa-js
```
Using [yarn](https://yarnpkg.com):
```sh
yarn add @auth0/auth0-spa-js
```
## Getting Started
### Creating the client
Create an `Auth0Client` instance before rendering or initializing your application. You should only have one instance of the client.
```js
import createAuth0Client from '@auth0/auth0-spa-js';
//with async/await
const auth0 = await createAuth0Client({
domain: '',
client_id: '',
redirect_uri: ''
});
//with promises
createAuth0Client({
domain: '',
client_id: '',
redirect_uri: ''
}).then(auth0 => {
//...
});
```
### 1 - Login
```html
Click to Login
```
```js
//with async/await
//redirect to the Universal Login Page
document.getElementById('login').addEventListener('click', async () => {
await auth0.loginWithRedirect();
});
//in your callback route ()
window.addEventListener('load', async () => {
const redirectResult = await auth0.handleRedirectCallback();
//logged in. you can get the user profile like this:
const user = await auth0.getUser();
console.log(user);
});
//with promises
//redirect to the Universal Login Page
document.getElementById('login').addEventListener('click', () => {
auth0.loginWithRedirect().catch(() => {
//error while redirecting the user
});
});
//in your callback route ()
window.addEventListener('load', () => {
auth0.handleRedirectCallback().then(redirectResult => {
//logged in. you can get the user profile like this:
auth0.getUser().then(user => {
console.log(user);
});
});
});
```
### 2 - Calling an API
```html
Call an API
```
```js
//with async/await
document.getElementById('call-api').addEventListener('click', async () => {
const accessToken = await auth0.getTokenSilently();
const result = await fetch('https://myapi.com', {
method: 'GET',
headers: {
Authorization: `Bearer ${accessToken}`
}
});
const data = await result.json();
console.log(data);
});
//with promises
document.getElementById('call-api').addEventListener('click', () => {
auth0
.getTokenSilently()
.then(accessToken =>
fetch('https://myapi.com', {
method: 'GET',
headers: {
Authorization: `Bearer ${accessToken}`
}
})
)
.then(result => result.json())
.then(data => {
console.log(data);
});
});
```
### 3 - Logout
```html
Logout
```
```js
import createAuth0Client from '@auth0/auth0-spa-js';
document.getElementById('logout').addEventListener('click', () => {
auth0.logout();
});
```
## Contributing
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
- [Auth0's general contribution guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
- [Auth0's code of conduct guidelines](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
- [This repo's contribution guide](https://github.com/auth0/auth0-spa-js/blob/master/CONTRIBUTING.md)
## Support + Feedback
This SDK is in Early Access with selected stakeholders.
We process feedback and provide support via private channels.
## Frequently Asked Questions
For a rundown of common issues you might encounter when using the SDK, please check out [the FAQ](https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md).
## Vulnerability Reporting
Please 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.
## What is Auth0?
Auth0 helps you to easily:
- 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.)
- log in users with username/password databases, passwordless, or multi-factor authentication
- link multiple user accounts together
- generate signed JSON Web Tokens to authorize your API calls and flow the user identity securely
- access demographics and analytics detailing how, when, and where users are logging in
- enrich user profiles from other data sources using customizable JavaScript rules
[Why Auth0?](https://auth0.com/why-auth0)
## License
This project is licensed under the MIT license. See the [LICENSE](https://github.com/auth0/auth0-spa-js/blob/master/LICENSE) file for more info.