In progress changes for auth.

client/src/App/App.js

@@ -4,19 +4,22 @@ import "./App.css";
 import { auth, createUserProfileDocument } from "../firebase/firebase.utils";
 import { gql } from "apollo-boost";
 
+import firebase from "../firebase/firebase.utils"
+
 import HeaderAppBar from "../components/header-app-bar/header-app-bar.component";
+import SignIn from "../components/sign-in/sign-in.component";
 
-const SET_CURRENT_USER = gql`
+// const SET_CURRENT_USER = gql`
-  mutation SetCurrentUser($user: User!) {
+//   mutation SetCurrentUser($user: User!) {
-    setCurrentUser(user: $user) @client
+//     setCurrentUser(user: $user) @client
-  }
+//   }
-`;
+// `;
 
-const GET_CURRENT_USER = gql`
+// const GET_CURRENT_USER = gql`
-  {
+//   {
-    currentUser @client
+//     currentUser @client
-  }
+//   }
-`;
+// `;
 
 class App extends React.Component {
   unsubscribeFromAuth = null;
@@ -39,11 +42,11 @@ class App extends React.Component {
           // Check if refresh is required.
           const metadataRef = firebase
             .database()
-            .ref("metadata/" + user.uid + "/refreshTime");
+            .ref("metadata/" + userAuth.uid + "/refreshTime");
 
           metadataRef.on("value", async () => {
             // Force refresh to pick up the latest custom claims changes.
-            const token = await user.getIdToken(true);
+            const token = await userAuth.getIdToken(true);
             //setAuthState({ status: "in", user, token });
             console.log("status should be in");
           });
@@ -75,6 +78,8 @@ class App extends React.Component {
     return (
       <div>
         <HeaderAppBar />
+
+        {this.props.currentUser ? "Logged In!" : <SignIn />}
       </div>
     );
   }

client/src/components/header-app-bar/header-app-bar.component.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Menu, Icon } from 'antd';
+import { Menu, Icon } from "antd";
 
 const { SubMenu } = Menu;
 class HeaderAppBar extends Component {

client/src/components/header-app-bar/header-app-bar.styles.jsx

@@ -1,62 +0,0 @@
-import { fade, makeStyles } from "@material-ui/core/styles";
-export default makeStyles(theme => ({
-  grow: {
-    flexGrow: 1
-  },
-  menuButton: {
-    marginRight: theme.spacing(2)
-  },
-  title: {
-    display: "none",
-    [theme.breakpoints.up("sm")]: {
-      display: "block"
-    }
-  },
-  search: {
-    position: "relative",
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    "&:hover": {
-      backgroundColor: fade(theme.palette.common.white, 0.25)
-    },
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: "100%",
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(3),
-      width: "auto"
-    }
-  },
-  searchIcon: {
-    width: theme.spacing(7),
-    height: "100%",
-    position: "absolute",
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  inputRoot: {
-    color: "inherit"
-  },
-  inputInput: {
-    padding: theme.spacing(1, 1, 1, 7),
-    transition: theme.transitions.create("width"),
-    width: "100%",
-    [theme.breakpoints.up("md")]: {
-      width: 200
-    }
-  },
-  sectionDesktop: {
-    display: "none",
-    [theme.breakpoints.up("md")]: {
-      display: "flex"
-    }
-  },
-  sectionMobile: {
-    display: "flex",
-    [theme.breakpoints.up("md")]: {
-      display: "none"
-    }
-  }
-}));

client/src/components/sign-in/sign-in.component.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import FormInput from "../form-input/form-input.component";
+import CustomButton from "../custom-button/custom-button.component";
+
+import { auth, signInWithGoogle } from "../../firebase/firebase.utils";
+
+//Styling imports
+import { Typography } from "antd";
+import { Input } from "antd";
+import { Button } from "antd";
+
+class SignIn extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      email: "",
+      password: ""
+    };
+  }
+
+  handleSubmit = async event => {
+    event.preventDefault();
+
+    const { email, password } = this.state;
+
+    try {
+      await auth.signInWithEmailAndPassword(email, password);
+      this.setState({ email: "", password: "" });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  handleChange = event => {
+    const { value, name } = event.target;
+
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    return (
+      <div className="sign-in">
+        <Typography.Title>Sign In</Typography.Title>
+        <form onSubmit={this.handleSubmit}>
+          <Input
+            placeholder="Email"
+            name="Email"
+            type="email"
+            handleChange={this.handleChange}
+            value={this.state.email}
+            label="email"
+            required
+          />
+          <Input.Password
+            name="password"
+            type="password"
+            value={this.state.password}
+            handleChange={this.handleChange}
+            label="password"
+            required
+          />
+          <div className="buttons">
+            <Button type="submit"> Sign in </Button>
+            <Button onClick={signInWithGoogle}>
+              Sign in with Google
+            </Button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default SignIn;

client/src/firebase/firebase.utils.js

@@ -1,8 +1,8 @@
-import firebase from 'firebase/app';
+import firebase from "firebase/app";
-import 'firebase/firestore';
+import "firebase/firestore";
-import 'firebase/auth';
+import "firebase/auth";
 
-const config  = {
+const config = {
   apiKey: "AIzaSyDV9MsSHZmpLtjoaTK_ObvjFaJ-nMSd2KA",
   authDomain: "bodyshop-dev-b1cb6.firebaseapp.com",
   databaseURL: "https://bodyshop-dev-b1cb6.firebaseio.com",
@@ -16,7 +16,7 @@ const config  = {
 firebase.initializeApp(config);
 
 export const createUserProfileDocument = async (userAuth, additionalData) => {
-  console.log('userAuth from firebase Utils', userAuth)
+  console.log("userAuth from firebase Utils", userAuth);
   if (!userAuth) return;
 
   const userRef = firestore.doc(`users/${userAuth.uid}`);
@@ -34,7 +34,7 @@ export const createUserProfileDocument = async (userAuth, additionalData) => {
         ...additionalData
       });
     } catch (error) {
-      console.log('error creating user', error.message);
+      console.log("error creating user", error.message);
     }
   }
 
@@ -45,7 +45,7 @@ export const auth = firebase.auth();
 export const firestore = firebase.firestore();
 
 const provider = new firebase.auth.GoogleAuthProvider();
-provider.setCustomParameters({ prompt: 'select_account' });
+provider.setCustomParameters({ prompt: "select_account" });
 export const signInWithGoogle = () => auth.signInWithPopup(provider);
 
 export default firebase;