Merge pull request #3 from rwieruch/new-context

React 16.3: Using new Context API

Author: rwieruch

gatsby-config.js

@@ -2,5 +2,5 @@ module.exports = {
  siteMetadata: {
  title: `Gatsby Firebase Authentication`,
  },
- plugins: [`gatsby-plugin-react-helmet`],
+ plugins: [`gatsby-plugin-react-helmet`, `gatsby-plugin-react-next`],
 }

package-lock.json

@@ -4,11 +4,12 @@
  "version": "1.0.0",
  "author": "Robin Wieruch <wrobin@gmx.net>",
  "dependencies": {
- "firebase": "^4.8.0",
- "gatsby": "^1.9.127",
- "gatsby-link": "^1.6.30",
- "gatsby-plugin-react-helmet": "^1.0.8",
- "prop-types": "^15.6.0"
+ "firebase": "^5.0.4",
+ "gatsby": "^1.9.266",
+ "gatsby-link": "^1.6.44",
+ "gatsby-plugin-react-helmet": "^2.0.11",
+ "gatsby-plugin-react-next": "^1.0.11",
+ "react-helmet": "^5.2.0"
  },
  "keywords": [
  "gatsby"
@@ -22,6 +23,6 @@
  "test": "echo \"No test specified\" && exit 0"
  },
  "devDependencies": {
- "prettier": "^1.8.2"
+ "prettier": "^1.13.3"
  }
 }

package.json

@@ -1,21 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Link from 'gatsby-link';
 
+import AuthUserContext from '../Session/AuthUserContext';
 import SignOutButton from '../SignOut';
 import * as routes from '../../constants/routes';
 
-const Navigation = (props, { authUser }) =>
- <div>
- { authUser
-  ? <NavigationAuth />
-  : <NavigationNonAuth />
+const Navigation = () =>
+ <AuthUserContext.Consumer>
+ {authUser => authUser
+ ? <NavigationAuth />
+ : <NavigationNonAuth />
  }
- </div>
-
-Navigation.contextTypes = {
- authUser: PropTypes.object,
-};
+ </AuthUserContext.Consumer>
 
 const NavigationAuth = () =>
  <ul>

src/components/Navigation/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const AuthUserContext = React.createContext(null);
+
+export default AuthUserContext;

src/components/Session/AuthUserContext.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import AuthUserContext from './AuthUserContext';
 import { firebase } from '../../firebase';
 
-const withAuthentication = (Component) => {
+const withAuthentication = (Component) =>
  class WithAuthentication extends React.Component {
  constructor(props) {
  super(props);
@@ -13,12 +13,6 @@ const withAuthentication = (Component) => {
  };
  }
 
- getChildContext() {
- return {
- authUser: this.state.authUser,
- };
- }
-
  componentDidMount() {
  firebase.auth.onAuthStateChanged(authUser => {
  authUser
@@ -28,17 +22,14 @@ const withAuthentication = (Component) => {
  }
 
  render() {
+ const { authUser } = this.state;
+
  return (
- <Component { ...this.props } />
+ <AuthUserContext.Provider value={authUser}>
+ <Component { ...this.props } />
+ </AuthUserContext.Provider>
  );
  }
  }
 
- WithAuthentication.childContextTypes = {
- authUser: PropTypes.object,
- };
-
- return WithAuthentication;
-}
-
 export default withAuthentication;

src/components/Session/withAuthentication.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
+import AuthUserContext from '../Session/AuthUserContext';
 import { firebase } from '../../firebase';
 import * as routes from '../../constants/routes';
 
@@ -16,14 +16,14 @@ const withAuthorization = (condition) => (Component) => {
  }
 
  render() {
- return this.context.authUser ? <Component { ...this.props } /> : null;
+ return (
+ <AuthUserContext.Consumer>
+ {authUser => authUser ? <Component { ...this.props } /> : null}
+ </AuthUserContext.Consumer>
+ );
  }
  }
 
- WithAuthorization.contextTypes = {
- authUser: PropTypes.object,
- };
-
  return withRouter(WithAuthorization);
 }
 

src/components/Session/withAuthorization.js

@@ -41,7 +41,7 @@ class SignUpForm extends Component {
  .then(authUser => {
 
  // Create a user in your own accessible Firebase Database too
- db.doCreateUser(authUser.uid, username, email)
+ db.doCreateUser(authUser.user.uid, username, email)
  .then(() => {
  this.setState(() => ({ ...INITIAL_STATE }));
  history.push(routes.HOME);

src/components/SignUp/index.js

@@ -1,4 +1,6 @@
-import * as firebase from 'firebase';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import 'firebase/database';
 
 const prodConfig = {
  apiKey: YOUR_API_KEY,

src/firebase/firebase.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 
 import Navigation from '../components/Navigation';
@@ -24,10 +23,6 @@ const TemplateWrapper = ({ children }) => (
  {children()}
  </div>
  </div>
-)
-
-TemplateWrapper.propTypes = {
- children: PropTypes.func,
-}
+);
 
 export default withAuthentication(TemplateWrapper)