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.

Lets start….

Check Full Story …

AuthGuard React Router V6

What you will see…

1. Create React App
2. Integrate Routing and Guard Components
3. Design Login, Register, Welcome Page
4. Setup Firebase Project
5. Integrate Firebase & Authentication
6. 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

Create folder /src/guards
Create files /src/guards/AuthGuards.js& /src/guards/UnAuthGuards.js

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

Create folder /src/pages
Create files /src/pages/Login.js, /src/pages/Register.js & /src/pages/Welcome.js

We have return simple text for page component.

Routes Integration

Here we will create 2 separate list of routes and will add that routes to application routing.

Start from AuthRoutes

Create folder /src/routes
Create files /src/routes/AuthRoutes.js

Currently we have only /welcome route under auth. So, this is the only one in list.

Second One UnAuthRoutes

Create folder /src/routes
Create files /src/routes/UnAuthRoutes.js

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.

Install Packages

> 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
{
 height: 100%;
 font-family: 'Montserrat', sans-serif;
}
.page-container{
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
}
.page-block{
 background-color: #fff;
 padding: 30px 25px;
 border-radius: 10px;
 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 position: relative;
 overflow: hidden;
}
.page-heading{
 font-size: x-large;
 text-transform: capitalize;
 margin-bottom: 15px;
}

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.

Open https://console.firebase.google.com/

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”
Select “Email/Password”

Enable Email/Password only & Save

Yeah, We have set up firebase project and we are going to integrate in our React app,

Create /src/firebase-config.js

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

Create folder /src/services
Create file /src/services/auth.js

Above we have created Auth Service file, all the core logic is written here for authentication. You can see the AuthService.register& AuthService.getProfileMethod.

Integrate Register & Guard functionality

We have setup AuthService. Now, we have to implment this in Register and Guard.

Edit Register.js

Edit AuthGuard.js

Edit UnAuthGuard.js

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

Edit Welcome.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

Edit Login.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.

Wrapping Up

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

Thank you Guys…