feat: authentication, signup and login

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 = {