How To Use Firebase Authentication With Gatsby

I want to share my journey of implementing Firebase Authentication on a Gatsby site. It’s so much more fun to use Firebase as an abstraction, versus writing all the authentication code from scratch.

For this journey, I choose to use email and password authentication. One of the great things about Firebase Authentication is there are many ways to authenticate your users. You can learn more here.

I have created a GitHub repository so you can follow along or use how you like.

Some assumptions I make are that you have Node and Gatsby CLI installed. You can learn about setting up your development environment here. I also assume you are familiar with Gatsby. Here are the docs if you're new to Gatsby. I also assume you understand React and the Context api.

Set Up A Firebase Project

First, we will head over to the Firebase console and get our project setup. You may need to set up an account if don’t have a google account already. What we will need is the web app to be added to the project so we can get the configuration object. Also, we need to set up email & password authentication and a Firestore database.

Here is a short video that shows the process. https://youtu.be/rJSAhovqXxY

Set Up A Gatsby Project

Whether you want to add to an existing Gatsby project or start for scratch is up to you. You could also use my repository as a starter if you like. Note for this project, I am using Firebase version 8.2.7 to make things simpler. If anyone would like to put in a pull request updating things to Firebase version 9, that would be super cool.

Connecting Gatsby To Firestore

To connect to Firestore, we are going to use the gatsby-firesource plugin.

To install run npm i gatsby-firesource

Before we configure the plugin in the gatsby-config.js file, we need to go back to our Firebase project and generate a new private key. This will download a JSON file. We will also use these key-value pairs to set up our environment variables.

Here is video showing the process.