the-road-to-react-with-firebase / react-gatsby-firebase-authentication

🐣🔥Starter Project / Boilerplate for Authentication with Firebase and plain React in Gatsby.js
https://www.robinwieruch.de
364 stars 75 forks source link
authentication authorization firebase firebase-auth firebase-authentication firebase-database firebase-db firebase-realtime-database gatsby gatsby-starter gatsbyjs protected-routes react reactjs

🐣 Gatsby Firebase Starter

Build Status Slack Greenkeeper badge

Your minimal yet extensive authentication starter project in Gatsby.js with Firebase and plain React.

Variations

Features

License

Commercial license

If you want to use this starter project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase an commercial license for different team sizes:

It grants you also access to the other starter projects in this GitHub organization.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this starter project under the terms of the GPLv3.

Installation

Get an overview of Firebase, how to create a project, what kind of features Firebase offers, and how to navigate through the Firebase project dashboard in this visual tutorial for Firebase.

Firebase Configuration

The .env or .env.development and .env.production files could look like the following then:

GATSBY_API_KEY=AIzaSyBtxZ3phPeXcsZsRTySIXa7n33NtQ
GATSBY_AUTH_DOMAIN=react-firebase-s2233d64f8.firebaseapp.com
GATSBY_DATABASE_URL=https://react-firebase-s2233d64f8.firebaseio.com
GATSBY_PROJECT_ID=react-firebase-s2233d64f8
GATSBY_STORAGE_BUCKET=react-firebase-s2233d64f8.appspot.com
GATSBY_MESSAGING_SENDER_ID=701928454501

Activate Sign-In Methods

firebase-enable-google-social-login_640

Activate Verification E-Mail

The .env or .env.development and .env.production files could look like the following then (excl. the Firebase configuration).

Development:

GATSBY_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000

Production:

GATSBY_CONFIRMATION_EMAIL_REDIRECT=https://mydomain.com

Security Rules

In the Firebase console, go to Database, select "Realtime Database" -> Rules, and paste the rules below:

{
  "rules": {
    ".read": false,
    ".write": false,
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])",
        ".write": "$uid === auth.uid || root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])"
      },
      ".read": "root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])",
      ".write": "root.child('users/'+auth.uid).child('roles').hasChildren(['ADMIN'])"
    },
    "messages": {
      ".indexOn": ["createdAt"],
      "$uid": {
        ".write": "data.exists() ? data.child('userId').val() === auth.uid : newData.child('userId').val() === auth.uid"
      },
      ".read": "auth != null",
      ".write": "auth != null",
    },
  }
}

Setup via Gatsby CLI