react-auth-hook

react-auth-hook is an ultra-simple and elegant library for authenticating users in react with auth0 using hooks.

open source, react, auth0, typescript, authentication

05-09-2019

simple code example using react-auth-hook

Authentication refers to the process of confirming identity. While it is often used interchangeably with authorisation, authentication represents a fundamentally different function.

In authentication, a user or application proves they are who they say they are by providing valid credentials for verification. This verification of credentials is often proved through a username and password, sometimes combined with other elements factors.

Auth0 takes a lot of the complexity out of authentication and makes user identity easier for developers to handle. It is probably one of the easies ways to add authentication to your application.

While that being said, the auth0 team has a lot of libraries and conflicting documentation that makes it difficult to navigate when implementing it in your application. This is where react-auth-hook comes in.


react-auth-hook is an ultra-simple and elegant way to add authentication to your React application. It handles everything for you — user management, cookies, sharing of state between components, and login forms.

Right now a lot of this is handled through Auth0, but the library is contributions and further development, so other providers might be added over time.

How to

react-auth-hook provides a simple API interface through the useAuth hook.

export function Auth() {
  const { isAuthenticated, login, logout } = useAuth();

  return isAuthenticated() ? (
    <button onClick={logout}>Log Out</button>
  ) : (
    <button onClick={login}>Log In</button>
  );
}

To use the useAuth hook, you first need to wrap your application in an AuthProvider component to configure the Auth0 client and share state between components.

Configure AuthProvider

In your application, wrap the parts you want to be “hidden” behind your authentication layer in the AuthProvider component. I recommend adding it around your root component in the index.js file (in React).

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { navigate } from '@reach/router';
import { AuthProvider } from 'react-auth-hook';

ReactDOM.render(
  <AuthProvider
    auth0Domain="reactauthhook.eu.auth0.com"
    auth0ClientId="5iK42vpGXdMDbKvW1Gkz3I8D8352vNWa"
    navigate={navigate}
  >
    <App />
  </AuthProvider>,
  document.getElementById('root')
);

The AuthProvider creates the context, sets up an immutable state reducer, and instantiates the Auth0 client.

Handle the Callback

Auth0 use 0Auth which requires you to redirect your users to their login form. After the user has then been authentication, the provider will redirect the user back to your application.

The simples way to handle the callback is to create a page for it:

// src/components/AuthCallback.tsx

import React from 'react';
import { RouteComponentProps } from '@reach/router';
import { useAuth } from 'react-auth-hook';

export function AuthCallback(props: RouteComponentProps) {
  const { handleAuth } = useAuth();

  React.useEffect(() => {
    handleAuth();
  }, []);

  return (
    <>
      <h1>You have reached the callback page</h1>
      <h2>you will now be redirected</h2>
    </>
  );
}

The purpose of this page is to show some “loading” state and then run the handleAuth method from useAuth on page load. The function automatically redirects the user to the root route (/).

This is all you need to have add authentication to your React application. For detailed usage and documentation, please refer to the GitHub repository.