Step-by-Step Guide to Implementing an Authentication Context in React JS

hey everyone welcome to this tutorial on how to create and use a react.js authentication context in this video we will be discussing what an authentication context is and how it can be useful in your react applications and authentication context is a way of managing authentication State and functionality in a react application it allows you to easily share authentication information and functionality throughout your application without the need to pass props through multiple components or Global variables in this tutorial we will be using the react.js context API to create an authentication context the context API is a wait for a component to share data with its children without the need to pass props through every level of the component screen so basically we don't need to do prop drilling when we are using a context so are you ready to learn how to create an auth context in your react.js application well let's get started then this over here is a boilerplate react.js application created using npx Create react app command so the first thing that I will do is in this SRC folder I will create a new folder and I will call it contexts inside this context folder I will create a new file and I will name it auth context.js now first I will import the required dependencies which are react we will also need user State and we will need use effect and we will also need use context these will be imported from react now the first thing that we will do is we will create an auth context constant by using react Dot create context this will create a new context object with the default value of null next we need to create an authentication provider the provider will be a component that wraps the rest of our application and provides the authentication context to all of its children to create the provider we will create a new component called auth provider and wrap it around our application it accepts its children prop which will be the components that it wraps let's see how it's done so export function or provider it will accept props first we will create a constant for the auth user and set auth user this is going to be a state property so we can declare it using use State the initial value for the auth user is going to be null next we are going to have a state property which will tell us if the user is logged in or not so is logged in and set is logged in the initial value of this property is going to be false next we will create a constant called as value which will be the value of this auth provider so what we have to do is we will just have to add these four properties to this value object so auth user and is logged in and there are Setter methods will be added to this object next we will return this Provider by using auth context dot provider we will set the value with the value that we have created this value constant and this provider is going to enclose the children so what this really means is we can enclose children's with our auth provider and the children who will be enclosed with this auth provider they will have access to these properties within this value object and apart from this we will also have to create a use auth hook so let's do that so export function use auth what this will return is this will simply return the context of our auth context so use context auth context and that's pretty much everything that we need to do with our auth context.js file we are exporting the auth provider and the use auth hook now to use this authentication context we will create a new component for that I will create a new folder within the SRC folder let's just call it components and inside this components I will create a new file let's just call it dashboard.jsx I will use the ESX tools shortcut to create the boilerplate for a function component the shortcut is rafce which simply means react Arrow function with export component default now the first thing that we will do is we will import the use auth Hook from our auth context now let's just use the structuring to get the objects from within the auth context so the objects were auth user the objects were actually these one auth user setup user so I'm just going to copy from over here and let's just paste them over here they will be fetched from use auth hook now in this dashboard component what we will be doing is we will be providing login and logout buttons when the user will log in then the user's name will display when the user will be logged out then the user's name will not display and a message will display indicating whether the user is logged in or logged out so I will create a fragment over here now inside this fragment let's create two buttons this one is to log out and let's create another one to log in and let's create two functions to handle the login and log out so const log in equals to an arrow function this will accept the event as an argument so e Dot prevent default now to login a user we will simply use this is logged in setter to pass the True Value so that the auth context will know that the user has been logged in we will also set the auth user object so set auth user and in this object we can provide the username so name let's add the name as John Doe similarly we can create a logout function so the stuff that we will be doing over here is going to be complete opposite of what we did in login function so set logged in equals to false and SEC or user equals to null and now we can set the on click events for these two buttons so from log out we will just have to call this logout function and we will have to pass in this event argument but for login we will be using or calling the login function and now we have to display helpful messages I am first going to create a span which will simply say user is currently now here we have to write a conditional expression so f is logged in is true then we will print logged n and F is logged in as false then we will simply print logged out next we will have to print the user's name and for that also we will need a conditional expression so f is logged in as true then we will create a span with the auth user's name so user name is hot user dot name if user is not logged in then we will simply return null from over here now let's add a line break for our buttons for our buttons as well we need to use a conditional expression so if the user is logged in then we have to display the log out button otherwise we have to display the login button so if user is logged in then this button will display otherwise this login button will display so let's format this document all right so our dashboard component has been more or less built but I think we have done a typo over here we have to use a set is logged in not is logged in because it's logged in is a property that will indicate if the user is logged in or not now let's move on to the next step and that is to wrap our dashboard with this authentication provider and that can be done in app.js so let's open app.js and what I will do is I will remove this default div which is being returned from app and let's also remove the reference to this logo the first thing that I will do is I will import the auth provider and I will also import the dashboard now let's render the dashboard but we will enclose this dashboard within an auth provider now it's time to test our code to see if it's working so press Ctrl and back deck to open up the terminal and use the command npm start all right so this is our application let's first check if there are any console errors or not nope they aren't let's click on the login button it says user is currently logged in and username is John Doe let's click on logout button now it says logged out over here I think we can add a line break after the first span as well so that these two lines are different so user is currently logged in username is there click on logged out user is currently logged out so let me tell you one more thing in auth context right now we are using the set is logged in method to log in or log out the user but when we are working with an authentication provider then we don't do stuff like this what we do is we use use effect to subscribe to the authentication providers changing events whenever a user logs in or logs out so to subscribe to any odd service we can do something like this subscribe to our service const subscribe equals to auth or service Dot subscribe and then we can provide a callback function as an argument so if user is available it will mean that the user has logged in so we can set is logged into true and then we can set or user to this user if this is not the case it will mean that the user has logged out so we can set the reverse of what we have done here and then finally to unsubscribe we just have to return this subscribe return value and this is how we normally log in and log out users by using an authentication Service in our auth provider we don't use this set is logged in and set auth user setup properties for the state of auth context the subscription callback takes care of this stuff and that's it you now have a fully functional authentication context in your react application you can use the context to share authentication State and functionality throughout your application without the need to pass props to multiple components or use Global variables I hope this tutorial has been helpful in showing you how to create and use an auth context in your react application if you have any questions or comments feel free to leave them in the comments section below thank you for watching

Channel: Code Radiance

Views: 17,219

Keywords: React JS, Context API, Authentication, Authentication context, Context provider, Auth provider, useContext hook, Authentication state, Share authentication information, Manage authentication, Simplify authentication management, Step-by-step guide, Implementing an authentication context

Id: 2-6K-TMA-nw

Length: 14min 11sec (851 seconds)

Published: Tue Jan 17 2023