Gatsby Firebase Starter

Gatsby Firebase Starter is a boilerplate project that gives Gatsby.js developers a pre-configured starting point for Firebase Authentication and Firestore-backed dynamic pages.

What is Gatsby Firebase Starter?

Gatsby Firebase Starter is a starter repository that combines Gatsby.js with Firebase services. It accepts a Firebase project configuration, which you paste into firebaseConfig.js, and produces a static site with dynamic pages generated from Firestore collections at build time. The starter also includes a complete authentication system covering sign-in, sign-up, sign-out, password reset, email verification, and social logins. It is authored by Ovidiu-Mihai Belciug and is available on GitHub under the repository name ovidiumihaibelciug/gatsby-firebase-starter.

Key Features

• Dynamic pages from Firestore — Define routes in templates.js, specifying a URL path, a Firestore collection, a URL parameter, and the context fields to fetch; the starter generates pages for every document at build time.
• Complete Firebase authentication — Includes sign-in, sign-up, sign-out, password forget, password change, and email verification flows out of the box.
• Social logins — Supports authentication with Google, Facebook, and Twitter, plus linking those social logins to an existing account from an Account dashboard.
• Protected routes with authorization — Guards pages so only authenticated users with the right permissions can access them.
• PWA support — Ships with progressive web app configuration so the site can be installed and work offline.
• SEO and meta management — Includes React Helmet integration for editing page meta tags, plus SEO-ready structure.
• Database schema examples — Provides Users and Posts collections as reference data models for Firestore.
• Deploy to Netlify — Includes a one-click deploy button that connects the GitHub repository to a new Netlify site.

Who is it for?

• React developers who want a Gatsby project with authentication already wired up, instead of writing Firebase Auth logic from scratch.
• Startup founders building an MVP that needs member sign-ups and content stored in Firestore, such as a blog or a simple SaaS app.
• Firebase users who want a reference implementation showing how to generate static pages from Firestore data at build time with Gatsby.

What can you do with it?

• Create a members-only blog: Publish posts in a Firestore collection and have Gatsby generate a static page for each post at build time, with gated content for logged-in users.
• Build a social-login prototype: Add Google, Facebook, or Twitter authentication to a Gatsby site in a few minutes, including account linking and auth persistence.
• Set up a dashboard starter: Use the protected-route and user-database examples to scaffold an app where each user sees their own data, stored in Firestore under their account.

How does it work?

1. Create a new Gatsby site by running gatsby new my-firebase-starter ovidiumihaibelciug/gatsby-firebase-starter.
2. Replace the placeholder configuration in firebaseConfig.js with settings from your Firebase console.
3. Start the development server with gatsby develop, which runs at http://localhost:8000 and includes GraphiQL at /___graphql for querying data.
4. Open templates.js to map URL paths to Firestore collections, selecting the fields to query and the template file that renders them.
5. Deploy by connecting the repository to Netlify using the provided deploy button.

FAQ

Is Gatsby Firebase Starter free to use?

Yes. The starter is a public GitHub repository, so you can clone it, create new projects from it with the Gatsby CLI, and deploy it anywhere Gatsby sites run. The associated Firebase services have their own free tiers; the starter itself has no license fees.

What does templates.js do?

templates.js is the configuration file that turns Firestore collections into static pages. In it you define an array of routes, each with a URL path, a collection name, a URL parameter, the context fields to retrieve, and the filename of the template component used to render the page. This is how the starter generates a page for every document in the collection at build time.

Do I need Firebase knowledge to use this starter?

Basic familiarity with the Firebase console helps, because you need to create a project and paste its configuration into firebaseConfig.js. The starter handles the rest: authentication methods are implemented, and the Users and Posts collections give you example data structures to copy.

Can I use this starter without Netlify?

Yes. The Netlify deploy button is one option, but the starter is a standard Gatsby project. You can deploy it to any static hosting service that supports Gatsby, such as Vercel, Cloudflare Pages, or Amazon S3, by building the site and uploading the generated public folder.

What styling approach does the starter use?

The starter uses SCSS for styling, with components organized using the Atomic Design methodology. The source folder contains atoms, molecules, and scene layers under src/components, so component styles are modular and reusable.