AuthGuard React Router V6
Firebase, ReactJs, React Router — Protected Routes
Integrating authentication functionality in ReactJs with React Router was a bit complicated, The main reason is there is not any pre-define structure for integration. You can define your own structure. So here I have show you some useful stuff for Authentication AuthGuard.
As usual there are 3 kind of routes in website,
First one, those are under authentication, Like /profile, /dashboard or /settings etc…
Second one, where we user must not Logged In, if you are logged in then you can not visit that page, Like /login, /register & /forgot-password etc…
Last one is, it does not matter you are logged in or not, you can visit any how Like /blogs, /about-us etc….
Actually, In this integration I have create two Guards for routes,
First one is AuthGuard, used to check the user must logged in.
Second one is UnAuthGuard, used to check the user must not logged in.
Hope so, you understand the base concept, what we are going to implement, we have used here Firebase dependency for authentication, so you also learn how to implement easily.
What you will see…
- Create React App
- Integrate Routing and Guard Components
- Design Login, Register, Welcome Page
- Setup Firebase Project
- Integrate Firebase & Authentication
- Check The Progress
Create React App
We are using Node 16.
> npx create-react-app react-router-auth-guard
Install Basic Dependencies
> npm i react-router-dom firebase
Integrate Routing and Guard Components
Now we have react app ready & we have to integrate Routing and Guard
Lets Start from Guard Components
In the Guard component you can check we have just console log the guard, and return the component as it, for now it is enough for routing implement. After this routing we will writer the whole integration.
Need Pages Components
Now we have to create pages component for using in routing. We will have 3 pages. /login, /register & /welcome
/src/pages/Register.js & /src/pages/Welcome.js
We have return simple text for page component.
Here we will create 2 separate list of routes and will add that routes to application routing.
Start from AuthRoutes
Currently we have only /welcome route under auth. So, this is the only one in list.
Second One UnAuthRoutes
As you see, we have 2 routes in unauth list /login & /register.
Also, check that we have attacked pages component in each routes item.
Add AuthRoutes & UnAuthRoutes to App component
Yeah!! We have setup base. Lets test it……
Here We Go….
You must see these page, by calling below urls
Design Login, Register, Welcome Page
Now, we are ready to start next. we have to design our pages. Don’t worry if you do not need to design your own just follow the steps. Also I am a good designer.
We need Material UI in our React setup and Notification.
> npm install @mui/material @emotion/react @emotion/styled
> npm install @mui/icons-material
> npm install notistack
We can use Material UI component directly importing them but we need to Add SnackbarProvider in src/index.js for message popup
Lets add some Fonts & Style
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');html, body,
body > div,
body > div > .App
font-family: 'Montserrat', sans-serif;
padding: 30px 25px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
Design Form for Login Page — Open Login.js
Design Form for Register Page — Open Register.js
Design Form for Welcome Page — Open Welcome.js
So, Design is completed, Let check how it looks.
Here We Go…
Setup Firebase Project
Design is pretty nice, Now we have to setup Firebase project and Integrate in our React app.
Click on “Create a project”
Enter Project name and Continue
Disable Google analytics and Create Project
Need to enable Authentication functionality
Click on “Get Started”
Enable Email/Password only & Save
Yeah, We have set up firebase project and we are going to integrate in our React app,
Need to get firebase config for integration in our react app
Enter Project name and Register App, No need to select Hosting option
Copy this detail and set to src/firebase-config.js
Now, we are at final step. Also, important one.
Integrate Firebase & Authentication
Above we have created Auth Service file, all the core logic is written here for authentication. You can see the
Integrate Register & Guard functionality
We have setup AuthService. Now, we have to implment this in Register and Guard.
Integrate Welcome Page Functionality
Lets, integrate AuthService in Welcome page and display there who is logged In. Also, we need to display there logout btn for logout user.
Add logout function to src/services/auth.js
Integrate Login Page Functionality
So, this is the last one. We had integrate Register, Welcome, Guard and it final one.
Add login frunction to src/services/auth.js
Finally, we had done the AuthGuard, Lets test the whole functionality.
Here We Go…
Start from register, if you have already register with same email address you can set this message.
If all goes well, you will see this welcome screen, with message Register Successfully.
Try to log out. It will redirect you to login page.
The same way try to login and you will see how it is smooth.
So, this the the AuthGuard Concept where we can easily check user is Logged In or not. And implement as per our requirements.
Here is the whole project
GitHub - RomikMakavana/react-authguard-demo
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
Thank you Guys…