Gatsby Firebase Starter is a boilerplate that adds complete Firebase authentication to a Gatsby.js site using only plain React, covering sign-up, sign-in, social logins, and role-based protected routes.
What is Gatsby Firebase Starter?
Gatsby Firebase Starter is a starter project / boilerplate by Robin Wieruch that wires Firebase authentication into a Gatsby.js site without Redux, MobX, or other state-management libraries. You provide Firebase project credentials, and the starter yields a working React app with email/password sign-in, sign-up, sign-out, password change, password forget, verification email, and an account dashboard. It runs on Gatsby.js and the Firebase Realtime Database, and is part of the Road to React with Firebase series.
Key Features
- Authentication flows — sign in, sign up, sign out, password forget, password change, and verification email are all pre-built with plain React.
- Role-based authorization — protected routes filter by user roles, and the included Firebase security rules give ADMIN users read/write access to all user data.
- Social logins — Google, Facebook, and Twitter sign-in are supported, and social logins can be linked to an existing account on the Account dashboard.
- Auth persistence — user sessions persist through local storage so a refresh keeps you signed in.
- Database — includes users and messages nodes in Firebase Realtime Database, plus
.indexOnrules for message timestamps. - Environment configuration — Firebase credentials can be stored in
.env,.env.development, or.env.productionfiles usingGATSBY_-prefixed variables, keeping secrets out of source code.
Who is it for?
This starter is for developers starting a Gatsby.js project that needs authentication without adopting a state-management library. It is also a learning resource for anyone following Robin Wieruch's Firebase authentication tutorial, and a foundation for building role-based admin areas or user-facing apps that require email verification.
What can you do with it?
- Gatsby developers: scaffold a new site with the Gatsby CLI using
gatsby new react-gatsby-firebase-authentication <repo-url>and have authentication working after adding Firebase credentials. - Tutorial readers: use the starter alongside the linked tutorial to see each authentication pattern implemented in plain React.
- Product builders: extend the included users and messages database nodes to build features like private messaging or role-restricted dashboards.
How does it work?
After cloning or running gatsby new, you install dependencies with npm install, copy your Firebase project's credentials into the .env files (or into src/components/Firebase/firebase.js), activate the sign-in methods you want in the Firebase console, and paste the provided Realtime Database security rules. Then npm start runs the Gatsby development server at http://localhost:8000. For production, set the GATSBY_CONFIRMATION_EMAIL_REDIRECT environment variable to your domain so email verification links point to the right URL.
Pricing
Gatsby Firebase Starter is dual-licensed. It is free to use under the GNU GPL v3 when building open source applications. For proprietary commercial projects, a paid commercial license is available through Gumroad in three tiers: 1 developer, a team of up to 8 developers, and unlimited developers in an organization. Purchasing a commercial license also grants access to the other starter projects in the same GitHub organization.
FAQ
Is Gatsby Firebase Starter free?
Yes, for open source projects. The starter is released under the GNU GPL v3 license, so you may use it freely in applications that are licensed under a compatible open source license. If your project is proprietary, you need a commercial license.
What Firebase services does it use?
The starter uses Firebase Authentication (email/password plus Google, Facebook, and Twitter) and Firebase Realtime Database. It includes example security rules that define how users and messages are read and written, with role-based ADMIN access.
How do I configure Firebase credentials?
Copy your Firebase project's web app configuration into the src/components/Firebase/firebase.js file or set the GATSBY_API_KEY, GATSBY_AUTH_DOMAIN, GATSBY_DATABASE_URL, GATSBY_PROJECT_ID, GATSBY_STORAGE_BUCKET, and GATSBY_MESSAGING_SENDER_ID environment variables in .env, .env.development, or .env.production.
Does it support social logins?
Yes. Google, Facebook, and Twitter login are included. You need to activate the sign-in methods in the Firebase console and handle any domain allowlists from the providers. The starter also lets users link or unlink social logins on the account dashboard.
