Gatsby Firebase Authentication Starter

Gatsby Firebase Authentication Starter is a Gatsby starter that implements a complete authentication workflow with Firebase as the auth provider, including client-only private routes.

What is the Gatsby Firebase Authentication Starter?

The Gatsby Firebase Authentication Starter is a project template for Gatsby that demonstrates how to add Firebase authentication and private, client-only routes. It takes a Firebase project configuration (API key, auth domain, database URL, project ID, storage bucket, messaging sender ID, app ID) through environment variables, and produces a Gatsby site where unauthenticated visitors see static pages while logged-in users can access protected content under the /app/* path. The starter is shared as an open-source project on GitHub and follows the official Gatsby documentation for client-only routes and user authentication.

Key Features

• Client-only routes — uses gatsby-plugin-create-client-paths to serve all private routes under the mysite.com/app/* path client-side, so they are not pre-rendered as static HTML.
• Firebase authentication — integrates Firebase Auth as the authentication provider; configuration is supplied via environment variables in .env.development and .env.production.
• Redirect handling — logged-out users who attempt to visit private routes are automatically redirected to the login page, while logged-in users see their private content.
• Static and dynamic separation — unauthenticated routes are rendered as normal static Gatsby pages, and only the /app/* subtree is treated as dynamic client-only.
• Best-practice implementation — follows the official Gatsby site's client-only routes documentation and user authentication tutorial.
• Environment variable management — provides a .env.sample file to copy, and includes GATSBY_ prefix guidance for variables that need to be exposed in browser-side JavaScript.

Who is it for?

• Gatsby developers — need a working reference implementation of Firebase auth with private routes before building their own app.
• App builders — want a starting point for a SaaS dashboard or member area where content is protected behind a login.
• Teams learning Gatsby auth — can study how client-only routes and gatsby-plugin-create-client-paths combine to control access.

How does it work?

1. Copy .env.sample to .env.development and .env.production in the project root.
2. Fill in the Firebase values: API key, auth domain, database URL, project ID, storage bucket, messaging sender ID, and app ID.
3. Run npm install and gatsby develop.
4. Gatsby builds the site so that unauthenticated static pages render normally, while any request to /app/* is handled by the client-side router, which redirects logged-out users to the login page.

Use cases

• SaaS dashboards: spin up a private dashboard area protected by Firebase email/password or social logins.
• Member-only content: hide tutorial or premium content behind authentication, serving it only to logged-in users.
• Auth learning projects: use the starter as a minimal, commented reference for implementing Firebase auth in Gatsby.

FAQ

Is this starter free?

Yes, the source code is publicly available as a Gatsby starter on GitHub, and all contributions are welcome. There is no mention of a paid license in the repository.

What does this starter replace?

It replaces the work of manually setting up Firebase authentication, client-only routes, and redirect logic from scratch in a Gatsby project.

How do I set the Firebase environment variables?

Copy .env.sample to .env.development and .env.production, then fill in your Firebase project's API key, auth domain, database URL, project ID, storage bucket, messaging sender ID, and app ID. Variables that must be available in the browser need the GATSBY_ prefix.

Does it use the Gatsby Plugin Create Client Path?

Yes, the starter uses gatsby-plugin-create-client-paths to whitelist the private routes, and the private dynamic pages are located under the mysite.com/app/* path.

What happens when a logged-out user visits a private route?

They are redirected to the login page. When a logged-in user visits, the private content is shown.