diff --git a/pages/_app.js b/pages/_app.js
new file mode 100644
index 0000000..7b0c9fa
--- /dev/null
+++ b/pages/_app.js
@@ -0,0 +1,29 @@
+import React from "react";
+import App, { Container } from "next/app";
+import { Provider } from "react-redux";
+import withRedux from "next-redux-wrapper";
+
+import initStore from "../src/store";
+
+class EnhancedApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    return {
+      pageProps: Component.getInitialProps
+        ? await Component.getInitialProps(ctx)
+        : {}
+    };
+  }
+
+  render() {
+    const { Component, pageProps, store } = this.props;
+    return (
+      <Container>
+        <Provider store={store}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    );
+  }
+}
+
+export default withRedux(initStore)(EnhancedApp);
diff --git a/pages/account.js b/pages/account.js
index c4f502c..079d28c 100644
--- a/pages/account.js
+++ b/pages/account.js
@@ -1,25 +1,20 @@
-import React from 'react';
-import withRedux from 'next-redux-wrapper';
-import { connect } from 'react-redux';
-import { compose } from 'recompose';
+import React from "react";
+import { connect } from "react-redux";
 
-import initStore from '../src/store';
-import { PasswordForgetForm } from './pw-forget';
-import { AppWithAuthorization } from '../src/components/App';
-import PasswordChangeForm from '../src/components/PasswordChange';
+import { PasswordForgetForm } from "./pw-forget";
+import { AppWithAuthorization } from "../src/components/App";
+import PasswordChangeForm from "../src/components/PasswordChange";
 
-const AccountPage = ({ authUser }) =>
+const AccountPage = ({ authUser }) => (
   <AppWithAuthorization>
     <h1>Account: {authUser.email}</h1>
     <PasswordForgetForm />
     <PasswordChangeForm />
   </AppWithAuthorization>
+);
 
-const mapStateToProps = (state) => ({
-  authUser: state.sessionState.authUser,
+const mapStateToProps = state => ({
+  authUser: state.sessionState.authUser
 });
 
-export default compose(
-  withRedux(initStore),
-  connect(mapStateToProps)
-)(AccountPage);
+export default connect(mapStateToProps)(AccountPage);
diff --git a/pages/home.js b/pages/home.js
index 7be6577..f21ba6f 100644
--- a/pages/home.js
+++ b/pages/home.js
@@ -1,13 +1,10 @@
-import React, { Component } from 'react';
-import withRedux from 'next-redux-wrapper';
-import { connect } from 'react-redux';
-import { compose } from 'recompose';
+import React, { Component } from "react";
+import { connect } from "react-redux";
 
-import initStore from '../src/store';
-import { AppWithAuthorization } from '../src/components/App';
-import { db } from '../src/firebase';
+import { AppWithAuthorization } from "../src/components/App";
+import { db } from "../src/firebase";
 
-const fromObjectToList = (object) =>
+const fromObjectToList = object =>
   object
     ? Object.keys(object).map(key => ({ ...object[key], index: key }))
     : [];
@@ -29,29 +26,30 @@ class HomePage extends Component {
         <h1>Home</h1>
         <p>The Home Page is accessible by every signed in user.</p>
 
-        { !!users.length && <UserList users={users} /> }
+        {!!users.length && <UserList users={users} />}
       </AppWithAuthorization>
     );
   }
 }
 
-const UserList = ({ users }) =>
+const UserList = ({ users }) => (
   <div>
     <h2>List of App User IDs (Saved on Sign Up in Firebase Database)</h2>
-    {users.map(user =>
+    {users.map(user => (
       <div key={user.index}>{user.index}</div>
-    )}
+    ))}
   </div>
+);
 
