Firebase is a tool made by Google. It helps to build Signin, authenticate users and store database of users. This article gives a step-by-step guide to install and setup firebase. Part 1 contains steps required to setup firebase whereas Part 2 describes how to use this in our webapp (React web application)
1: Creating a new project in Firebase.
Login into ‘https://firebase.google.com/’. Click on ‘Go to console’ and create a project.
In Step1 of 3 of ‘Create a Project’ — Enter Project name. A unique id is created under the project name (in below snapshot, unique ID is ecomm-6d475). Then click on continue
In step 2 of 3 of Create a Project, you can choose to add google analytics to the firebase.
On clicking continue, the project firebase is created.
2: Adding your website to Firebase.
For adding your webapp to firebase, click on ‘Web’.
Give a nickname to your app and then register app.
Once App is registered, it will provide you with a Firebase SDK (software development kit). You can use this SKD to setup firebase in your code. For details refer Part 2 of this article.
For installing and setting up firebase into your react app, go to terminal and install firebase and then copy-paste the code to create an firebase instance for the app.
3: Adding Authentication
To enable authentication, Click on Build in the left navigation bar, and then click on Authentication
Under Sign-in method, select the required provider e.g. Google
Toggle the enable switch, provide support e-mail ID and click ok save.
Under settings → Authorized domains, you can add required domains. For apps under development, localhost is already added by default.
4: Setup Firestore database
In the left side Navigation bar, under Build, click on Firestore database
Click on create database
You can select to start in production mode or test mode
Select your region and click on enable
Once Firestore is setup, we can directly import it into our webapp. Refer Part 2 for an example of creating and storing data into firestore.
