useAuth
A Custom React Hook to simplify User Authorization
This Blog is singing the praise of other people’s code and me going through it for the benefit of myself and maybe a reader like you. If you just want the code without the explanation, they are linked at the bottom. For my Capstone project here at Flatiron, I created a web app that has a user login but I wanted some parts of the site to be public and others private that a user had to login to. My solution was to use private routes with the React Router node package. The docs for this guided me to another site called useHooks.com which provided me with the skeleton of what I needed to get everything working to divide my site up between public and private. When I first looked at this code for the useHooks site it almost looked like nonsense even with multiple React apps under my belt. The issue was the code creating and using context and using custom hooks, two things I have never seen before and and if you haven’t either I am going to go into both concepts real quick before going into an awesome way set up user authentication with React.
Custom Hooks
React hooks are awesome, useState, useEffect, useRef, all extremely useful in their own way. Hooks solve a lot of problems but sometimes that isnt enough. React allows you to create your very own hooks to solve problems of your own making. A hook is just a function in React with the work ‘use’ in front of it. With the convention of the ‘use’ keyword it is telling React that it is a hook and that it adheres to the rules of hooks . One of the best use cases is to create your own hooks to keep your code dry. If you find yourself reusing the same logic over and over again, hooks might be right for you. If you want you can extract that logic from your components, put it in a separate file, and then import and use the function whenever is best. We will see it in use in s moment, first we need to talk about context.
createContext and useContext
Using React, without Redux, handling state can sometimes be a pain. Passing state that needs to be in a parent component all the way down into deeply nested components can be a chore and oftentimes very complex and confusing. In specific use cases, create and useContext can be a great way of making state available throughout the component tree. He is a basic example to get the jist before we talk about how it will work with the useAuth hook we are going to make. The example is taken directly from the React doc and you will see it again if you explore the further readings. I could have tried to make an original example but it would have either plagiarized this or confused you even further.
As you can see we create a context and then wrap the component we want to be able to access the state in the context provider. React warns to use context sparingly and only when you are dealing with complex and deeply nested components because the use of context can make the reuse of components difficult.
The useAuth Hook
Now that we have a primer with custom hooks, createContext and useContext, let’s put them all together to create an awesome custom hook that will pass user state all around your application. So lets say that you have a full stack web app and you want to include user authentication. It could be very useful to have the user data of the currently logged in user throughout the app and have the logic to sign up, login, sign out anywhere without repeating any code. This is exactly what this can do for you.
First we need to create the context. This is some generic context that our hook we will look at in a second will use to be able to do all the things we want it to do where we need it to do them. All of this code is originally for the useHook site but taken directly for my project.
The provider that is defined in this is wrapped around your entire app. So in the example above, the “children” in ProvideAuth is the App.js. I did this in the index.js. Right below this context we will create the hook that will be accessed anywhere in the app. I decided to include the entire hook because, too often blogs leave out some bits of code that cause headaches for people trying to learn.
As you can see we defined some state at the top of the hook. The user is probably the most important part, the errors and loading are helpful when fetching from your API. With the provider wrapping your App.js you are free to import useAuth to any component, call the useAuth function and access any part off the hook. IF you wanted the user object it’s just auth.user. You want to log out, it’s just auth.signout(). Super easy and intuitive once you get the hang of it.
Further Reafing:
