Out of the box, with some basic configuration setup, you can easily connect this starter with a Firebase/Firestore back end. Included are a login page, registration page, and a user account page. This starter provides a robust user registration and security strategy for creating personalized web applicatons for many use cases. 🤼♂️
https://zealous-tereshkova-ed6818.netlify.app/
- Login and Registration using Email and Google OAuth
- Account Profile
- Custom Profile Avatar Image stored in Google Storage
- Default Avatar customized per user
- Expandable account profile records stored in Firestore
- Responsive design
- Password Recovery for Email Logins
- Supports connecting to multiple projects based on environments (dev, prod)
- Dark Theme
- Snapshot Tests
- Role Based Authorization
-
Register for Firebase and create a project
Once the project is created. You need to set up the following components of Firebase-
Authentication - enable Email/Password and Google
-
Cloud Firestore - Set proper permissions for writing to the database
-
Storage
To view the profile pictures in Storage publically, you will need to modify your Rules to the following:rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read: if true; allow write: if request.auth != null; } } }
-
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying the default starter.
# create a new Gatsby site using the default starter gatsby new my-fire-pro-starter https://github.com/willcode4food/gatsby-fire-pro-starter
-
Update Environment Configuration set the following environment variables
ENV=development PROJECTID=<Firebase Project ID> APIKEY=<Web API Key> AUTHDOMAIN=<Firebase Project ID>.firebaseapp.com DATABASEURL=https://<Firebase Project ID>.firebaseio.com STORAGEBUCKET=<Firebase Project ID>.appspot.com STORAGEBUCKET_URL=https://firebasestorage .googleapiscom/v0/b/<Firebase Project ID>.appspot.com/o
-
Start developing.
Navigate into your new site’s directory and start it up.
cd my-fire-pro-starter/ gatsby develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000
!Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.Open the
my-default-starter
directory in your code editor of choice and editsrc/pages/index.js
. Save your changes and the browser will update in real time!
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.