Production Version

.prettierrc

@@ -0,0 +1,6 @@
+{
+ "semi": true,
+ "trailingComma": "all",
+ "singleQuote": true,
+ "printWidth": 70,
+}

package.json

@@ -2,13 +2,13 @@
  "name": "gatsby-firebase-authentication",
  "description": "Gatsby Firebase Authentication",
  "version": "1.0.0",
- "author": "Robin Wieruch <wrobin@gmx.net>",
+ "author": "Robin Wieruch <hello@rwieruch.com>",
  "dependencies": {
- "firebase": "^5.0.4",
- "gatsby": "next",
- "gatsby-plugin-react-helmet": "next",
- "react": "^16.4.1",
- "react-dom": "^16.4.1",
+ "firebase": "^5.5.2",
+ "gatsby": "^2.0.12",
+ "gatsby-plugin-react-helmet": "^3.0.0",
+ "react": "^16.5.2",
+ "react-dom": "^16.5.2",
  "react-helmet": "^5.2.0"
  },
  "keywords": [
@@ -23,6 +23,6 @@
  "test": "echo \"No test specified\" && exit 0"
  },
  "devDependencies": {
- "prettier": "^1.13.3"
+ "prettier": "^1.14.3"
  }
 }

src/components/Firebase/FirebaseContext.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const FirebaseContext = React.createContext(null);
+
+export const withFirebase = Component => props => (
+ <FirebaseContext.Consumer>
+ {firebase => <Component {...props} firebase={firebase} />}
+ </FirebaseContext.Consumer>
+);
+
+export default FirebaseContext;

src/components/Firebase/index.js

@@ -0,0 +1,68 @@
+const prodConfig = {
+ apiKey: YOUR_API_KEY,
+ authDomain: YOUR_AUTH_DOMAIN,
+ databaseURL: YOUR_DATABASE_URL,
+ projectId: YOUR_PROJECT_ID,
+ storageBucket: '',
+ messagingSenderId: YOUR_MESSAGING_SENDER_ID,
+};
+
+const devConfig = {
+ apiKey: YOUR_API_KEY,
+ authDomain: YOUR_AUTH_DOMAIN,
+ databaseURL: YOUR_DATABASE_URL,
+ projectId: YOUR_PROJECT_ID,
+ storageBucket: '',
+ messagingSenderId: YOUR_MESSAGING_SENDER_ID,
+};
+
+const config =
+ process.env.NODE_ENV === 'production' ? prodConfig : devConfig;
+
+class Firebase {
+ constructor(app) {
+ app.initializeApp(config);
+
+ this.db = app.database();
+ this.auth = app.auth();
+ }
+
+ // *** Auth API ***
+
+ doCreateUserWithEmailAndPassword = (email, password) =>
+ this.auth.createUserWithEmailAndPassword(email, password);
+
+ doSignInWithEmailAndPassword = (email, password) =>
+ this.auth.signInWithEmailAndPassword(email, password);
+
+ doSignOut = () => this.auth.signOut();
+
+ doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
+
+ doPasswordUpdate = password =>
+ this.auth.currentUser.updatePassword(password);
+
+ // *** User API ***
+
+ doCreateUser = (id, username, email) =>
+ this.db.ref(`users/${id}`).set({
+ username,
+ email,
+ });
+
+ onceGetUsers = () => this.db.ref('users').once('value');
+}
+
+let firebase;
+
+function getFirebase(app, auth, database) {
+ if (firebase) {
+ return firebase;
+ }
+
+ firebase = new Firebase(app, auth, database);
+
+ return firebase;
+}
+
+export default getFirebase;

src/components/Navigation/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
+import * as routes from '../../constants/routes';
 import AuthUserContext from '../Session/AuthUserContext';
 import SignOutButton from '../SignOut';
-import * as routes from '../../constants/routes';
 
 const Navigation = () => (
  <AuthUserContext.Consumer>
- {authUser => (authUser ? <NavigationAuth /> : <NavigationNonAuth />)}
+ {authUser =>
+ authUser ? <NavigationAuth /> : <NavigationNonAuth />
+ }
  </AuthUserContext.Consumer>
 );
 

