Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sandrinodimattia/use-auth0-hooks
An easy way to sign in with Auth0 in your React application (client-side) using React Hooks
https://github.com/sandrinodimattia/use-auth0-hooks
auth0 react-hooks reactjs
Last synced: 9 days ago
JSON representation
An easy way to sign in with Auth0 in your React application (client-side) using React Hooks
- Host: GitHub
- URL: https://github.com/sandrinodimattia/use-auth0-hooks
- Owner: sandrinodimattia
- License: mit
- Archived: true
- Created: 2019-10-01T11:37:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-23T12:43:26.000Z (over 4 years ago)
- Last Synced: 2025-01-10T13:53:04.523Z (24 days ago)
- Topics: auth0, react-hooks, reactjs
- Language: TypeScript
- Homepage: https://nextjs-spa-auth0-demo.now.sh/
- Size: 281 KB
- Stars: 74
- Watchers: 3
- Forks: 31
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> This repository has been archived! Auth0's official React SDK is now available here: https://github.com/auth0/auth0-react
# use-auth0-hooks
An easy way to sign in with Auth0 in your React application (client-side) using React Hooks.
Highlights:
- Support hooks and class based components
- Pluggable architecture where you can add your error handlers and take action when redirecting
- Sign in
- Sign out
- Request access tokens for your APIs, with automated handling of expired tokens.
- Require the user to be signed in or make it optional, depending on the page you're on.
- Built with TypeScript
- Makes use of `@auth0/auth0-spa-js` which uses the Authorization Code grant with PKCE (instead of Implicit)
## Installation
Using [npm](https://npmjs.org):
```sh
npm install use-auth0-hooks
```
Using [yarn](https://yarnpkg.com):
```sh
yarn add use-auth0-hooks
```
## Getting Started
### Next.js
> A full example for Next.js can be found [here](examples/nextjs-spa).
Wrap your application with the `Auth0Provider` (under `/pages/_app.js`):
```js
// Create a page which wraps the Auth0 provider.
import { Auth0Provider } from 'use-auth0-hooks';
export default ({ Component, pageProps }) => (
)
```
You can then create a `NavBar` component with the necessary buttons:
```js
import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router'
import { useAuth } from 'use-auth0-hooks';
export default function NavBar() {
const { pathname, query } = useRouter();
const { isAuthenticated, isLoading, login, logout } = useAuth();
return (
-
Home
-
About
-
Profile
-
logout({ returnTo: 'http://localhost:3000' })}>Log out
-
login({ appState: { returnTo: { pathname, query } } })}>
Log in
{!isLoading && (
isAuthenticated ? (
<>
>
) : (
)
)}
...
);
};
```
And finally you can create pages which require authentication:
```js
import React from 'react';
import { withAuth, withLoginRequired } from 'use-auth0-hooks';
function Profile({ auth }) {
const { user } = auth;
return (
Profile
This is the profile page.
{JSON.stringify(user || { }, null, 2)}
);
}
export default withLoginRequired(
withAuth(Profile)
);
```
## Advanced Use Cases
### Calling an API
You can use hooks or high order components to get an access token for your API:
```js
import { useAuth, useAccessToken } from 'use-auth0-hooks';
export function SomePage() {
const { accessToken } = useAuth({
audience: 'https://api.mycompany.com/',
scope: 'read:things'
});
const { response, isLoading } = callMyApi(`https://localhost/api/my/shows`, accessToken);
if (isLoading) {
return (
);
}
return (
);
}
```
Or you can also use it in class based components:
```js
import { Component } from 'react';
import fetch from 'isomorphic-unfetch';
import { withAuth } from 'use-auth0-hooks';
class MyTvShows extends Component {
constructor(props) {
super(props);
this.state = {
myShows: null,
myShowsError: null
};
}
async fetchUserData() {
const { myShows, myShowsError } = this.state;
if (myShows || myShowsError) {
return;
}
const { accessToken } = this.props.auth;
if (!accessToken) {
return;
}
const res = await fetch(`${process.env.API_BASE_URL}/api/my/shows`, {
headers: {
'Authorization': `Bearer ${accessToken}`
}
});
if (res.status >= 400) {
this.setState({
myShowsError: res.statusText || await res.json()
})
} else {
const { shows } = await res.json();
this.setState({
myShows: shows.map(entry => entry.show)
})
}
}
async componentDidMount () {
await this.fetchUserData();
}
async componentDidUpdate() {
await this.fetchUserData();
}
render() {
const { auth } = this.props;
const { myShows, myShowsError } = this.state;
return (
{
myShows && (
My Favourite TV Shows ({auth.user.email})
This is rendered on the client side.
{myShowsError &&
Error loading my shows: {myShowsError}}
-
{show.name}
{state.myShows && state.myShows.map(show => (
))}
)
}
);
}
};
export default withAuth(MyTvShows, {
audience: 'https://api/tv-shows',
scope: 'read:shows'
});
```
### Deep Links
When a user clicks the login button on a specific page you'll probably want to send them back to that page after the login is complete. In order to do this you'll want to store the current URL in the application state:
```js
const { pathname, query } = useRouter();
const { login } = useAuth();
return (
login({ appState: { returnTo: { pathname, query } } })}>
Log in
);
```
And then you'll just provide a method which will be called after the login completed (ie: to redirect the user back to the page they were one):
```js
import App from 'next/app';
import Router from 'next/router';
import Layout from '../components/layout';
import { Auth0Provider } from '../components/auth';
/**
* Where to send the user after they have signed in.
*/
const onRedirectCallback = appState => {
if (appState && appState.returnTo) {
Router.push({
pathname: appState.returnTo.pathname,
query: appState.returnTo.query
})
}
};
/**
* Create a page which wraps the Auth0 provider.
*/
export default class Root extends App {
render () {
const { Component, pageProps } = this.props;
return (
);
}
}
```
### Before Login
When redirecting to the login page you'll end up in a state where the login page is still loading and the current page is still showing. You can render a message to explain that the user is being redirected.
```js
/**
* When redirecting to the login page you'll end up in this state where the login page is still loading.
* You can render a message to show that the user is being redirected.
*/
const onRedirecting = () => {
return (
Signing you in
In order to access this page you will need to sign in.
Please wait while we redirect you to the login page...
);
};
/**
* Create a page which wraps the Auth0 provider.
*/
export default class Root extends App {
render () {
const { Component, pageProps } = this.props;
return (
);
}
}
```
### Error Handling
If for some reason the login fails (eg: an Auth0 Rule returns an error), you'll want to handle this in your application. One way to do this is to redirect to an error page:
```js
/**
* When signing in fails for some reason, we want to show it here.
* @param {Error} err
*/
const onLoginError = (err) => {
Router.push({
pathname: '/oops',
query: {
message: err.error_description || err.message
}
})
};
/**
* Create a page which wraps the Auth0 provider.
*/
export default class Root extends App {
render () {
const { Component, pageProps } = this.props;
return (
);
}
}
```
You can also be notified when retrieving an new access token is not possible:
```js
const onAccessTokenError = (err, options) => {
console.error('Failed to retrieve access token: ', err);
};
/**
* Create a page which wraps the Auth0 provider.
*/
export default class Root extends App {
render () {
const { Component, pageProps } = this.props;
return (
);
}
}
```