login con google y stored on firebase

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "firebase": "^8.2.6",
     "node-sass": "^5.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/App.js

@@ -1,36 +1,85 @@
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, Redirect } from "react-router-dom";
+import React, { Component } from "react";
+import { auth, handleUserProfile } from "./firebase/utils";
 import "./default.scss";
 // layouts
 import MainLayout from "./layouts/MainLayout";
 import HomepageLayout from "./layouts/HomepageLayout";
 // pages
 import Homepage from "./pages/Homepage";
 import Registration from "./pages/Registration";
+import Login from "./pages/Login";
 
-const App = () => {
-  return (
-    <div className="App">
-      <Switch>
-        <Route
-          exact
-          path="/"
-          render={() => (
-            <HomepageLayout>
-              <Homepage />
-            </HomepageLayout>
-          )}
-        />
-        <Route
-          path="/registration"
-          render={() => (
-            <MainLayout>
-              <Registration />
-            </MainLayout>
-          )}
-        />
-      </Switch>
-    </div>
-  );
-};
+const initialState = { currentUser: null };
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialState,
+    };
+  }
+  authListener = null;
+  componentDidMount() {
+    this.authListener = auth.onAuthStateChanged(async (userAuth) => {
+      if (userAuth) {
+        const userRef = await handleUserProfile(userAuth);
+        userRef.onSnapshot((snapshot) => {
+          this.setState({
+            currentUser: {
+              id: snapshot.id,
+              ...snapshot.data(),
+            },
+          });
+        });
+      }
+      this.setState({
+        ...initialState,
+      });
+    });
+  }
+  componentWillUnmount() {
+    this.authListener();
+  }
+
+  render() {
+    const { currentUser } = this.state;
+    return (
+      <div className="App">
+        <Switch>
+          <Route
+            exact
+            path="/"
+            render={() => (
+              <HomepageLayout currentUser={currentUser}>
+                <Homepage />
+              </HomepageLayout>
+            )}
+          />
+          <Route
+            path="/registration"
+            render={() => (
+              <MainLayout currentUser={currentUser}>
+                <Registration />
+              </MainLayout>
+            )}
+          />
+          <Route
+            path="/login"
+            render={() =>
+              currentUser ? (
+                <Redirect to="/" />
+              ) : (
+                <MainLayout currentUser={currentUser}>
+                  <Login />
+                </MainLayout>
+              )
+            }
+          />
+        </Switch>
+      </div>
+    );
+  }
+}
 
 export default App;

src/components/Header/index.js

@@ -2,8 +2,10 @@ import React from "react";
 import { Link } from "react-router-dom";
 import "./styles.scss";
 import Logo from "./../../assets/logo.png";
