Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Provides support for Firebase JS SDK 9

πŸ›  Installation

use npm:

npm install firebase gatsby-plugin-firebase-v9.0

or use yarn:

yarn add firebase gatsby-plugin-firebase-v9.0

πŸ“Œ Usage

Register gatsby plugin

In gatsby-config.js:

module.exports = {
  plugins: [

      resolve: "gatsby-plugin-firebase-v9.0",
      options: {
        credentials: {
          apiKey: "<YOUR_FIREBASE_API_KEY>",
          authDomain: "<YOUR_FIREBASE_AUTH_DOMAIN>",
          databaseURL: "<YOUR_FIREBASE_DATABASE_URL>",
          projectId: "<YOUR_FIREBASE_PROJECT_ID>",
          storageBucket: "<YOUR_FIREBASE_STORAGE_BUCKET>",
          messagingSenderId: "<YOUR_FIREBASE_MESSAGING_SENDER_ID>",
          appId: "<YOUR_FIREBASE_APP_ID>",
          measurementId: "<YOUR_FIREBASE_MEASUREMENT_ID>"

Use Firebase

Use Firebase like how you would use in a React project.

import React, { useEffect, useState } from 'react';
import app from 'gatsby-plugin-firebase-v9.0'
import { getDatabase, ref, onValue } from "firebase/database";

const Component = ({postID}) => { 
  const [dataVaule, setValue] = useState('');
  useEffect(() => {
      const database = getDatabase(app);
      const dataRef = ref(db, 'data/' + postID + '/dataValue');
      onValue(dataRef, (snapshot) => {
        const data = snapshot.val();
    }, [postID]);
  <div>{dataVaule ? dataVaule : ``}</div>

export default Component;

For more usages, please refer to the Firebase documentation.

πŸ“ License


Β© 2023 Gatsby, Inc.