gatsby-plugin-firebase-app

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

Installation

Add the dependencies:

npm install firebase gatsby-plugin-firebase-app

or

yarn add firebase gatsby-plugin-firebase-app

Usage

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.

Hooks

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'

Example

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

License

MIT