src/components/PasswordChange/index.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 
-import { auth } from '../../firebase';
-
-const updateByPropertyName = (propertyName, value) => () => ({
- [propertyName]: value,
-});
+import { withFirebase } from '../Firebase/FirebaseContext';
 
 const INITIAL_STATE = {
  passwordOne: '',
@@ -22,13 +18,13 @@ class PasswordChangeForm extends Component {
  onSubmit = event => {
  const { passwordOne } = this.state;
 
- auth
+ this.props.firebase
  .doPasswordUpdate(passwordOne)
  .then(() => {
  this.setState(() => ({ ...INITIAL_STATE }));
  })
  .catch(error => {
- this.setState(updateByPropertyName('error', error));
+ this.setState({ error });
  });
 
  event.preventDefault();
@@ -37,26 +33,25 @@ class PasswordChangeForm extends Component {
  render() {
  const { passwordOne, passwordTwo, error } = this.state;
 
- const isInvalid = passwordOne !== passwordTwo || passwordOne === '';
+ const isInvalid =
+ passwordOne !== passwordTwo || passwordOne === '';
 
  return (
  <form onSubmit={this.onSubmit}>
  <input
+ name="passwordOne"
  value={passwordOne}
  onChange={event =>
- this.setState(
- updateByPropertyName('passwordOne', event.target.value)
- )
+ this.setState({ [event.target.name]: event.target.value })
  }
  type="password"
  placeholder="New Password"
  />
  <input
+ name="passwordTwo"
  value={passwordTwo}
  onChange={event =>
- this.setState(
- updateByPropertyName('passwordTwo', event.target.value)
- )
+ this.setState({ [event.target.name]: event.target.value })
  }
  type="password"
  placeholder="Confirm New Password"
@@ -71,4 +66,4 @@ class PasswordChangeForm extends Component {
  }
 }
 
-export default PasswordChangeForm;
+export default withFirebase(PasswordChangeForm);

src/components/PasswordForget/index.js

@@ -1,12 +1,8 @@
 import React, { Component } from 'react';
 import { Link } from 'gatsby';
 
-import { auth } from '../../firebase';
 import * as routes from '../../constants/routes';
-
-const updateByPropertyName = (propertyName, value) => () => ({
- [propertyName]: value,
-});
+import { withFirebase } from '../Firebase/FirebaseContext';
 
 const INITIAL_STATE = {
  email: '',
@@ -23,13 +19,13 @@ class PasswordForgetForm extends Component {
  onSubmit = event => {
  const { email } = this.state;
 
- auth
+ this.props.firebase
  .doPasswordReset(email)
  .then(() => {
  this.setState(() => ({ ...INITIAL_STATE }));
  })
  .catch(error => {
- this.setState(updateByPropertyName('error', error));
+ this.setState({ error });
  });
 
  event.preventDefault();
@@ -43,9 +39,10 @@ class PasswordForgetForm extends Component {
  return (
  <form onSubmit={this.onSubmit}>
  <input
+ name="email"
  value={this.state.email}
  onChange={event =>
- this.setState(updateByPropertyName('email', event.target.value))
+ this.setState({ [event.target.name]: event.target.value })
  }
  type="text"
  placeholder="Email Address"
@@ -66,4 +63,6 @@ const PasswordForgetLink = () => (
  </p>
 );
 
-export { PasswordForgetForm, PasswordForgetLink };
+export { PasswordForgetLink };
+
+export default withFirebase(PasswordForgetForm);

src/components/Session/withAuthentication.js

@@ -1,26 +1,38 @@
 import React from 'react';
 
 import AuthUserContext from './AuthUserContext';
-import { firebase } from '../../firebase';
+import { withFirebase } from '../Firebase/FirebaseContext';
 
-const withAuthentication = Component =>
+const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
  constructor(props) {
  super(props);
 
  this.state = {
+ initFirebase: false,
  authUser: null,
  };
  }
 
- componentDidMount() {
- if (typeof window !== 'undefined') {
- firebase.auth.onAuthStateChanged(authUser => {
+ firebaseInit = () => {
+ if (this.props.firebase && !this.state.initFirebase) {
+ this.props.firebase.auth.onAuthStateChanged(authUser => {
  authUser
- ? this.setState(() => ({ authUser }))
- : this.setState(() => ({ authUser: null }));
+ ? this.setState(() => ({ authUser, initFirebase: true }))
+ : this.setState(() => ({
+ authUser: null,
+ initFirebase: true,
+ }));
  });
  }
+ };
+
+ componentDidMount() {
+ this.firebaseInit();
+ }
+
+ componentDidUpdate() {
+ this.firebaseInit();
  }
 
  render() {
@@ -32,6 +44,9 @@ const withAuthentication = Component =>
  </AuthUserContext.Provider>
  );
  }
- };
+ }
+
+ return withFirebase(WithAuthentication);
+};
 
 export default withAuthentication;