Auth0 and React Hooks

The multiple ways that you can handle user credentials in React.js can make implementing authorization/authentication (auth) a confusing process. In this blog we will look at a way to manage auth in React.js by creating a React context to house user credentials which can also be updated with hooks. There are many ways to handle authentication and authorization (auth), but Auth0 provides a fairly simple way to implement auth into your application, while also providing useful dashboard utilities.

The Context API is now fully supported with React.js, and allows you to create an object that can be accessed by any child component. This means that values stored in state can be universally accessed without creating a local state within a class component, or lifting state through props.

You can create a new context by using the createContext() function in React. This function creates an object that has two components: a Provider and a Consumer. When React renders a component that has access to this context, it will pull information from the closest matching Context.Provider in the tree. Context.Consumer on the other hand, allows a child function component to receive values from the parent Context.Provider and will return a React node.

React.js 16.8 introduced a series of useful predefined hooks that can be used to access and update the global state being stored in a React context. In this case we will use a Redux-like store context which will be created using createContext(), which will update the local React state by referencing an external reducer that is accessed using the useReducer() hook.

The useReducer() hook accepts two arguments, a Redux-like reducer function, and an initial state. The returned value of the hook can be destructured into state (current state), and a dispatch function that can be used to update state. More about setting and updating global state can be found in my previous blog: React: Creating a ‘Redux-like’ Global State with the useContext and useReducer Hooks.

Auth0 is by no means the only way to implement Auth in your application but it does provide a useful dashboard to implement and manage auth.

In the site setup menu, select: Application Type: Single Page Web Applications.

In order to safely add authentication with Auth0 to your app, you need to install two npm packages. The first one is dotenv that is used to add local environment variables to your application. IMPORTANT: make sure that .env files are in your git-ignore filter. The other one is auth0-js, which is the official client-side JavaScript SDK from Auth0.

Create a .env file in the root of your project and include the following variables (using the information from the step above):

You will need to create a logic file containing the following code:

Now you should have everything that you need to pass between your global state.

Related posts:

Governance is seen as the process of policy making and policy implementation keeping the welfare of citizen and national interest in mind. It faces 3 main challenges: India is a country of different…

Quite a while back I had enrolled for Udacity Self driving Nanodegree. So I ended up paying 800$ for learning about the basics and guts of self-driving / Autonomous vehicles. The program required us…

Back when we first wrote our guide about the Staking and Holding requirements we indicated that we would be updating the staking requirements once Proton’s KYC feature was launched. After all…