Merge pull request #16 from TryShape/issue-8-add-authentication

Issue 8: Authentication Module

Author: atapas

components/core/App.js

@@ -5,13 +5,13 @@ import dynamic from "next/dynamic";
 import { harperFetch } from "../../utils/HarperFetch";
 
 // Dummy Shape Data
-// import { shapes } from "../../data/shapes";
+import { shapes } from "../../data/shapes";
 
 // loader
 import Loader from "react-loader-spinner";
 
 // ShapeListing
-import { ShapeList } from '..';
+import { ShapeList, Header } from '..';
 
 const App = (props) => {
   const [data, setData] = useState([]);
@@ -22,10 +22,10 @@ const App = (props) => {
     setLoading(true);
 
     // fetching the shape data
-    const shapes = await harperFetch({
+    /*const shapes = await harperFetch({
       operation: "sql",
       sql: "SELECT * FROM tryshape.shapes",
-    });
+    });*/
     console.log(shapes);
     let modifiedShapes = shapes.map((shape, index) => {
       shape.showAdvanced = false;
@@ -42,6 +42,7 @@ const App = (props) => {
 
   return (
     <>
+      <Header {...props} />
       {loading ? (
         <Loader
           style={{margin: '20% auto auto 42%'}}

components/core/Landing.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import Button from 'react-bootstrap/Button';
+
+// Header
+import { Header } from '..'
+
+// icon
+import { BsLightning } from "react-icons/bs";
+
+// link
+import Link from "next/link";
+
+const Landing = ({ setOpen, user, setUser }) => {
+    
+    return(
+        <div>
+            <Header setOpen={setOpen} user={user} setUser={setUser} />
+            <div>
+                <h1>Landing</h1>
+            </div>
+            <Link href="/app">
+              <a>
+                <Button>
+                  <div>
+                    Try Now!
+                    <BsLightning />
+                  </div>
+                </Button>
+              </a>
+            </Link>
+        </div>
+    )
+};
+
+export default Landing;

components/core/SignInModal.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+// icons
+import { FaGithub, FaGoogle } from "react-icons/fa";
+
+// Button
+import Button from "react-bootstrap/Button";
+
+// Modal
+import Modal from "react-bootstrap/Modal";
+
+// sign In providers
+import { githubProvider, googleProvider } from "../../utils/Auth/auth-methods";
+import socialMediaAuth from "../../utils/Auth/auth";
+
+const SignInModal = ({ open, setOpen }) => {
+  const handleOnClick = async (provider) => {
+    const res = await socialMediaAuth(provider);
+    await setOpen(false);
+  };
+  return (
+    <Modal
+      size="lg"
+      aria-labelledby="contained-modal-title-vcenter"
+      show={ open }
+      onHide={() => setOpen(false)}
+      centered
+    >
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          Sign In
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="flex">
+          <Button onClick={() => handleOnClick(googleProvider)}>
+            Sign In with Google <FaGoogle />
+          </Button>
+
+          <Button onClick={() => handleOnClick(githubProvider)}>
+            Sign In with Github
+            <FaGithub />
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default SignInModal;

components/index.js

@@ -1,3 +1,8 @@
+// core
 export { default as App } from "./core/App";
+export { default as Landing } from "./core/Landing";
+export { default as SignInModal } from "./core/SignInModal";
 
+// utils
+export { default as Header } from "./utils/Header";
 export { default as ShapeList } from './utils/ShapeList';

components/utils/Header.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+
+// link from next
+import Link from "next/link";
+
+// auth for signin out
+import { auth } from "../../utils/firebase";
+
+// toast
+import toast from "react-hot-toast";
+
+// icon
+import { FaShapes } from "react-icons/fa";
+
+// Button
+import Button from "react-bootstrap/Button";
+
+const Header = ({ setOpen, user, setUser }) => {
+  console.log(user);
+  // sign out function
+  const signOut = () => {
+    auth()
+      .signOut()
+      .then(() => {
+        setUser([]);
+        toast.success("Signed Out!");
+      })
+      .catch((error) => {
+        // An error happened.
+        console.log(error);
+      });
+  };
+
+  return (
+    <div>
+      <Link href="/">
+        <a>
+          TryShape
+          <span>
+            <FaShapes />
+          </span>
+        </a>
+      </Link>
+      {(user.email || user.displayName) ? (
+        <>
+          <div>
+            <img
+              src={
+                user.photoURL
+                  ? user.photoURL
+                  : `https://unavatar.vercel.app/${user.email}`
+              }
+              alt="profile"
+            />
+            {user.displayName ? user.displayName : "User"}
+          </div>
+
+          <Button onClick={signOut}>
+            <div>Sign Out</div>
+          </Button>
+        </>
+      ) : (
+        <Button onClick={() => setOpen(true)}>
+          <div>Sign In</div>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default Header;

package.json

@@ -8,14 +8,18 @@
     "start": "next start"
   },
   "dependencies": {
+    "bootstrap": "4.6.0",
     "downloadjs": "^1.4.7",
+    "firebase": "^8.6.7",
     "html-to-image": "^1.6.2",
     "next": "^10.0.0",
     "react": "17.0.1",
+    "react-bootstrap": "^1.6.1",
     "react-clip-path": "^0.0.6",
     "react-dom": "17.0.1",
     "react-hot-toast": "^2.0.0",
     "react-icons": "^4.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-loader-spinner": "^4.0.0",
     "react-switch": "^6.0.0",
     "styled-components": "^5.3.0"

pages/_app.js

@@ -1,15 +1,43 @@
+import { useEffect, useState } from "react";
 
 // styles
 import '../styles/global.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 // toaster
 import { Toaster } from "react-hot-toast";
 
+// firebase auth
+import { auth } from "../utils/firebase";
+
+// SignIn modal
+import { SignInModal } from '../components';
+
+
 export default function App({ Component, pageProps }) {
+  // handling auth user
+  const [user, setUser] = useState([]);
+  const [open, setOpen] = useState(false);
+
+  const props = {
+    open,
+    setOpen,
+    user,
+    setUser
+  };
+
+  // handling auth and storing user if found
+  auth().onAuthStateChanged((user) => {
+    if (user) {
+      setUser(user);
+    }
+  });
+
   return (
     <>
       <Toaster position="top-right" reverseOrder={false} />
-      <Component {...pageProps} />
+      <Component {...pageProps} {...props} />
+      <SignInModal open={open} setOpen={setOpen} />
     </>
   );
 }

pages/app.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { App } from "../components";
+
+const Container = (props) => {
+  return <App {...props} />;
+};
+
+export default Container;

pages/index.js

@@ -1,10 +1,16 @@
 import React from "react";
-import { App } from "../components";
+import { App, Landing } from "../components";
 
 const index = (props) => {
+  const { user } = props;
+  console.log(user);
   return (
     <main>
-      <App {...props} />
+      { 
+        user.length === 0 ? 
+          (<Landing {...props} />) : 
+          (<App {...props} />) 
+      }
     </main>
   );
 };

utils/Auth/auth-methods.js

@@ -0,0 +1,4 @@
+import { auth } from "../firebase";
+
+export const googleProvider = new auth.GoogleAuthProvider();
+export const githubProvider = new auth.GithubAuthProvider();