https://github.com/mozilla-frontend-infra/react-auth0-components
https://github.com/mozilla-frontend-infra/react-auth0-components
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mozilla-frontend-infra/react-auth0-components
- Owner: mozilla-frontend-infra
- Created: 2018-03-22T17:14:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:24:26.000Z (about 2 years ago)
- Last Synced: 2024-04-18T18:04:47.083Z (over 1 year ago)
- Language: JavaScript
- Size: 3.8 MB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Auth0 Components
React components for making the authentication flows of Auth0 more declarative,
using React paradigms. Supports authorization via redirect or `popup` flows,
which can be used in single-page or multi-page apps.
## Getting started
You can install `react-auth0-components` via Yarn or npm:
```bash
# If using Yarn:
yarn add react-auth0-components
# If using npm:
npm install --save react-auth0-components
```
The core components from `react-auth0-components` are `` and
``. This module can be required via ES imports, CommonJS require,
or UMD.
```js
import { Authorize } from 'react-auth0-components';
// using require
const { Callback } = require('react-auth0-components');
```
**Important! If you are using Create React App, you will need to import the
ES5 versions of components.
These are located at `react-auth0-components/es5`, e.g.:**
```js
import { Authorize } from 'react-auth0-components/es5';
// using require
const { Callback } = require('react-auth0-components/es5');
```
## Usage
After importing a component, it can be rendered with the required
`render`, `domain`, and `clientID` props:
```jsx
import { Component } from 'react';
import { render } from 'react-dom';
import { Authorize } from 'react-auth0-components';
class App extends Component {
render() {
return (
{
return (
conditionally render userInfo here...
);
}} />
);
}
}
render((
), document.getElementById('root'));
```
If you were to run this right now, it wouldn't actually do anything to login.
For that, you'll need to toggle the `authorize` prop:
```jsx
`
component to complete the flow:
```jsx
import { Callback } from 'react-auth0-components';
class CallbackPage extends Component {
render() {
return ;
}
}
```
If this was triggered via the `popup` flow, there is nothing else that should be
done here. If not, maybe in the instance this is a multi-page app, you can redirect
back to the page with the `` component, using the `onReady` prop:
```jsx
import { Callback } from 'react-auth0-components';
// Example with react-router:
class CallbackPage extends Component {
render() {
return this.props.history.push('/')} />;
}
}
```
_There are many nuances to this approach that may be difficult to capture via
documentation, so check the [examples directory](./examples) for an example
showing how to make this work with react-router using the `popup` and redirect
flows._
[See the styleguide](https://mozilla-frontend-infra.github.io/react-auth0-components)
for a listing of complete props.