AuthGuard React Router V6

What you will see…

Create React App

> npx create-react-app react-router-auth-guard
> npm i react-router-dom firebase

Integrate Routing and Guard Components

Here We Go….

Design Login, Register, Welcome Page

> npm install @mui/material @emotion/react @emotion/styled
> npm install @mui/icons-material
> npm install notistack
@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;
}

Here We Go…

Setup Firebase Project

Integrate Firebase & Authentication

Here We Go…

Wrapping Up

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store