Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


A Gatsby plugin that sets up your website for use with Firebase.


Add the dependencies:

npm install firebase gatsby-plugin-firebase-app


yarn add firebase gatsby-plugin-firebase-app


1. Including it in Gatsby config

Add gatsby-plugin-firebase-app as plugin in your gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-firebase-app` // <-- here

2. Shadowing it to configure Firebase

Add your Firebase configuration to src/gatsby-plugin-firebase-app/config.js:

// src/gatsby-plugin-firebase-app/config.js

// 1) Import any additional Firebase modules you need in your app
import 'firebase/auth' // for example
//import 'firebase/firestore' // etc.

// 2) Export your Firebase project configuration (from the online Firebase console) as default
const config = {
  apiKey: "<apiKey>"
  authDomain: "<authDomain>"
  databaseURL: "<databaseURL>"
  projectId: "<projectId>",
  storageBucket: "<storageBucket>",
  messagingSenderId: "<messagingSenderId>",
  appId: "<appId>",
  measurementId: "<measurementId>", // if present
export default config

Learn more about plugin shadowing in Gatsby.

3. Importing it in your code

Import firebase from gatsby-plugin-firebase-app (rather than from firebase/app) and treat it as possibly null.

// src/pages/example.jsx

// same as 'firebase/app' but possibly null
import firebase from 'gatsby-plugin-firebase-app'

// therefore call it like:
// firebase?.auth()

// etc.

See example section below for more.


With this plugin, you can take advantage of any hooks from firebase-react-hooks, except for useAuthState.

This plugin thus provides a drop-in replacement for useAuthState:

import { useAuthState } from 'gatsby-plugin-firebase-app'


If you’re having trouble using the plugin, check out this example.



© 2023 Gatsby, Inc.