+import { auth } from "./../../firebase/utils";
 
 const Header = (props) => {
+  const { currentUser } = props;
   return (
     <header className="header">
       <div className="wrap">
@@ -13,15 +15,31 @@ const Header = (props) => {
           </Link>
         </div>
         <div className="callToActions">
-          <ul>
-            <li>
-              <Link to="/registration">Register</Link>
-            </li>
-          </ul>
+          {currentUser && (
+            <ul>
+              <li>
+                <span onClick={() => auth.signOut()}>LogOut</span>
+              </li>
+            </ul>
+          )}
+          {!currentUser && (
+            <ul>
+              <li>
+                <Link to="/registration">Register</Link>
+              </li>
+              <li>
+                <Link to="/login">Login</Link>
+              </li>
+            </ul>
+          )}
         </div>
       </div>
     </header>
   );
 };
 
+Header.defaultProps = {
+  currentUser: null,
+};
+
 export default Header;

src/components/Header/styles.scss

@@ -37,7 +37,13 @@
         padding: 0;
       }
       li {
+        display: inline-block;
         list-style-type: none;
+        margin-right: 1.5rem;
+
+        &:last-child {
+          margin-right: 0;
+        }
 
         a {
           font-size: 1.8rem;

src/components/SignIn/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import "./styles.scss";
+import Button from "./../forms/Button";
+import { signInWitGoogle } from "./../../firebase/utils";
+
+class SignIn extends Component {
+  handleSubmit = async (e) => {
+    e.preventDefault();
+  };
+
+  render() {
+    return (
+      <div className="signin">
+        <div className="wrap">
+          <h2>LogIn</h2>
+          <div className="formWrap">
+            <form onSubmit={this.handleSubmit}>
+              <div className="socialSignin">
+                <div className="row">
+                  <Button onClick={signInWitGoogle}>Sign in with Google</Button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SignIn;

src/components/SignIn/styles.scss

@@ -0,0 +1,27 @@
+.signing {
+  display: block;
+  width: 100%;
+  max-width: 40rem;
+  margin: 4rem auto 6rem;
+  border: 1px solid black;
+
+  .wrap {
+    padding: 10px;
+
+    h2 {
+      font-size: 2.2rem;
+      line-height: 1;
+      font-weight: 400;
+      text-transform: uppercase;
+      text-align: center;
+      display: block;
+      padding: 0;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    .socialSignin {
+      margin: 3rem auto 0;
+    }
+  }
+}

src/components/forms/Button/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./styles.scss";
+
+const Button = ({ children, ...otherProps }) => {
+  return (
+    <button className="btn" {...otherProps}>
+      {children}
+    </button>
+  );
+};
+export default Button;

src/components/forms/Button/styles.scss

@@ -0,0 +1,15 @@
+.btn {
+  display: block;
+  width: 100%;
+  color: white;
+  font-size: 1.8rem;
+  line-height: 1;
+  font-weight: 300;
+  background: black;
+  padding: 1rem 0;
+  margin: 0 auto;
+  text-transform: uppercase;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}

src/firebase/config.js

@@ -0,0 +1,8 @@
+export const firebaseConfig = {
+  apiKey: "AIzaSyBrIueLrp0_zwsuA498J-2IN3nait-9TVo",
+  authDomain: "ecom-solo.firebaseapp.com",
+  projectId: "ecom-solo",
+  storageBucket: "ecom-solo.appspot.com",
+  messagingSenderId: "566504264771",
+  appId: "1:566504264771:web:9b513cee7b5046a3a430f6",
+};

src/firebase/utils.js

@@ -0,0 +1,36 @@
+import firebase from "firebase/app";
+import "firebase/firestore";
+import "firebase/auth";
+import { firebaseConfig } from "./config";
+
+firebase.initializeApp(firebaseConfig);
+
+export const auth = firebase.auth();
+export const firestore = firebase.firestore();
+
+const GoogleProvider = new firebase.auth.GoogleAuthProvider();
+GoogleProvider.setCustomParameters({ prompt: "select_account" });
+export const signInWitGoogle = () => auth.signInWithPopup(GoogleProvider);
+
+export const handleUserProfile = async (userAuth, additionalData) => {
+  if (!userAuth) return;
+  const { uid } = userAuth;
+  const userRef = firestore.doc(`users/${uid}`);
+  const snapshot = await userRef.get();
+
+  if (!snapshot.exists) {
+    const { displayName, email } = userAuth;
+    const timestamp = new Date();
+    try {
+      await userRef.set({
+        displayName,
+        email,
+        createdDate: timestamp,
+        ...additionalData,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  }
+  return userRef;
+};

src/layouts/HomepageLayout.js

@@ -4,8 +4,8 @@ import Header from "./../components/Header";
 const HomepageLayout = (props) => {
   return (
     <div className="fullHeight">
-      <Header />
-      <div className="main">{props.children}</div>
+      <Header {...props} />
+      {props.children}
     </div>
   );
 };

src/layouts/MainLayout.js

@@ -4,8 +4,8 @@ import Header from "./../components/Header";
 const MainLayout = (props) => {
   return (
     <div>
-      <Header />
-      <div className="main">{props.children}</div>
+      <Header {...props} />
+      {props.children}
     </div>
   );
 };

src/pages/Login/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "./styles.scss";
+import SignIn from "./../../components/SignIn";
+
+const Login = (props) => {
+  return (
+    <div>
+      <SignIn />
+    </div>
+  );
+};
+
+export default Login;