Gatsby Firebase Authentication Starter

This is a gatsby starter to show how an authentication workflow is implemented in Gatsby using Firebase as authentication provider.

🚀 Here a live demo of the site.

This starter follows the best practices described in the official gatsby site:

• Client-only Routes doc
• User Authentication tutorial

It uses Gatsby Plugin Firebase v0.2 to import and set firebase SDK, and Gatsby Plugin Create Client Path to set private routes.

How it works in short:

• Gatsby renders all unauthenticated routes as usual static pages.
• Authenticated routes are whitelisted as client-only (in this starter all dynamic pages are under the path 'mysite.com/app/*').
• Logged-out users are redirected to the login page if they attempt to visit private routes.
• Logged-in users will see their private content.

Getting started with Firebase

Copy and rename .env.sample to .env.development and .env.production in your root directory. Use these environment variables for Firebase:

GATSBY_FIREBASE_API_KEY=<YOUR_FIREBASE_API_KEY>
GATSBY_FIREBASE_AUTH_DOMAIN=<YOUR_FIREBASE_AUTH_DOMAIN>
GATSBY_FIREBASE_DATABASE_URL=<YOUR_FIREBASE_DATABASE_URL>
GATSBY_FIREBASE_PROJECT_ID=<YOUR_FIREBASE_PROJECT_ID>
GATSBY_FIREBASE_STORAGE_BUCKET=<YOUR_FIREBASE_STORAGE_BUCKET>
GATSBY_FIREBASE_MESSAGING_SENDER_ID=<YOUR_FIREBASE_MESSAGING_SENDER_ID>
GATSBY_FIREBASE_APP_ID=<YOUR_FIREBASE_APP_ID>

• Get your Firebase environment variables by creating a Firebase project
• More information about how Firebase works in a website
• Features of Firebase authentication
• Note that environment variables that need to be available in the browser have to be prefixed with GATSBY_

Start developing

npm install
gatsby develop 

Contributing

If you want to contribute to this starter, consider:

• Reporting bugs and errors
• Improve the documentation
• Creating new features and pull requests

All contributions are welcome!