diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..5282678
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: rwieruch
+patreon: # rwieruch
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with a single custom sponsorship URL
diff --git a/.travis.yml b/.travis.yml
index 1968f21..1d8352c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,10 +1,10 @@
 language: node_js
 
 node_js:
-  - stable
+  - '10'
 
 install:
   - npm install
 
 script:
-  - npm test
\ No newline at end of file
+  - npm test
diff --git a/README.md b/README.md
index fa729e9..2ea9f3b 100644
--- a/README.md
+++ b/README.md
@@ -6,16 +6,20 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire
 
 * Powered by [Gatsby](https://github.com/gatsbyjs/gatsby)
 * [Tutorial](https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/)
-* [Live Version of half of the Tutorial](https://react-firebase-authentication.wieruch.com/)
+
+## Variations
+
+* [Only React Version](https://github.com/the-road-to-react-with-firebase/react-firebase-authentication)
+* [Redux Version](https://github.com/the-road-to-react-with-firebase/react-redux-firebase-authentication)
+* [MobX Version](https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication)
+* [Firestore Version](https://github.com/the-road-to-react-with-firebase/react-firestore-authentication)
+* [Semantic UI Version](https://github.com/the-road-to-react-with-firebase/react-semantic-ui-firebase-authentication)
 
 ## Features
 
 * uses:
-  * only React (Gatsby.js)
-  * firebase 5
-  * no Redux/MobX
-    * [Redux Version without Gatsby.js](https://github.com/the-road-to-react-with-firebase/react-redux-firebase-authentication)
-    * [MobX Version without Gatsby.js](https://github.com/the-road-to-react-with-firebase/react-mobx-firebase-authentication)
+  * only React (**Gatsby.js**)
+  * firebase
 * features:
   * Sign In
   * Sign Up
@@ -30,26 +34,116 @@ Your minimal yet extensive authentication starter project in Gatsby.js with Fire
   * Auth Persistence with Local Storage
   * Database with Users and Messages
 
-## Setup
+## 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:
+
+* [1 Developer](https://gum.co/react-with-firebase-starter-pack-developer)
+* [Team of up to 8 Developers](https://gum.co/react-with-firebase-starter-pack-team)
+* [Unlimited Developers of an Organization](https://gum.co/react-with-firebase-starter-pack-organization)
+
+It grants you also access to the other starter projects in this GitHub organization.
+
+### Open source license
 
-* `git clone git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git`
+If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use this starter project under the terms of the GPLv3.
+
+## Installation
+
+* `git clone https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git`
 * `cd react-gatsby-firebase-authentication`
-* `yarn install`
-* `gatsby develop`
-* visit http://localhost:8000/
-* Use your own Firebase Credentials
+* `npm install`
+* save the [Firebase credentials](#firebase-configuration)
+* setup the [security rules](#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](https://www.robinwieruch.de/firebase-tutorial/).
+
+### Firebase Configuration
+
+* 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
+```
+
+### Activate Sign-In Methods
+
+![firebase-enable-google-social-login_640](https://user-images.githubusercontent.com/2479967/49687774-e0a31e80-fb42-11e8-9d8a-4b4c794134e6.jpg)
+
+* Email/Password
+* [Google](https://www.robinwieruch.de/react-firebase-social-login/)
+* [Facebook](https://www.robinwieruch.de/firebase-facebook-login/)
+* [Twitter](https://www.robinwieruch.de/firebase-twitter-login/)
+* [Troubleshoot](https://www.robinwieruch.de/react-firebase-social-login/)
+
+### Activate Verification E-Mail
+
+* 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
+```
+
+### Security Rules
 
-### Use your own Firebase Credentials
+In the Firebase console, go to Database, select "Realtime Database" -> Rules, and paste the rules below:
 
-* visit https://firebase.google.com/ and create a Firebase App
-* copy and paste your Credentials from your Firebase App into src/firebase/firebase.js
-* activate Email/Password Sign-In Method in your Firebase App
+```
+{
+  "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
 
-* `gatsby new react-gatsby-firebase-authentication git@github.com:the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git`
+* `gatsby new react-gatsby-firebase-authentication https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication.git`
 * `cd react-gatsby-firebase-authentication`
-* `yarn install`
+* `npm install`
 * `gatsby develop`
-* visit http://localhost:8000/
-* Use your own Firebase Credentials
+* visit http://localhost:8000
diff --git a/gatsby-config.js b/gatsby-config.js
new file mode 100644
index 0000000..6990517
--- /dev/null
+++ b/gatsby-config.js
@@ -0,0 +1,3 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
diff --git a/package.json b/package.json
index e383d13..cfa8979 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,11 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "firebase": "^5.6.0",
-    "gatsby": "^2.0.33",
-    "react": "^16.5.1",
-    "react-dom": "^16.5.1",
-    "recompose": "^0.30.0"
+    "firebase": "^6.0.2",
+    "gatsby": "^2.4.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "recompose": "^0.30.0",
+    "core-js": "^2.6.5"
   }
 }
diff --git a/src/components/Firebase/firebase.js b/src/components/Firebase/firebase.js
index 872d6d9..c9affba 100644
--- a/src/components/Firebase/firebase.js
+++ b/src/components/Firebase/firebase.js
@@ -1,10 +1,10 @@
 const config = {
-  apiKey: process.env.REACT_APP_API_KEY,
-  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
-  databaseURL: process.env.REACT_APP_DATABASE_URL,
-  projectId: process.env.REACT_APP_PROJECT_ID,
-  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
-  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
+  apiKey: process.env.GATSBY_API_KEY,
+  authDomain: process.env.GATSBY_AUTH_DOMAIN,
+  databaseURL: process.env.GATSBY_DATABASE_URL,
+  projectId: process.env.GATSBY_PROJECT_ID,
+  storageBucket: process.env.GATSBY_STORAGE_BUCKET,
+  messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID,
 };
 
 class Firebase {
@@ -51,7 +51,7 @@ class Firebase {
 
   doSendEmailVerification = () =>
     this.auth.currentUser.sendEmailVerification({
-      url: process.env.REACT_APP_CONFIRMATION_EMAIL_REDIRECT,
+      url: process.env.GATSBY_CONFIRMATION_EMAIL_REDIRECT,
     });
 
   doPasswordUpdate = password =>
@@ -69,7 +69,7 @@ class Firebase {
 
             // default empty roles
             if (!dbUser.roles) {
-              dbUser.roles = [];
+              dbUser.roles = {};
             }
 
             // merge auth and db user
diff --git a/src/components/Messages/MessageItem.js b/src/components/Messages/MessageItem.js
index 78a9bb2..b92f954 100644
--- a/src/components/Messages/MessageItem.js
+++ b/src/components/Messages/MessageItem.js
@@ -28,7 +28,7 @@ class MessageItem extends Component {
   };
 
   render() {
-    const { message, onRemoveMessage } = this.props;
+    const { authUser, message, onRemoveMessage } = this.props;
     const { editMode, editText } = this.state;
 
     return (
@@ -41,29 +41,31 @@ class MessageItem extends Component {
           />
         ) : (
           <span>
-            <strong>
-              {message.user.username || message.user.userId}
-            </strong>{' '}
-            {message.text} {message.editedAt && <span>(Edited)</span>}
+            <strong>{message.userId}</strong> {message.text}
+            {message.editedAt && <span>(Edited)</span>}
           </span>
         )}
 
-        {editMode ? (
+        {authUser.uid === message.userId && (
           <span>
-            <button onClick={this.onSaveEditText}>Save</button>
-            <button onClick={this.onToggleEditMode}>Reset</button>
-          </span>
-        ) : (
-          <button onClick={this.onToggleEditMode}>Edit</button>
-        )}
+            {editMode ? (
+              <span>
+                <button onClick={this.onSaveEditText}>Save</button>
+                <button onClick={this.onToggleEditMode}>Reset</button>
+              </span>
+            ) : (
+              <button onClick={this.onToggleEditMode}>Edit</button>
+            )}
 
-        {!editMode && (
-          <button
-            type="button"
-            onClick={() => onRemoveMessage(message.uid)}
-          >
-            Delete
-          </button>
+            {!editMode && (
+              <button
+                type="button"
+                onClick={() => onRemoveMessage(message.uid)}
+              >
+                Delete
+              </button>
+            )}
+          </span>
         )}
       </li>
     );
diff --git a/src/components/Messages/MessageList.js b/src/components/Messages/MessageList.js
index 4e0c49b..fb18585 100644
--- a/src/components/Messages/MessageList.js
+++ b/src/components/Messages/MessageList.js
@@ -3,6 +3,7 @@ import React from 'react';
 import MessageItem from './MessageItem';
 
 const MessageList = ({
+  authUser,
   messages,
   onEditMessage,
   onRemoveMessage,
@@ -10,6 +11,7 @@ const MessageList = ({
   <ul>
     {messages.map(message => (
       <MessageItem
+        authUser={authUser}
         key={message.uid}
         message={message}
         onEditMessage={onEditMessage}
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index 07db27e..68a6fbe 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -81,8 +81,10 @@ class Messages extends Component {
   };
 
   onEditMessage = (message, text) => {
+    const { uid, ...messageSnapshot } = message;
+
     this.props.firebase.message(message.uid).set({
-      ...message,
+      ...messageSnapshot,
       text,
       editedAt: this.props.firebase.serverValue.TIMESTAMP,
     });
@@ -100,30 +102,24 @@ class Messages extends Component {
   };
 
   render() {
-    const { users } = this.props;
     const { text, messages, loading } = this.state;
 
     return (
       <AuthUserContext.Consumer>
         {authUser => (
           <div>
-            {!loading &&
-              messages && (
-                <button type="button" onClick={this.onNextPage}>
-                  More
-                </button>
-              )}
+            {!loading && messages && (
+              <button type="button" onClick={this.onNextPage}>
+                More
+              </button>
+            )}
 
             {loading && <div>Loading ...</div>}
 
             {messages && (
               <MessageList
-                messages={messages.map(message => ({
-                  ...message,
-                  user: users
-                    ? users[message.userId]
-                    : { userId: message.userId },
-                }))}
+                authUser={authUser}
+                messages={messages}
                 onEditMessage={this.onEditMessage}
                 onRemoveMessage={this.onRemoveMessage}
               />
diff --git a/src/components/Navigation/index.js b/src/components/Navigation/index.js
index e63bc0f..d816ba7 100644
--- a/src/components/Navigation/index.js
+++ b/src/components/Navigation/index.js
@@ -29,7 +29,7 @@ const NavigationAuth = ({ authUser }) => (
     <li>
       <Link to={ROUTES.ACCOUNT}>Account</Link>
     </li>
-    {authUser.roles.includes(ROLES.ADMIN) && (
+    {!!authUser.roles[ROLES.ADMIN] && (
       <li>
         <Link to={ROUTES.ADMIN}>Admin</Link>
       </li>
diff --git a/src/components/PasswordForget/index.js b/src/components/PasswordForget/index.js
index e85c8b2..7512c3e 100644
--- a/src/components/PasswordForget/index.js
+++ b/src/components/PasswordForget/index.js
@@ -44,7 +44,7 @@ class PasswordForgetForm extends Component {
       <form onSubmit={this.onSubmit}>
         <input
           name="email"
-          value={this.state.email}
+          value={email}
           onChange={this.onChange}
           type="text"
           placeholder="Email Address"
diff --git a/src/components/Session/withAuthentication.js b/src/components/Session/withAuthentication.js
index f6a1830..fcc9aea 100644
--- a/src/components/Session/withAuthentication.js
+++ b/src/components/Session/withAuthentication.js
@@ -48,7 +48,7 @@ const withAuthentication = Component => {
     }
 
     componentWillUnmount() {
-      this.listener();
+      this.listener && this.listener();
     }
 
     render() {
diff --git a/src/components/Session/withAuthorization.js b/src/components/Session/withAuthorization.js
index 2ee8a2d..e8280ff 100644
--- a/src/components/Session/withAuthorization.js
+++ b/src/components/Session/withAuthorization.js
@@ -33,7 +33,7 @@ const withAuthorization = condition => Component => {
     }
 
     componentWillUnmount() {
-      this.listener();
+      this.listener && this.listener();
     }
 
     render() {
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
index 213a602..df8f528 100644
--- a/src/components/SignIn/index.js
+++ b/src/components/SignIn/index.js
@@ -93,7 +93,7 @@ class SignInGoogleBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.user.displayName,
           email: socialAuthUser.user.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
@@ -139,7 +139,7 @@ class SignInFacebookBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
@@ -185,7 +185,7 @@ class SignInTwitterBase extends Component {
         return this.props.firebase.user(socialAuthUser.user.uid).set({
           username: socialAuthUser.additionalUserInfo.profile.name,
           email: socialAuthUser.additionalUserInfo.profile.email,
-          roles: [],
+          roles: {},
         });
       })
       .then(() => {
diff --git a/src/components/SignUp/index.js b/src/components/SignUp/index.js
index 928d7f4..60f0b25 100644
--- a/src/components/SignUp/index.js
+++ b/src/components/SignUp/index.js
@@ -33,10 +33,10 @@ class SignUpFormBase extends Component {
 
   onSubmit = event => {
     const { username, email, passwordOne, isAdmin } = this.state;
-    const roles = [];
+    const roles = {};
 
     if (isAdmin) {
-      roles.push(ROLES.ADMIN);
+      roles[ROLES.ADMIN] = ROLES.ADMIN;
     }
 
     this.props.firebase
diff --git a/src/pages/admin.js b/src/pages/admin.js
index 7b5e2ca..94e177c 100644
--- a/src/pages/admin.js
+++ b/src/pages/admin.js
@@ -19,7 +19,7 @@ const AdminPageBase = () => (
 );
 
 const condition = authUser =>
-  authUser && authUser.roles.includes(ROLES.ADMIN);
+  authUser && !!authUser.roles[ROLES.ADMIN];
 
 const AdminPage = compose(
   withEmailVerification,
diff --git a/src/pages/home.js b/src/pages/home.js
index cf71914..7f134b9 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import { compose } from 'recompose';
 
 import Layout from '../components/layout';
@@ -6,60 +6,20 @@ import {
   withAuthorization,
   withEmailVerification,
 } from '../components/Session';
-import { withFirebase } from '../components/Firebase';
 import Messages from '../components/Messages';
 
-class HomePageBase extends Component {
-  _initFirebase = false;
+const HomePageBase = () => (
+  <div>
+    <h1>Home Page</h1>
+    <p>The Home Page is accessible by every signed in user.</p>
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      users: null,
-    };
-  }
-
-  firebaseInit = () => {
-    if (this.props.firebase && !this._initFirebase) {
-      this._initFirebase = true;
-
-      this.props.firebase.users().on('value', snapshot => {
-        this.setState({
-          users: snapshot.val(),
-        });
-      });
-    }
-  };
-
-  componentDidMount() {
-    this.firebaseInit();
-  }
-
-  componentDidUpdate() {
-    this.firebaseInit();
-  }
-
-  componentWillUnmount() {
-    this.props.firebase.users().off();
-  }
-
-  render() {
-    return (
-      <Fragment>
-        <h1>Home Page</h1>
-        <p>The Home Page is accessible by every signed in user.</p>
-
-        <Messages users={this.state.users} />
-      </Fragment>
-    );
-  }
-}
+    <Messages />
+  </div>
+);
 
 const condition = authUser => !!authUser;
 
 const HomePage = compose(
-  withFirebase,
   withEmailVerification,
   withAuthorization(condition),
 )(HomePageBase);