From e6e187645e7c6b7ad3d5e8a176bdcb6c2a718c8b Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Tue, 26 Mar 2019 20:02:16 -0600 Subject: [PATCH] feat: authentication, signup and login --- .gitignore | 2 + src/App.js | 4 + src/components/Navbar/Navbar.js | 7 +- src/components/firebase/context.js | 5 + src/components/firebase/fire.js | 37 +++++++ src/components/firebase/index.js | 6 ++ src/components/screens/Login/Login.js | 79 +++++++++++++++ src/components/screens/Login/index.js | 2 + src/components/screens/Register/Register.js | 105 ++++++++++++++++++++ src/components/screens/Register/index.js | 2 + src/components/screens/User/User.js | 2 +- src/fire.js | 14 --- src/index.js | 19 ++-- 13 files changed, 261 insertions(+), 23 deletions(-) create mode 100644 src/components/firebase/context.js create mode 100644 src/components/firebase/fire.js create mode 100644 src/components/firebase/index.js create mode 100644 src/components/screens/Login/Login.js create mode 100644 src/components/screens/Login/index.js create mode 100644 src/components/screens/Register/Register.js create mode 100644 src/components/screens/Register/index.js delete mode 100644 src/fire.js diff --git a/.gitignore b/.gitignore index 8692cf6..dbd1fdc 100644 --- a/.gitignore +++ b/.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* diff --git a/src/App.js b/src/App.js index 2060668..c9fc6c5 100644 --- a/src/App.js +++ b/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 { + + ); } diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 209fa14..3eddf0d 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -8,10 +8,13 @@ const Navbar = () => ( Landing
  • - Sign In + Account
  • - Account + Login +
    • +
  • + Register
    • diff --git a/src/components/firebase/context.js b/src/components/firebase/context.js new file mode 100644 index 0000000..55ea1a4 --- /dev/null +++ b/src/components/firebase/context.js @@ -0,0 +1,5 @@ +import React from "react"; + +const FirebaseContext = React.createContext(null); + +export default FirebaseContext; diff --git a/src/components/firebase/fire.js b/src/components/firebase/fire.js new file mode 100644 index 0000000..5dd81d7 --- /dev/null +++ b/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; diff --git a/src/components/firebase/index.js b/src/components/firebase/index.js new file mode 100644 index 0000000..34d0591 --- /dev/null +++ b/src/components/firebase/index.js @@ -0,0 +1,6 @@ +import FirebaseContext from "./context"; +import Firebase from "./fire"; + +export default Firebase; + +export { FirebaseContext }; diff --git a/src/components/screens/Login/Login.js b/src/components/screens/Login/Login.js new file mode 100644 index 0000000..27c7d62 --- /dev/null +++ b/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 }) => ( +
    +

    Login

    + + {firebase => } + +

    + Don't have an account? Sign Up +

    +
    +); + +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 ( +
    + + + + + {error &&

    {error.message}

    } +
    + ); + } +} + +const LoginForm = withRouter(LoginFormBase); + +export default LoginPage; + +export { LoginForm }; diff --git a/src/components/screens/Login/index.js b/src/components/screens/Login/index.js new file mode 100644 index 0000000..d4e9b8e --- /dev/null +++ b/src/components/screens/Login/index.js @@ -0,0 +1,2 @@ +import Login from "./Login"; +export default Login; diff --git a/src/components/screens/Register/Register.js b/src/components/screens/Register/Register.js new file mode 100644 index 0000000..47485c9 --- /dev/null +++ b/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 }) => ( +
    +

    Register

    + + {firebase => } + +
    +); + +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 ( +
    + + + + + + + {error &&

    {error.message}

    } +
    + ); + } +} + +export default withRouter(RegisterPage); + +export { RegisterForm }; diff --git a/src/components/screens/Register/index.js b/src/components/screens/Register/index.js new file mode 100644 index 0000000..e7a7c05 --- /dev/null +++ b/src/components/screens/Register/index.js @@ -0,0 +1,2 @@ +import Register from "./Register"; +export default Register; diff --git a/src/components/screens/User/User.js b/src/components/screens/User/User.js index 5fc6ebd..4c673d1 100644 --- a/src/components/screens/User/User.js +++ b/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 = { diff --git a/src/fire.js b/src/fire.js deleted file mode 100644 index 81e7935..0000000 --- a/src/fire.js +++ /dev/null @@ -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; diff --git a/src/index.js b/src/index.js index 87d1be5..6fce011 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,17 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; +import Firebase, { FirebaseContext } from "./components/firebase"; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( + + {" "} + + , + 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.