feat: authentication, signup and login

.gitignore

@@ -15,8 +15,10 @@
 .DS_Store
 .env
 .env.local
+.env.development
 .env.development.local
 .env.test.local
+.env.production
 .env.production.local
 
 npm-debug.log*

src/App.js

@@ -8,6 +8,8 @@ import Day from "./components/screens/Day";
 import Month from "./components/screens/Month";
 import Year from "./components/screens/Year";
 import User from "./components/screens/User";
+import Login from "./components/screens/Login";
+import Register from "./components/screens/Register";
 
 class App extends Component {
   render() {
@@ -34,6 +36,8 @@ class App extends Component {
         <Route path="/:year/:month" component={Month} />
         <Route path="/:year/:month/:day" component={Day} />
         <Route path="/user" component={User} />
+        <Route path="/login" component={Login} />
+        <Route path="/register" component={Register} />
       </Router>
     );
   }

src/components/Navbar/Navbar.js

@@ -8,10 +8,13 @@ const Navbar = () => (
         <Link to={"/"}>Landing</Link>
       </li>
       <li>
-        <Link to={"/signin"}>Sign In</Link>
+        <Link to={"/user"}>Account</Link>
       </li>
       <li>
-        <Link to={"/user"}>Account</Link>
+        <Link to={"/login"}>Login</Link>
+      </li>
+      <li>
+        <Link to={"/register"}>Register</Link>
       </li>
     </ul>
   </div>

src/components/firebase/context.js

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

src/components/firebase/fire.js

@@ -0,0 +1,37 @@
+import app from "firebase/app";
+import "firebase/auth";
+
+const config = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: process.env.REACT_APP_DEV_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_DEV_DATABASE_URL,
+  projectId: process.env.REACT_APP_DEV_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID
+};
+console.log("--------------------");
+console.log(process.env.NODE_ENV);
+console.log(process.env.REACT_APP_FIREBASE_API_KEY);
+console.log("--------------------");
+
+class Firebase {
+  constructor() {
+    app.initializeApp(config);
+    this.auth = app.auth();
+  }
+
+  // Auth
+  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);
+}
+
+export default Firebase;

src/components/firebase/index.js

@@ -0,0 +1,6 @@
+import FirebaseContext from "./context";
+import Firebase from "./fire";
+
+export default Firebase;
+
+export { FirebaseContext };

src/components/screens/Login/Login.js

@@ -0,0 +1,79 @@
+import React, { Component } from "react";
+import { withRouter, Link } from "react-router-dom";
+
+import { FirebaseContext } from "../../firebase";
+
+const LoginPage = ({ history }) => (
+  <div>
+    <h1>Login</h1>
+    <FirebaseContext.Consumer>
+      {firebase => <LoginForm history={history} firebase={firebase} />}
+    </FirebaseContext.Consumer>
+    <p>
+      Don't have an account? <Link to={"/register"}>Sign Up</Link>
+    </p>
+  </div>
+);
+
+class LoginFormBase extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { email: "", password: "", error: null };
+  }
+
+  onSubmit = event => {
+    event.preventDefault();
+    const { email, password } = this.state;
+
+    this.props.firebase
+      .doSignInWithEmailAndPassword(email, password)
+      .then(() => {
+        this.setState({ email: "", password: "", error: null });
+        this.props.history.push("/home");
+      })
+      .catch(error => {
+        this.setState({ error });
+      });
+  };
+
+  onChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { email, password, error } = this.state;
+
+    const isInvalid = password === "" || email === "";
+
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input
+          name="email"
+          value={email}
+          onChange={this.onChange}
+          type="text"
+          placeholder="Email Address"
+        />
+        <input
+          name="password"
+          value={password}
+          onChange={this.onChange}
+          type="password"
+          placeholder="Password"
+        />
+        <button disabled={isInvalid} type="submit">
+          Sign In
+        </button>
+
+        {error && <p>{error.message}</p>}
+      </form>
+    );
+  }
+}
+
+const LoginForm = withRouter(LoginFormBase);
+
+export default LoginPage;
+
+export { LoginForm };

src/components/screens/Login/index.js

@@ -0,0 +1,2 @@
+import Login from "./Login";
+export default Login;

src/components/screens/Register/Register.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+import { Link, withRouter } from "react-router-dom";
+
+import { FirebaseContext } from "../../firebase";
+
+const RegisterPage = ({ history }) => (
+  <div>
+    <h1>Register</h1>
+    <FirebaseContext.Consumer>
+      {firebase => <RegisterForm history={history} firebase={firebase} />}
+    </FirebaseContext.Consumer>
+  </div>
+);
+
+class RegisterForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: "",
+      email: "",
+      passwordOne: "",
+      passwordTwo: "",
+      error: null
+    };
+  }
+
+  onSubmit = event => {
+    const { username, email, passwordOne } = this.state;
+
+    this.props.firebase
+      .doCreateUserWithEmailAndPassword(email, passwordOne)
+      .then(authUser => {
+        this.setState({
+          username: "",
+          email: "",
+          passwordOne: "",
+          passwordTwo: "",
+          error: null
+        });
+        this.props.history.push("/home");
+      })
+      .catch(error => {
+        this.setState({ error });
+      });
+
+    event.preventDefault();
+  };
+
+  onChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { username, email, passwordOne, passwordTwo, error } = this.state;
+
+    const isInvalid =
+      passwordOne !== passwordTwo ||
+      passwordOne === "" ||
+      email === "" ||
+      username === "";
+
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input
+          name="username"
+          value={username}
+          onChange={this.onChange}
+          type="text"
+          placeholder="Full Name"
+        />
+        <input
+          name="email"
+          value={email}
+          onChange={this.onChange}
+          type="text"
+          placeholder="Email Address"
+        />
+        <input
+          name="passwordOne"
+          value={passwordOne}
+          onChange={this.onChange}
+          type="password"
+          placeholder="Password"
+        />
+        <input
+          name="passwordTwo"
+          value={passwordTwo}
+          onChange={this.onChange}
+          type="password"
+          placeholder="Confirm Password"
+        />
+        <button disabled={isInvalid} type="submit">
+          Sign Up
+        </button>
+
+        {error && <p>{error.message}</p>}
+      </form>
+    );
+  }
+}
+
+export default withRouter(RegisterPage);
+
+export { RegisterForm };

src/components/screens/Register/index.js

@@ -0,0 +1,2 @@
+import Register from "./Register";
+export default Register;

src/components/screens/User/User.js

@@ -1,5 +1,5 @@
 import React from "react";
-import fire from "../../../fire.js";
+import fire from "../../firebase/fire.js";
 
 class User extends React.Component {
   state = {

src/fire.js

@@ -1,14 +0,0 @@
-import firebase from "firebase";
-const FIREBASE_API_KEY = process.env.REACT_APP_FIREBASE_API_KEY;
-
-const config = {
-  apiKey: FIREBASE_API_KEY,
-  authDomain: "journal-app-service.firebaseapp.com",
-  databaseURL: "https://journal-app-service.firebaseio.com",
-  projectId: "journal-app-service",
-  storageBucket: "journal-app-service.appspot.com",
-  messagingSenderId: "492083585165"
-};
-const fire = firebase.initializeApp(config);
-
-export default fire;

src/index.js

@@ -1,10 +1,17 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorker from "./serviceWorker";
+import Firebase, { FirebaseContext } from "./components/firebase";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <FirebaseContext.Provider value={new Firebase()}>
+    {" "}
+    <App />
+  </FirebaseContext.Provider>,
+  document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.