Your minimal yet extensive authentication starter project in Gatsby.js with Firebase and plain React.
- uses:
- only React (Gatsby.js)
- firebase
- features:
- Sign In
- Sign Up
- Sign Out
- Password Forget
- Password Change
- Verification Email
- Protected Routes with Authorization
- Roles-based Authorization
- Social Logins with Google, Facebook and Twitter
- Linking of Social Logins on Account dashboard
- Auth Persistence with Local Storage
- Database with Users and Messages
It grants you also access to the other starter projects in this GitHub organization.
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.
git clone https://github.com/followDev/gatsby-firebase-authentication.git
cd react-gatsby-firebase-authentication
npm install
- save the Firebase credentials
- setup the security rules
npm start
- visit http://localhost:8000
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.
- copy/paste your configuration from your Firebase project's dashboard into one of these files
- src/components/Firebase/firebase.js file
- .env file
- .env.development and .env.production files
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
- add a redirect URL for redirecting a user after an email verification into one of these files
- src/components/Firebase/firebase.js file
- .env file
- .env.development and .env.production files
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
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",
},
}
}
gatsby new react-gatsby-firebase-authentication https://github.com/followDev/gatsby-firebase-authentication.git
cd react-gatsby-firebase-authentication
npm install
gatsby develop
- visit http://localhost:8000