https://github.com/a-type/auth0-react
Auth0 SDK for React Single Page Applications (SPA)
https://github.com/a-type/auth0-react
Last synced: 9 months ago
JSON representation
Auth0 SDK for React Single Page Applications (SPA)
- Host: GitHub
- URL: https://github.com/a-type/auth0-react
- Owner: a-type
- License: mit
- Fork: true (auth0/auth0-react)
- Created: 2020-10-17T15:06:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-17T18:15:25.000Z (over 5 years ago)
- Last Synced: 2025-01-02T05:57:19.667Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 530 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @a-type/auth0-react
Auth0 SDK for React Single Page Applications (SPA).
[](https://circleci.com/gh/auth0/auth0-react)
[](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/@a-type/auth0-react)
[](https://codecov.io/gh/auth0/auth0-react)
## Table of Contents
- [Documentation](#documentation)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
- [Support + Feedback](#support--feedback)
- [Troubleshooting](#troubleshooting)
- [Frequently Asked Questions](#frequently-asked-questions)
- [Vulnerability Reporting](#vulnerability-reporting)
- [What is Auth0](#what-is-auth0)
- [License](#license)
## Documentation
- [API Reference](https://auth0.github.io/auth0-react/)
- [Quickstart Guide](https://auth0.com/docs/quickstart/spa/react)
## Installation
Using [npm](https://npmjs.org/)
```bash
npm install @a-type/auth0-react
```
Using [yarn](https://yarnpkg.com/)
```bash
yarn add @a-type/auth0-react
```
## Getting Started
Configure the SDK by wrapping your application in `Auth0Provider`:
```jsx
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@a-type/auth0-react';
import App from './App';
ReactDOM.render(
,
document.getElementById('app')
);
```
Use the `useAuth0` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
```jsx
// src/App.js
import React from 'react';
import { useAuth0 } from '@a-type/auth0-react';
function App() {
const {
isLoading,
isAuthenticated,
error,
user,
loginWithRedirect,
logout,
} = useAuth0();
if (isLoading) {
return
Loading...;
}
if (error) {
return Oops... {error.message};
}
if (isAuthenticated) {
return (
Hello {user.name}{' '}
logout({ returnTo: window.location.origin })}>
Log out
);
} else {
return Log in;
}
}
export default App;
```
### Use with a Class Component
Use the `withAuth0` higher order component to add the `auth0` property to Class components:
```jsx
import React, { Component } from 'react';
import { withAuth0 } from '@a-type/auth0-react';
class Profile extends Component {
render() {
// `this.props.auth0` has all the same properties as the `useAuth0` hook
const { user } = this.props.auth0;
return
Hello {user.name};
}
}
export default withAuth0(Profile);
```
### Protect a Route
Protect 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:
```jsx
import React from 'react';
import { withAuthenticationRequired } from '@a-type/auth0-react';
const PrivateRoute = () =>
Private;
export default withAuthenticationRequired(PrivateRoute, {
// Show a message while the user waits to be redirected to the login page.
onRedirecting: () =>
Redirecting you to the login page...,
});
```
**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).
### Call an API
Call a protected API with an Access Token:
```jsx
import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@a-type/auth0-react';
const Posts = () => {
const { getAccessTokenSilently } = useAuth0();
const [posts, setPosts] = useState(null);
useEffect(() => {
(async () => {
try {
const token = await getAccessTokenSilently({
audience: 'https://api.example.com/',
scope: 'read:posts',
});
const response = await fetch('https://api.example.com/posts', {
headers: {
Authorization: `Bearer ${token}`,
},
});
setPosts(await response.json());
} catch (e) {
console.error(e);
}
})();
}, [getAccessTokenSilently]);
if (!posts) {
return
Loading...;
}
return (
- {post} ;
{posts.map((post, index) => {
return
})}
);
};
export default Posts;
```
For 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).
## 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](./CONTRIBUTING.md)
## Support + Feedback
For support or to provide feedback, please [raise an issue on our issue tracker](https://github.com/a-type/auth0-react/issues).
## Troubleshooting
For information on how to solve common problems, check out the [Troubleshooting](./TROUBLESHOOTING.md) guide
## Frequently Asked Questions
For a rundown of common issues you might encounter when using the SDK, please check out the [FAQ](./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/a-type/auth0-react/blob/master/LICENSE) file for more info.