How to create an Auth system with Firebase and React?
Hello 👋🏼, I decided to start this year with Firebase! We'll start this tutorial
by creating a simple login form with React and TypeScript and then connecting it to the Firebase authentication service using email and password.
For this project, you need a Firebase Web App; if you don't have a firebase project, follow their
add Firebase to your project instructions.
The second part of this tutorial is How to reset a password in the Firebase Auth System?
in case you want to review it first.
Our working environment is Vite, React Router Dom, and React Context.
Firebase Authentication Demo
Initialize Firebase Authentication in the console.
After creating a Firebase Project, provision the authentication service by going to the Build tab in the Firebase console's left sidebar, then enable sign-in with email and password, and add a test user.
Set Up React TypeScript with Vite.
- Install Vite and choose React TypeScript as your template.
npm create vite@latest auth-tutorial -- --template react-ts
npm run dev
After checking that your app works, install React Router Dom and the Firebase tools; check the React Router Dom tutorial for more info.
npm install react-router-dom firebase
Create the Firebase Configuration Folder.
Before getting into React, we need to set our Firebase configuration
files. Create a
firebase folder, and
inside create two files:
touch firebase-config.ts && touch firebase.ts
Copy the following code into your
firebase-config.ts, and replace the variables with your own.
- There's no need to type the config variables; as you can see, TypeScript will auto-infer them.
firebase-config.tsto the Firebase file, so you can start making calls to Firebase.
Set Up the React Authentication Context.
First, create a
then initialize the current user state as null. When the user clicks the sign-out button,
redirect him to the home page.
Create the Routes for your Auth System.
In the last part of this tutorial, we'll work on the routing and the login UI.
First, go to
main.ts and bring the Context and the
BrowserRouter from React Router Dom.
- Create a simple Home page and Profile page under the routes folder.
touch home.tsx && touch profile.tsx
Bring the two routes to
In the example above, we used
currentUser to stop people from
accessing the profile page through the URL. Another way to do this
is by using a Higher Order Component (HOC) that will wrap the profile
route and check if there is an active user before letting people into
the profile page.
- Create a components folder, and inside, create require-auth.
App.tsx to use the HOC.
This HOC is reusable and will give you more flexibility on what routes you want to protect from malicious users. This HOC also saves the router history, redirecting the user to the page he wanted to go to after a successful login; for more info about the auth router, go to Remix Github. Visit How to reset a password in the Firebase Auth System? if you want to integrate the Firebase password reset into this tutorial.