How to setup Firebase in React app

Girish Nandan — Sun, 01 Jan 2023 17:08:41 +0000

Firebase is a platform from Google which provides Realtime database, hosting and authentication services to developers. It’s easy to set up and less complex than configuring SQL database and Node.js server inside the react app

To get started, install Firebase tools
yarn global add firebase-tools

Install firebase functions
yarn add firebase-admin firebase-functions

Install Bebel core
npm install --save-dev @babel/core @babel/cli @babel/preset-env cross-env rimraf

Create Firebase Firestore Database by creating a project

Select Firebase Project in cli
firebase use <project_id>

Got to Firestore — Create Database with parent path, database, document id, fields

Create — src/firebase.js

Add your firebase configuration which can be found in project settings of the Firebase


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

import { getAnalytics } from "firebase/analytics";

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCTuh63tSvoqIB6_VYZGjDmHKjYARzOaM8",
authDomain: "portfolio-gn.firebaseapp.com",
projectId: "portfolio-gn",
storageBucket: "portfolio-gn.appspot.com",
messagingSenderId: "1062624464115",
appId: "1:1062624464115:web:82daeb29023ae5c276bb86",
measurementId: "G-SNTMXRT194"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

Import Login and Firestore and initialise it


import {getAuth} from "firebase/auth";

import { GoogleAuthProvider } from "firebase/auth";

import { getFirestore } from "firebase/firestore";


const auth = getAuth(app);
const provider = new GoogleAuthProvider();
const db = getFirestore(app);
export { auth, provider, db,};

Initialise Auth e.g google login & firestore inside the firebase.js


//src/firebase.js
import {getAuth} from "firebase/auth";

import { GoogleAuthProvider } from "firebase/auth";

import { getFirestore } from "firebase/firestore";

// Import the functions you need from the SDKs you need

import { initializeApp } from "firebase/app";

import { getAnalytics } from "firebase/analytics";

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyCTu34tSvoqIB6_VYZGsOmHKjYARzOaM8",
authDomain: "portfolio-gn.firebaseapp.com",
projectId: "portfolio-gn",
storageBucket: "portfolio-gn.appspot.com",
messagingSenderId: "1062245464115",
appId: "1:1062624244115:web:82daeb29023ae5c276bb86",
measurementId: "G-SNTSRRT194"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

//Initialise auth, provider
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
const db = getFirestore(app);
export { auth, provider, db,};

Create the Context inside the App
src/context/MediumContext.js


import {createContext, useEffect, useState} from 'react'
const MediumContext = createContext()

Import Firebase firestore functions


import {collection, getDocs, setDoc, doc, query} from 'firebase/firestore'
import {db} from '../firebase'

Context page


//src/context/MediumContext.js
import React, { Component } from 'react'
import {createContext, useEffect, useState} from 'react'
import {collection, getDocs, setDoc, doc, query} from 'firebase/firestore'
import {db} from '../firebase'
const MediumContext = createContext()
const MediumProvider = ({children}) => {
const [users, setUsers] = useState([])
const [posts, setPosts] = useState([])
useEffect(() => {
const getUsers = async () => {
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.docs.map(doc =>
console.log(doc.data()))
}
getUsers()
}, [])
return(
<MediumContext.Provider value={{users, posts}}>
{children}
</MediumContext.Provider>
)
}
export {MediumContext, MediumProvider}

Change the Rules to true, (Firebase project > Rules > allow read write: if True;)

Now, Wrap Context around the App so that data can be passed


//src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {MediumProvider } from '../src/context/MediumProvider';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
   <MediumProvider>
       <App />
   </MediumProvider>
</React.StrictMode>
);

Access the data using useContext


//src/components/Home.js
import { useContext } from 'react'
import { MediumContext } from '../context/MediumContext'
export default function Home(){
const {posts, users} = useContext(MediumContext)
return(
<div>
<p>{posts.map(eachitem => console.log(eachitem.title))}<p>
</div>

DEV Community: Girish Nandan

How to setup Firebase in React app