React.js Firebase v9 Authentication Project to Implement Protected Routes Using Context API in JSX

 

 

Welcome folks today in this blog post we will be implementing protected routes in react.js using firebase email and password

 

authentication.

 

 

Now first of all you need to make a new react.js app by the below command

 

 

npx create-react-app firebaseauthproject

 

 

cd firebaseauthproject

 

 

npm i firebase

 

 

npm i react-router-dom

 

 

Now create a firebase.js file to store the config code as shown below

 

 

firebase.js

 

 

 

 

Installing TailwindCSS

 

 

Now to install tailwindcss inside your react.js project for the frontend you need to execute the below commands at the terminal

 

 

npm install -D tailwindcss postcss autoprefixer

 

 

npx tailwindcss init -p

 

 

After this command it will create two files namely postcss.config.js and tailwind.config.js

 

And now you need to add this following code to the tailwind.config.js

 

 

 

 

Configuring React Router Dom

 

 

Now inside the index.js file import the browserRouter as shown below

 

 

 

 

 

Now inside the App.js file copy paste the following code

 

 

 

 

 

So in this block of code we are configured the different routes that this application will be supporting. And also the protected route

 

is also there. Which is the acutal account page.

 

 

Creating Components For App

 

 

There will be three pages for this app

 

SignIn Page

 

SignUp Page

 

Account Page

 

 

Inside the components folder create a file called Signin.jsx

 

 

 

 

 

Now create a second file Signup.jsx

 

 

 

 

Now create a third file called Account.jsx

 

 

 

 

Also create a file called ProtectedRoute.js

 

 

 

 

Creating the Auth Context

 

 

For this you need to create a folder called context and inside this create a file called AuthContext.js

 

 

 

 

npm start

 

 

 

 

Leave a Reply