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 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.
Copy and rename .env.sample to .env.development and .env.production in your root directory. Use these environment variables for Firebase:
FIREBASE_API_KEY=<YOUR_FIREBASE_API_KEY>
FIREBASE_AUTH_DOMAIN=<YOUR_FIREBASE_AUTH_DOMAIN>
FIREBASE_DATABASE_URL=<YOUR_FIREBASE_DATABASE_URL>
FIREBASE_PROJECT_ID=<YOUR_FIREBASE_PROJECT_ID>
FIREBASE_STORAGE_BUCKET=<YOUR_FIREBASE_STORAGE_BUCKET>
FIREBASE_MESSAGING_SENDER_ID=<YOUR_FIREBASE_MESSAGING_SENDER_ID>
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_
npm install
gatsby develop
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!