-const mapStateToProps = (state) => ({
-  users: state.userState.users,
+const mapStateToProps = state => ({
+  users: state.userState.users
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  onSetUsers: (users) => dispatch({ type: 'USERS_SET', users }),
+const mapDispatchToProps = dispatch => ({
+  onSetUsers: users => dispatch({ type: "USERS_SET", users })
 });
 
-export default compose(
-  withRedux(initStore),
-  connect(mapStateToProps, mapDispatchToProps)
-)(HomePage);
\ No newline at end of file
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(HomePage);
diff --git a/pages/index.js b/pages/index.js
index 86fbd5d..7c4b7aa 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,13 +1,14 @@
-import React from 'react';
-import withRedux from 'next-redux-wrapper';
+import React from "react";
 
-import initStore from '../src/store';
-import { AppWithAuthentication } from '../src/components/App';
+import { AppWithAuthentication } from "../src/components/App";
 
-const LandingPage = () =>
+const LandingPage = () => (
   <AppWithAuthentication>
     <h1>Landing</h1>
-    <p>The Landing Page is open to everyone, even though the user isn't signed in.</p>
+    <p>
+      The Landing Page is open to everyone, even though the user isn't signed
+      in.
+    </p>
   </AppWithAuthentication>
-
-export default withRedux(initStore)(LandingPage);
+);
+export default LandingPage;
diff --git a/pages/pw-forget.js b/pages/pw-forget.js
index b4202d9..b3fa269 100644
--- a/pages/pw-forget.js
+++ b/pages/pw-forget.js
@@ -1,25 +1,24 @@
-import React, { Component } from 'react';
-import Link from 'next/link';
-import withRedux from 'next-redux-wrapper';
+import React, { Component } from "react";
+import Link from "next/link";
 
-import initStore from '../src/store';
-import { AppWithAuthentication } from '../src/components/App';
-import * as routes from '../src/constants/routes';
-import { auth } from '../src/firebase';
+import { AppWithAuthentication } from "../src/components/App";
+import * as routes from "../src/constants/routes";
+import { auth } from "../src/firebase";
 
-const PasswordForgetPage = () =>
+const PasswordForgetPage = () => (
   <AppWithAuthentication>
     <h1>PasswordForget</h1>
     <PasswordForgetForm />
   </AppWithAuthentication>
+);
 
 const updateByPropertyName = (propertyName, value) => () => ({
-  [propertyName]: value,
+  [propertyName]: value
 });
 
 const INITIAL_STATE = {
-  email: '',
-  error: null,
+  email: "",
+  error: null
 };
 
 class PasswordForgetForm extends Component {
@@ -29,33 +28,33 @@ class PasswordForgetForm extends Component {
     this.state = { ...INITIAL_STATE };
   }
 
-  onSubmit = (event) => {
+  onSubmit = event => {
     const { email } = this.state;
 
-    auth.doPasswordReset(email)
+    auth
+      .doPasswordReset(email)
       .then(() => {
         this.setState(() => ({ ...INITIAL_STATE }));
       })
       .catch(error => {
-        this.setState(updateByPropertyName('error', error));
+        this.setState(updateByPropertyName("error", error));
       });
 
     event.preventDefault();
-  }
+  };
 
   render() {
-    const {
-      email,
-      error,
-    } = this.state;
+    const { email, error } = this.state;
 
-    const isInvalid = email === '';
+    const isInvalid = email === "";
 
     return (
       <form onSubmit={this.onSubmit}>
         <input
           value={this.state.email}
-          onChange={event => this.setState(updateByPropertyName('email', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("email", event.target.value))
+          }
           type="text"
           placeholder="Email Address"
         />
@@ -63,20 +62,20 @@ class PasswordForgetForm extends Component {
           Reset My Password
         </button>
 
-        { error && <p>{error.message}</p> }
+        {error && <p>{error.message}</p>}
       </form>
     );
   }
 }
 
-const PasswordForgetLink = () =>
+const PasswordForgetLink = () => (
   <p>
-    <Link href={routes.PASSWORD_FORGET}><a>Forgot Password?</a></Link>
+    <Link href={routes.PASSWORD_FORGET}>
+      <a>Forgot Password?</a>
+    </Link>
   </p>
+);
 
-export default withRedux(initStore)(PasswordForgetPage);
+export default PasswordForgetPage;
 
-export {
-  PasswordForgetForm,
-  PasswordForgetLink,
-};
+export { PasswordForgetForm, PasswordForgetLink };
diff --git a/pages/signin.js b/pages/signin.js
index 6c7f287..4de035c 100644
--- a/pages/signin.js
+++ b/pages/signin.js
@@ -1,30 +1,29 @@
-import React, { Component } from 'react';
-import Router from 'next/router';
-import withRedux from 'next-redux-wrapper';
+import React, { Component } from "react";
+import Router from "next/router";
 
-import initStore from '../src/store';
-import { SignUpLink } from './signup';
-import { PasswordForgetLink } from './pw-forget';
-import { AppWithAuthentication } from '../src/components/App';
-import { auth } from '../src/firebase';
-import * as routes from '../src/constants/routes';
+import { SignUpLink } from "./signup";
+import { PasswordForgetLink } from "./pw-forget";
+import { AppWithAuthentication } from "../src/components/App";
+import { auth } from "../src/firebase";
+import * as routes from "../src/constants/routes";
 
-const SignInPage = () =>
+const SignInPage = () => (
   <AppWithAuthentication>
     <h1>SignIn</h1>
     <SignInForm />
     <PasswordForgetLink />
     <SignUpLink />
   </AppWithAuthentication>
+);
 
 const updateByPropertyName = (propertyName, value) => () => ({
-  [propertyName]: value,
+  [propertyName]: value
 });
 
 const INITIAL_STATE = {
-  email: '',
-  password: '',
-  error: null,
+  email: "",
+  password: "",
+  error: null
 };
 
 class SignInForm extends Component {
@@ -34,46 +33,42 @@ class SignInForm extends Component {
     this.state = { ...INITIAL_STATE };
   }
 
-  onSubmit = (event) => {
-    const {
-      email,
-      password,
-    } = this.state;
+  onSubmit = event => {
+    const { email, password } = this.state;
 
-    auth.doSignInWithEmailAndPassword(email, password)
+    auth
+      .doSignInWithEmailAndPassword(email, password)
       .then(() => {
         this.setState(() => ({ ...INITIAL_STATE }));
         Router.push(routes.HOME);
       })
       .catch(error => {
-        this.setState(updateByPropertyName('error', error));
+        this.setState(updateByPropertyName("error", error));
       });
 
     event.preventDefault();
-  }
+  };
 
   render() {
-    const {
-      email,
-      password,
-      error,
-    } = this.state;
+    const { email, password, error } = this.state;
 
-    const isInvalid =
-      password === '' ||
-      email === '';
+    const isInvalid = password === "" || email === "";
 
     return (
       <form onSubmit={this.onSubmit}>
         <input
           value={email}
-          onChange={event => this.setState(updateByPropertyName('email', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("email", event.target.value))
+          }
           type="text"
           placeholder="Email Address"
         />
         <input
           value={password}
-          onChange={event => this.setState(updateByPropertyName('password', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("password", event.target.value))
+          }
           type="password"
           placeholder="Password"
         />
@@ -81,14 +76,12 @@ class SignInForm extends Component {
           Sign In
         </button>
 
-        { error && <p>{error.message}</p> }
+        {error && <p>{error.message}</p>}
       </form>
     );
   }
 }
 
-export default withRedux(initStore)(SignInPage);
+export default SignInPage;
 
-export {
-  SignInForm,
-};
+export { SignInForm };
diff --git a/pages/signup.js b/pages/signup.js
index 3495f15..5f9642e 100644
--- a/pages/signup.js
+++ b/pages/signup.js
@@ -1,29 +1,28 @@
-import React, { Component } from 'react';
-import Link from 'next/link';
-import Router from 'next/router';
-import withRedux from 'next-redux-wrapper';
+import React, { Component } from "react";
+import Link from "next/link";
+import Router from "next/router";
 
-import initStore from '../src/store';
-import { AppWithAuthentication } from '../src/components/App';
-import { auth, db } from '../src/firebase';
-import * as routes from '../src/constants/routes';
+import { AppWithAuthentication } from "../src/components/App";
+import { auth, db } from "../src/firebase";
+import * as routes from "../src/constants/routes";
 
-const SignUpPage = () =>
+const SignUpPage = () => (
   <AppWithAuthentication>
     <h1>SignUp</h1>
     <SignUpForm />
   </AppWithAuthentication>
+);
 
 const updateByPropertyName = (propertyName, value) => () => ({
-  [propertyName]: value,
+  [propertyName]: value
 });
 
 const INITIAL_STATE = {
-  username: '',
-  email: '',
-  passwordOne: '',
-  passwordTwo: '',
-  error: null,
+  username: "",
+  email: "",
+  passwordOne: "",
+  passwordTwo: "",
+  error: null
 };
 
 class SignUpForm extends Component {
@@ -33,16 +32,12 @@ class SignUpForm extends Component {
     this.state = { ...INITIAL_STATE };
   }
 
-  onSubmit = (event) => {
-    const {
-      username,
-      email,
-      passwordOne,
-    } = this.state;
+  onSubmit = event => {
+    const { username, email, passwordOne } = this.state;
 
-    auth.doCreateUserWithEmailAndPassword(email, passwordOne)
+    auth
+      .doCreateUserWithEmailAndPassword(email, passwordOne)
       .then(authUser => {
-
         // Create a user in your own accessible Firebase Database too
         db.doCreateUser(authUser.uid, username, email)
           .then(() => {
@@ -50,54 +45,57 @@ class SignUpForm extends Component {
             Router.push(routes.HOME);
           })
           .catch(error => {
-            this.setState(updateByPropertyName('error', error));
+            this.setState(updateByPropertyName("error", error));
           });
-
       })
       .catch(error => {
-        this.setState(updateByPropertyName('error', error));
+        this.setState(updateByPropertyName("error", error));
       });
 
     event.preventDefault();
-  }
+  };
 
   render() {
-    const {
-      username,
-      email,
-      passwordOne,
-      passwordTwo,
-      error,
-    } = this.state;
+    const { username, email, passwordOne, passwordTwo, error } = this.state;
 
     const isInvalid =
-      passwordOne !== passwordTwo ||
-      passwordOne === '' ||
-      username === '';
+      passwordOne !== passwordTwo || passwordOne === "" || username === "";
 
     return (
       <form onSubmit={this.onSubmit}>
         <input
           value={username}
-          onChange={event => this.setState(updateByPropertyName('username', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("username", event.target.value))
+          }
           type="text"
           placeholder="Full Name"
         />
         <input
           value={email}
-          onChange={event => this.setState(updateByPropertyName('email', event.target.value))}
+          onChange={event =>
+            this.setState(updateByPropertyName("email", event.target.value))
+          }
           type="text"
           placeholder="Email Address"
         />
         <input
           value={passwordOne}
-          onChange={event => this.setState(updateByPropertyName('passwordOne', event.target.value))}
+          onChange={event =>
+            this.setState(
+              updateByPropertyName("passwordOne", event.target.value)
+            )
+          }
           type="password"
           placeholder="Password"
         />
         <input
           value={passwordTwo}
-          onChange={event => this.setState(updateByPropertyName('passwordTwo', event.target.value))}
+          onChange={event =>
+            this.setState(
+              updateByPropertyName("passwordTwo", event.target.value)
+            )
+          }
           type="password"
           placeholder="Confirm Password"
         />
@@ -105,22 +103,19 @@ class SignUpForm extends Component {
           Sign Up
         </button>
 
-        { error && <p>{error.message}</p> }
+        {error && <p>{error.message}</p>}
       </form>
     );
   }
 }
 
-const SignUpLink = () =>
+const SignUpLink = () => (
   <p>
-    Don't have an account?
-    {' '}
-    <Link href={routes.SIGN_UP}><a>Sign Up</a></Link>
+    Don't have an account?{" "}
+    <Link href={routes.SIGN_UP}>
+      <a>Sign Up</a>
+    </Link>
   </p>
-
-export default withRedux(initStore)(SignUpPage);
-
-export {
-  SignUpForm,
-  SignUpLink,
-};
\ No newline at end of file
+);
+export default SignUpPage;
+export { SignUpForm, SignUpLink };
diff --git a/src/components/App/index.js b/src/components/App/index.js
index b3e0762..4f4ff6f 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -1,41 +1,49 @@
-import React from 'react';
-import { compose } from 'recompose';
+import React from "react";
+import { compose } from "recompose";
 
-import Navigation from '../Navigation';
-import withAuthentication from '../Session/withAuthentication';
-import withAuthorization from '../Session/withAuthorization';
-import * as routes from '../../constants/routes';
+import Navigation from "../Navigation";
+import withAuthentication from "../Session/withAuthentication";
+import withAuthorization from "../Session/withAuthorization";
 
-const App = ({ children }) =>
+const App = ({ children }) => (
   <div className="app">
     <Navigation />
-
-    <hr/>
-
+    <hr />
     {children}
-
-    <hr/>
-
-    <span>Found in <a href="https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE">Taming the State in React</a></span> | <span>Star the <a href="https://github.com/rwieruch/nextjs-redux-firebase-authentication">Repository</a></span> | <span>Receive a <a href="https://www.getrevue.co/profile/rwieruch">Developer's Newsletter</a></span>
-
+    <hr />
+    <span>
+      Found in{" "}
+      <a href="https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE">
+        Taming the State in React
+      </a>
+    </span>{" "}
+    |{" "}
+    <span>
+      Star the{" "}
+      <a href="https://github.com/rwieruch/nextjs-redux-firebase-authentication">
+        Repository
+      </a>
+    </span>{" "}
+    |{" "}
+    <span>
+      Receive a{" "}
+      <a href="https://www.getrevue.co/profile/rwieruch">
+        Developer's Newsletter
+      </a>
+    </span>
     <style jsx>{`
       .app {
         margin: 20px;
       }
     `}</style>
   </div>
-
+);
 const AppWithAuthentication = compose(
   withAuthentication,
-  withAuthorization(false),
+  withAuthorization(false)
 )(App);
-
 const AppWithAuthorization = compose(
   withAuthentication,
-  withAuthorization(true),
+  withAuthorization(true)
 )(App);
-
-export {
-  AppWithAuthentication,
-  AppWithAuthorization,
-};
+export { AppWithAuthentication, AppWithAuthorization };
diff --git a/src/firebase/firebase.js b/src/firebase/firebase.js
index 859b758..283ec4c 100644
--- a/src/firebase/firebase.js
+++ b/src/firebase/firebase.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,
@@ -6,7 +8,7 @@ const prodConfig = {
   databaseURL: YOUR_DATABASE_URL,
   projectId: YOUR_PROJECT_ID,
   storageBucket: '',
-  messagingSenderId: YOUR_MESSAGING_SENDER_ID,
+  messagingSenderId: YOUR_MESSAGING_SENDER_ID
 };
 
 const devConfig = {
@@ -15,12 +17,10 @@ const devConfig = {
   databaseURL: YOUR_DATABASE_URL,
   projectId: YOUR_PROJECT_ID,
   storageBucket: '',
-  messagingSenderId: YOUR_MESSAGING_SENDER_ID,
+  messagingSenderId: YOUR_MESSAGING_SENDER_ID
 };
 
-const config = process.env.NODE_ENV === 'production'
-  ? prodConfig
-  : devConfig;
+const config = process.env.NODE_ENV === "production" ? prodConfig : devConfig;
 
 if (!firebase.apps.length) {
   firebase.initializeApp(config);
@@ -29,7 +29,4 @@ if (!firebase.apps.length) {
 const db = firebase.database();
 const auth = firebase.auth();
 
-export {
-  db,
-  auth,
-};
+export { db, auth };