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





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








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