google auth fix

package-lock.json

@@ -14064,6 +14064,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-google-login": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
+      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
+      "requires": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",
+    "react-google-login": "^5.2.2",
     "react-lottie": "^1.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",

src/App.js

@@ -19,6 +19,7 @@ export default function App() {
   useEffect(() => {
     const checkLoggedIn = async () => {
       let token = localStorage.getItem("auth-token");
+      console.log("app js " + token);
       if (token == null) {
         localStorage.setItem("auth-token","");
         token ="";

src/components/LogInContainer.js

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {useState, useContext} from 'react';
 import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
 import Register from './Register';
 import Login from './Login';
@@ -7,6 +7,8 @@ import styled, {css} from 'styled-components';
 import {Button} from './miscellaneous/Styles';
 import UserContext from "../context/UserContext";
 import {logout} from "./NavBar"
+import { GoogleLogin } from 'react-google-login';
+import Axios from "axios";
 
 const BaseApp = styled.div`
   display: flex;
@@ -15,13 +17,13 @@ const BaseApp = styled.div`
 
 `;
 
-
 const AppSide = styled.div`
   width: 50%;
   background-color: #66bfbf;
-  display:flex;
-  flex-direction: column;
-  justify-content: flex-end;
+ display: grid;
+  grid-template-columns: repeat(auto-fit, 300px);
+  justify-content: center;
+  align-items: center;
 
 `;
 const AppForm = styled.div`
@@ -140,23 +142,70 @@ const FormTitle = styled.div`
   margin-bottom: 50px;
 
 `;
+const responseSuccessGoogle =  (response) => {
+
+  Axios({
+      method: 'POST',
+      url: "http://localhost:5000/users/googlelogin",
+      data: { idToken: response.tokenId }
+    }).then(response => {
+      console.log(response);
+
+  })
+}
+const responseFailGoogle = (response) => {
+  console.log(response)
+
+}
 const LogInContainer = () => {
   const { userData, setUserData } = useContext(UserContext);
+  const [error, setError] = useState();
+  const [hasLogged, setHasLogged] = useState(false);
   const history = useHistory();
+const responsePassGoogle = async (response) => {
+  try{
+    const idToken = response.tokenId;
+  console.log("id token" + idToken);
+  const googleres = await Axios.post(
+   "http://server-locaft.herokuapp.com/users/googlelogin",{
+     idToken: idToken
+   }
+
+  );
+  setUserData({
+    token: googleres.data.token,
+    user: googleres.data.user
+  });
+  localStorage.setItem("auth-token",googleres.data.token);
+  setHasLogged(true);
+
+} catch (err) {
+  err.response.data.msg && setError(err.response.data.msg);
+}
+
+
+}
     return (
         <BaseApp>
           <AppSide>
-            <PlaneContainer>
-            <img src="/logo.jpg" alt="plane logo"></img>
-            </PlaneContainer>
-            <TextContainer>
-              <BannerHeading>locaft</BannerHeading>
-              <BannerText>Sit back, let us move you</BannerText>
+            {!hasLogged ? (
+            <GoogleLogin
+    clientId= {process.env.REACT_APP_CLIENT_ID}
+    buttonText="Login with Google"
+    onSuccess={responsePassGoogle}
+    onFailure={responseFailGoogle}
+    cookiePolicy={'single_host_origin'}
+  />
 
-            </TextContainer>
-             <SkyContainer>
-                <img src="/skyscraper.png" alt="skyscraper"></img>
-              </SkyContainer>
+
+            ): (
+              <React.Fragment>
+                <p> username: {userData.user.username}</p>
+                <p> email: {userData.user.email}</p>
+                <p> pricing: {userData.user.pricing}</p>
+              </React.Fragment>
+
+            ) }
           </AppSide>
           <AppForm>
             {!userData.user ? (

src/components/Login.js

@@ -23,6 +23,7 @@ const Login = () => {
         "https://server-locaft.herokuapp.com/users/login",
         loginUser
       );
+      console.dir("login res " + loginRes.data.user);
       setUserData({
         token: loginRes.data.token,
         user: loginRes.data.user,

src/components/NavBar.js

@@ -50,7 +50,6 @@ const List = styled.ul`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 13px 50px;
   flex-wrap: nowrap;
   margin-bottom: 0px !important;