Gatsby Firebase Authentication Starter
This is a gatsby starter to show how an authentication workflow is implemented in Gatsby using Firebase as authentication provider.
This starter follows the best practices described in the official gatsby site:
- Client-only Routes doc
- User Authentication tutorial
It uses Gatsby Plugin Firebase 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
Create the .env.development and .env.production file in your root directory:
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>
GATSBY_FIREBASE_MEASUREMENT_ID=<YOUR_FIREBASE_ANALYTICS_TRACKING_ID>
and then:
npm install
gatsby develop