Configure Firebase with React

What is Firebase

Firebase is a comprehensive mobile and web application development platform provided by Google. It offers a suite of services and tools that facilitate various aspects of app development, including database management, authentication, hosting, cloud functions, and more.

To set up the project. Let’s use the React boilerplate project — create-react-app.

npx create-react-app react-with-firebase-auth

To access the app in the browser, run the command
npm start

To begin with, we need to copy the configuration from our Firebase project’s dashboard on their website. The configuration should be pasted as a configuration object in a new file called firebase.js, located in our application’s src/components/Firebase/ directory.

const config = {
  apiKey: YOUR_API_KEY,
  authDomain: YOUR_AUTH_DOMAIN,
  databaseURL: YOUR_DATABASE_URL,
  projectId: YOUR_PROJECT_ID,
  storageBucket: '',
  messagingSenderId: YOUR_MESSAGING_SENDER_ID,
}

When using create-react-app to set up the application, we can use React environment variables, but we must prefix them with REACT_APP.

const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
}

Now, we can have a .env file in the project’s root folder.
It is a good practice to add this file to .gitignore

.env file:

REACT_APP_API_KEY=*******
REACT_APP_AUTH_DOMAIN=********.firebaseapp.com
REACT_APP_DATABASE_URL=https://********.firebaseio.com
REACT_APP_PROJECT_ID=********
REACT_APP_STORAGE_BUCKET=********.appspot.com
REACT_APP_MESSAGING_SENDER_ID=********
The `Firebase/firebase.js` file would look like this:

import app from 'firebase/app';
const config = {
 apiKey: process.env.REACT_APP_API_KEY,
 authDomain: process.env.REACT_APP_AUTH_DOMAIN,
 databaseURL: process.env.REACT_APP_DATABASE_URL,
 projectId: process.env.REACT_APP_PROJECT_ID,
 storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
 messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};
class Firebase {
 constructor() {
 app.initializeApp(config);
 }
}
export default Firebase

Note: We can have 2 Firebase projects on the Firebase website. One serves the dev environment, and the other serves the production environment.

In this case, we can have two .env files:
.env.development and .env.production

Firebase setup:
Sign up for an account on the Firebase side and create a project.

I have set up an app called BridgeCareApp .

We are creating a web app. So, we will click on the third icon above the text, “Add an app to get started.”

Once the app is created, the configuration file with APIKey, AuthDomain, etc, will be should. Copy it and save it in a secure location. We plug these values in the .env` files in the react app.

And that’s it. We have configured Firebase for our React application.

Now, let’s connect Firebase with the react world.

Firebase should be initialized once as a singleton. Exposing the Firebase class to every React component can lead to multiple Firebase instances.

We will use React’s Context API to provide a Firebase instance once at the top level of our application’s component hierarchy.

Create a new file named context.js inside the src/components/Firebase directory, and implement the code provided below.

`
import React from "react"

const FirebaseContext = React.createContext(null)

export default FirebaseContext
`

The createContext() function creates two components we can use in our React app. Firstly, the FirebaseContext.Provider component provides a Firebase instance at the top level of our React component tree. Secondly, the FirebaseContext.Consumer component retrieves the Firebase instance in any component if needed.

We will export all necessary functionalities, such as the Firebase class, Firebase context (for Consumer), and Provider components, in an index.js file located in our Firebase folder.

`
import FirebaseContext from './context'
import Firebase from './firebase'

export default Firebase

export { FirebaseContext }
`

Using the Firebase class, we can create a Firebase instance and pass it as a value prop to React’s Context.

src/index.js:

`
import React from 'react';
import ReactDOM from 'react-dom';
import Firebase, { FirebaseContext } from './components/Firebase'

ReactDOM.render(


,
document.getElementById('root'),
)
`

Here is an example of using the Firebase instance in any component.

`
import React from 'react'

import { FirebaseContext } from '../Firebase'

const ChildComponent = () => (

{firebase => {
return I can access the firebase
}}

)

export default ChildComponent
`
Now, Firebase and React are connected!