Merge branch 'catrawalkar-authentication' into main

GDGPune-active · May 18, 2021 · 88de21f · 88de21f
2 parents f00e290 + 873bedc
commit 88de21f
Show file tree

Hide file tree

Showing 16 changed files with 883 additions and 23,748 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@
 
 The client code can be found in the `client` folder and the server code can be found in the `server` folder.
 
+
 ### Prerequisites
 
 :writing_hand: What things you need to install the software and how to install them
@@ -30,6 +31,14 @@ npm i -g serve
 serve
 ```
 
+#### Steps to configure Firebase in React Frontend
+
++ Visit https://console.firebase.google.com/ and create a Firebase Project (or select existing one.
++ Goto Project Settings and click "Add App" button.
++ Copy Project configuration.
++ Make a duplicate of `.env.sample` and rename it `.env`
++ Paste previously copied configurartions in `.env` file to run the project.
+
 ## Contributing
 
 The steps will be

diff --git a/client/.env.sample b/client/.env.sample
@@ -0,0 +1,8 @@
+REACT_APP_apiKey=apiKey
+REACT_APP_authDomain=authDomain
+REACT_APP_databaseURL=databaseURL
+REACT_APP_projectId=projectId
+REACT_APP_storageBucket=storageBucket
+REACT_APP_messagingSenderId=messagingSenderId
+REACT_APP_appId=appId
+REACT_APP_measurementId=measurementId
diff --git a/client/.gitignore b/client/.gitignore
@@ -1 +1,2 @@
-/node_modules
+/node_modules
+.env
diff --git a/client/ISSUE_TEMPLATE.md b/client/ISSUE_TEMPLATE.md
@@ -1,13 +0,0 @@
-<!--
- IMPORTANT: Please use the following link to create a new issue:
-
-  https://www.creative-tim.com/new-issue/material-dashboard-react
-
-**If your issue was not created using the app above, it will be closed immediately.**
--->
-
-<!--
-Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
-👉  https://www.creative-tim.com/bundles
-👉  https://www.creative-tim.com
--->

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -9,12 +9,16 @@
     "@material-ui/icons": "4.11.2",
     "chartist": "0.10.1",
     "classnames": "2.3.1",
+    "firebase": "^8.6.1",
     "history": "5.0.0",
+    "material-ui-phone-number": "^2.2.6",
     "perfect-scrollbar": "1.5.1",
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-chartist": "0.14.4",
     "react-dom": "17.0.2",
+    "react-firebase-hooks": "^3.0.4",
+    "react-hook-form": "^7.6.0",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.3",
     "react-swipeable-views": "0.13.9"

diff --git a/client/public/index.html b/client/public/index.html
@@ -56,7 +56,7 @@
       rel="stylesheet"
       href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     />
-    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> -->
     <!--
           Notice the use of %PUBLIC_URL% in the tags above.
           It will be replaced with the URL of the `public` folder during the build.
@@ -71,6 +71,8 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
+    <div id="sign-in-button"></div>
+
     <!--
           This HTML file is a template.
           If you open it directly in the browser, you will see an empty page.

diff --git a/client/src/components/Auth/Auth.js b/client/src/components/Auth/Auth.js
@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Slide,
+  Step,
+  StepLabel,
+  Stepper,
+  TextField,
+  Typography,
+} from "@material-ui/core";
+
+import { useAuthState } from "react-firebase-hooks/auth";
+
+import { firebase_app } from "data/firebase-config";
+import { useForm, Controller } from "react-hook-form";
+import MaterialUiPhoneNumber from "material-ui-phone-number";
+import firebase from "firebase/app";
+import { useHistory } from "react-router";
+
+const Auth = (props) => {
+  const [user, loading, error] = useAuthState(firebase_app.auth());
+  const [open, setOpen] = useState(false);
+  const [phone, setPhone] = useState("");
+  const [code, setCode] = useState("");
+  const [showLoading, setShowLoading] = useState(false);
+
+  let history = useHistory();
+
+  const [activeStep, setActiveStep] = React.useState(0);
+  const [confirmationResultCopy, setConfirmationResultCopy] = useState();
+
+  const getStepContent = (step) => {
+    switch (step) {
+      case 0:
+        return (
+          <MaterialUiPhoneNumber
+            name="phone"
+            label="Phone Number"
+            data-cy="user-phone"
+            defaultCountry={"in"}
+            countryCodeEditable={false}
+            value={phone}
+            onChange={(value) => setPhone(value)}
+          />
+        );
+      case 1:
+        return (
+          <TextField
+            label="Enter OTP"
+            onChange={(e) => setCode(e.target.value)}
+            value={code}
+          />
+        );
+      case 2:
+        return (
+          <TextField
+            label="Enter Name"
+            onChange={(e) => setCode(e.target.value)}
+            value={code}
+          />
+        );
+    }
+  };
+
+  useEffect(() => {
+    !loading && setOpen(!user ? true : false);
+    setActiveStep(0);
+  }, [loading, user]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
+        "sign-in-button",
+        {
+          size: "invisible",
+          callback: function (response) {
+            // reCAPTCHA solved, allow signInWithPhoneNumber.
+            login();
+          },
+        }
+      );
+    }, 100);
+  }, []);
+
+  const login = () => {
+    setShowLoading(true);
+    // setupRecaptcha();
+    const appVerifier = window.recaptchaVerifier;
+    firebase_app
+      .auth()
+      .signInWithPhoneNumber(phone, appVerifier)
+      .then((confirmationResult) => {
+        setShowLoading(false);
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        setConfirmationResultCopy(confirmationResult);
+        window.confirmationResult = confirmationResult;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  const verifyOtp = () => {
+    setShowLoading(true);
+
+    confirmationResultCopy
+      .confirm(code)
+      .then((result) => {
+        setShowLoading(false);
+        setPhone("");
+        setCode("");
+        // User signed in successfully.
+        const user = result.user;
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+
+        // console.log("SUCCESS");
+      })
+      .catch((error) => {
+        console.log("ERROR");
+      });
+  };
+
+  const Transition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="down" ref={ref} {...props} />;
+  });
+
+  return (
+    <Dialog
+      open={open}
+      //   TransitionComponent={Transition}
+      onClose={() => {
+        props.setShowLoginPopup && props.setShowLoginPopup(false);
+        setOpen(false);
+        !props.setShowLoginPopup && history.push("/dashboard");
+      }}
+      keepMounted
+      aria-labelledby="alert-dialog-slide-title"
+      aria-describedby="alert-dialog-slide-description"
+    >
+      <DialogTitle id="alert-dialog-slide-title">
+        {"Signin to proceed"}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-slide-description"></DialogContentText>
+        <div>{getStepContent(activeStep)}</div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          disabled={activeStep === 0 || showLoading}
+          onClick={() => setActiveStep((prevActiveStep) => prevActiveStep - 1)}
+          color="primary"
+        >
+          Back
+        </Button>
+        {activeStep === 0 ? (
+          <Button
+            disabled={showLoading || phone.length < 10}
+            onClick={login}
+            color="primary"
+          >
+            Generate OTP
+          </Button>
+        ) : (
+          <Button disabled={showLoading} onClick={verifyOtp} color="primary">
+            Verify
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default Auth;