Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcomelilli/gatsby-firebase-simple-auth
Gatsby Starter with Firebase simple auth workflow and private routes
https://github.com/marcomelilli/gatsby-firebase-simple-auth
firebase firebase-auth gatsby gatsby-firebase gatsby-starter
Last synced: about 2 months ago
JSON representation
Gatsby Starter with Firebase simple auth workflow and private routes
- Host: GitHub
- URL: https://github.com/marcomelilli/gatsby-firebase-simple-auth
- Owner: marcomelilli
- License: mit
- Created: 2019-12-01T09:58:23.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-28T09:32:41.000Z (10 months ago)
- Last Synced: 2024-11-01T07:33:23.008Z (about 2 months ago)
- Topics: firebase, firebase-auth, gatsby, gatsby-firebase, gatsby-starter
- Language: JavaScript
- Homepage: https://gatsby-firebase-simple-auth.netlify.com/
- Size: 4.51 MB
- Stars: 63
- Watchers: 7
- Forks: 18
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gatsby Firebase Authentication Starter
This is a gatsby starter to show how an **authentication workflow** is implemented in Gatsby using [Firebase](https://firebase.google.com/) as authentication provider.
This starter follows the best practices described in the official gatsby site:
* [Client-only Routes](https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/) doc
* [User Authentication](https://www.gatsbyjs.org/tutorial/authentication-tutorial/) tutorial
It uses [Gatsby Plugin Create Client Path](https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths) 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:
```
FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
```
- Get your Firebase environment variables by [creating a Firebase project](https://firebase.google.com/docs/web/setup)
- More information about [how Firebase works in a website](https://firebase.google.com/docs/projects/learn-more)
- Features of [Firebase authentication](https://firebase.google.com/docs/auth)
- Note that environment variables that need to be available in the browser [have to be prefixed](https://www.gatsbyjs.com/docs/environment-variables/#client-side-javascript) 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!