Adding Firebase to your React App

Firebase is a platform that was developed by Google to help with the making of mobile and web applications. The main objective of firebase was to provide a real-time database online for developers, but firebase also provides many other functions like Hosting, Authentication, and many more.

In this article, I will describe how to add firebase to your react app. Lets Begin:

Connecting Firebase to your App

Step 1 - Log into your Firebase account through Google.
Step 2 - Create a project (it may take a while).
Step 3 - On the Project Overview page, you will find three buttons. Press the button for Web app and register your app.

Step 4 - You will then be given the code to add the Firebase SDK, which looks like this snippet bellow.

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};
firebase.initializeApp(firebaseConfig);

Step 5 - Go to your code open Terminal and Run command

npm install --save firebase

Step 6 - Import firebase in your JavaScript file and paste the SDK which you got in step 4.

import firebase from 'firebase/app';
import 'firebase/firestore';

Step 7 - You have to initialize firebase to use it in your code now.

const db= firebase.firestore();

firestore is the name of the new firebase storage database
Step 8 - Now use can use this reference in your code to store data Add:

 db.collection("todoS").add({
            inprogress: true,
            timeStamp: firebase.firestore.FieldValue.serverTimestamp(),
            todo: todoInput,
          });

Delete:

db.collection("todoS").doc(id).delete();

Step 9 - Now you may want to use the authentication function provided by firebase, Go to the console, ACTIVATE authentication from the sidebar.
Step 10 - You might need to add a Payment option for it. Do not worry it is just being asked in case you exceed the given FREE quota. which enough to easily manage many projects.[additional info: I found that only credit cards work and preferably if international payment is activated on it, as it should support USD$, INR 1 will be charge to check and authenticate your card.]
Step 11 - You enable your preferred Sign-in method for authentication.
Step 12- Import Firebase Authentication

import 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth';

Step 13- You will have to initialize authentication in your JavaScript file,

const auth = firebase.auth();

Step 14- You can then use it in your code

const [user] = useAuthState(auth);
 const provider = new firebase.auth.GoogleAuthProvider();
    auth.signInWithPopup(provider);

Sign-Out using

auth.signOut()