How to Add Firebase to React App: Simple Setup Guide

To add Firebase to a React app, first install the firebase package using npm or yarn. Then, create a Firebase project, copy your app's configuration, and initialize Firebase in your React app using initializeApp from the Firebase SDK.

Syntax

Here is the basic syntax to add Firebase to your React app:

• npm install firebase - installs Firebase SDK.
• Import initializeApp from Firebase.
• Create a firebaseConfig object with your project settings.
• Call initializeApp(firebaseConfig) to initialize Firebase.

javascript

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);

Example

This example shows a simple React app initializing Firebase and displaying a message when Firebase is ready.

javascript

import React from 'react';
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "AIzaSyD-example-key",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);

function App() {
  return (
    <div>
      <h1>Firebase Initialized</h1>
      <p>Your React app is connected to Firebase.</p>
    </div>
  );
}

export default App;

Output

<h1>Firebase Initialized</h1>
<p>Your React app is connected to Firebase.</p>

Common Pitfalls

Common mistakes when adding Firebase to React include:

• Not installing the firebase package before importing.
• Using incorrect or missing Firebase config values.
• Initializing Firebase multiple times in the app.
• Not protecting API keys (though Firebase keys are safe to expose).

javascript

/* Wrong: Missing firebase package installation */
import { initializeApp } from 'firebase/app'; // This will fail if not installed

/* Wrong: Empty config object */
const firebaseConfig = {};
const app = initializeApp(firebaseConfig); // This will cause errors

/* Right: Proper config and single initialization */
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};
const app = initializeApp(firebaseConfig);

Quick Reference

Remember these quick tips when adding Firebase to React:

• Always run npm install firebase first.
• Get your config from Firebase Console under project settings.
• Initialize Firebase once in a separate file or at app start.
• Use Firebase services by importing their SDK modules after initialization.

Key Takeaways

Install the Firebase SDK with npm before importing it in your React app.

Get your Firebase config from the Firebase Console and use it to initialize Firebase.

Initialize Firebase only once to avoid errors and conflicts.

Firebase API keys are safe to expose in client apps but keep your backend secure.

Use Firebase modules (auth, firestore, etc.) by importing them after initialization.