Firebase is a platform created by Google that provides backend-as-a-service (BaaS) for mobile and web applications. It allows developers to build and deploy full-stack applications without worrying about server infrastructure and backend services.
It offers a range of tools and services, including Firebase Realtime Database, Firebase Authentication, Firebase Cloud Database, Firebase Cloud Messaging, Firebase Hosting, and Firebase Functions, which we can use individually or together to create powerful applications. We can read more about firebase and its services by using the above link.
What we would be learning
In this article, we will learn the following:
- How to add authentication to React applications using firebase authentication.
- How to store data using firestore database
- How to store images and files using firebase storage
- How to retrieve our data from firebase.
This article has been split into series, this is the first part and we would be talking majorly about how to set up our react app, firebase project, and also enable the firebase services we need.
At the end of this article, we will build a simple application that allows users to create accounts, sign in, sign out, and also view their profiles. The link to the GitHub repository for this project can be found in the above link.
Creating the react app
First of all, we start by creating a new react app using vite, if we want to follow along, we can also create a react app by using vite, then follow the prompts, or by running any of the following commands, then follow the prompts that follow.
NPM
npm create vite@latest
PNPM
pnpm create vite
YARN
yarn create vite
We will be using Chakra UI framework for this project, so we have to install it as well as Iconsax react icons, and also react-router-dom. We can install the packages by using the following commands.
Chakra UI
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Iconsax React Icons
npm i iconsax-react
React Router Dom
npm i react-router-dom
Setting up our firebase project
The next thing is to create a firebase project, I have already created one for this project, we can also create one by using this link or follow the steps below.
After clicking on the link above, we should see a screen just like the one below.
Click on the “create a project” button to get started, after doing that, we should see the screen below.
We give our firebase project a name of our choice, then continue.
We could enable firebase analytics for our firebase project, if we don’t want them we click on “create project” to proceed.
After our project has finished creating, we should see the screen above, then click on continue.
The next thing is to choose the platform in which we want to use the firebase project, in this case, we would be using it on the web so we have to choose the web. We would see "add an app to get started", just click on the closing tag icon "</>".
Next, we give our firebase web app a name of our choice and then click on “register app”.
Firebase will generate a config for us, all we have to do is copy it, create a "firebaseConfig.js" file in the "src" folder of our react project then paste the config in it. We shouldn’t forget to export the app from the firebaseConfig file, then click on continue to console.
Then we should be redirected to our firebase console just like in the picture above.
Our firebase config file should look like the picture above, and we shouldn’t forget to export const app.
After that, we have to install firebase as a dependency in our react project by running "npm i firebase" in our terminal.
Our package.json file should look like the picture above after the installation.
Enabling Firebase Authentication in our firebase project
In our firebase console on the left-hand side, click on the build toggle button, we would find lots of services that firebase provides, but we would be using only 3 of them.
Click on the authentication then click on get started, and we would be redirected to the sign-in methods tab.
In this article, the sign-in method we would be using is the email and password provider. Click on the email/password provider, enable it then save.
Enabling firestore database in our project.
The next we have to do is to enable firestore database in our firebase project, this will enable us to store users' data. Back to the build toggle button click on firestore database then click on create a database. It will prompt us to answer some questions before we proceed. We have to make sure we select “start in test mode” and not production mode then click on next.
Next, we have to set our cloud firestore location, we can choose any preferred location of our choice and then click on enable.
Great! we have just finished setting up the database, now let's move to firebase storage.
Enabling firebase storage in our firebase project
Back to our left sidebar, in the build section, click on storage and then click on get started, we have to make sure we start in test mode as well, then continue.
After that, we click on done when the next modal comes up, we should see the screen below once we are done.
Great! Now we are done with setting up all the firebase services we need for the project, let's jump into our code editor and start performing magic.
You can continue reading the second part of the series here
Top comments (0)