Auth0 React SDK for Single Page Apps
The Auth0 React SDK (auth0-react.js) is a JavaScript library for implementing authentication and authorization in React apps with Auth0. It provides a custom React hook and other Higher Order Components so you can secure React apps using best practices while writing less code.
The Auth0 React SDK handles grant and protocol details, token expiration and renewal, as well as token storage and caching. Under the hood, it implements Universal Login and the Authorization Code Grant Flow with PKCE.
The library is hosted on GitHub where you can read more about the API.
Installation
You have a few options for using auth0-react.js in your project.
From the CDN:
<script src="https://cdn.auth0.com/js/auth0-react/1.0/auth0-react.min.js"></script>
From npm:
npm install @auth0/auth0-react
From yarn:
yarn add @auth0/auth0-react
Getting started
First, you'll need to wrap your application in a single Auth0Provider
component. This will provide the React Context to components that are placed inside your application.
import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
ReactDOM.render(
<Auth0Provider
domain="YOUR_DOMAIN"
clientId="YOUR_CLIENT_ID"
redirectUri={window.location.origin}
>
<App />
</Auth0Provider>,
document.getElementById('app')
);
isLoading and error
Wait for the SDK to initialize and handle any errors with the isLoading
and error
states.
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function Wrapper({ children }) {
const {
isLoading,
error,
} = useAuth0();
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Oops... {error.message}</div>;
}
return <>{children}</>;
}
export default Wrapper;
Login
Use loginWithRedirect
or loginWithPopup
to log your users in.
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function LoginButton() {
const {
isAuthenticated,
loginWithRedirect,
} = useAuth0();
return !isAuthenticated && (
<button onClick={loginWithRedirect}>Log in</button>
);
}
export default LoginButton;
Logout
Use logout
to log your users out. Make sure returnTo
is specified in "Allowed Logout URLs" in your Auth0 Dashboard.
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function LogoutButton() {
const {
isAuthenticated,
logout,
} = useAuth0();
return isAuthenticated && (
<button onClick={() => {
logout({ returnTo: window.location.origin });
}}>Log out</button>
);
}
export default LogoutButton;
User
Access user profile information with the user
value.
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function Profile() {
const { user } = useAuth0();
return <div>Hello {user.name}</div>;
}
export default Profile;
Use with a class component
Use the withAuth0
Higher Order Component to add the auth0
property to class components instead of using the hook.
import React, { Component } from 'react';
import { withAuth0 } from '@auth0/auth0-react';
class Profile extends Component {
render() {
const { user } = this.props.auth0;
return <div>Hello {user.name}</div>;
}
}
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.
import React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';
const PrivateRoute = () => (<div>Private</div>);
export default withAuthenticationRequired(PrivateRoute, {
// Show a message while the user waits to be redirected to the login page.
onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});
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, Gatsby and Next.js.
Call an API
To call a protected API with an Access Token, be sure to specify the audience
and scope
of your access token, either in Auth0Provider
or getAccessTokenSilently
. Then use it to call a protected API by passing it in the Authorization
header of your request.
import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@auth0/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 <div>Loading...</div>;
}
return (
<ul>
{posts.map((post, index) => {
return <li key={index}>{post}</li>;
})}
</ul>
);
};
export default Posts;