Add Google Sign in option (#1181)

Added Google sign in as a possible sign-in option. This eliminates the
need for verifying email, if user chooses this sign-in option.
This means less clicks to get a new user to play a game.

react_main/src/css/auth.css

@@ -77,6 +77,17 @@
   margin-bottom: 0px;
 }
 
+.auth-btn.google {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.auth-btn.google img {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
+}
+
 .auth .modal .form .field-wrapper {
   margin-bottom: 0px;
 }

react_main/src/pages/Auth/Auth.jsx

@@ -1,7 +1,9 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import { Redirect, Switch, Route, useLocation } from "react-router-dom";
 import { initializeApp } from "firebase/app";
-import { getAuth, inMemoryPersistence } from "firebase/auth";
+import { getAuth, inMemoryPersistence, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
+import axios from "axios";
+import { useErrorAlert } from "../../components/Alerts";
 
 import LogIn from "./LogIn";
 import SignUp from "./SignUp";
@@ -13,7 +15,9 @@ import "../../css/auth.css";
 
 export default function Auth() {
   const user = useContext(UserContext);
+  const [loading, setLoading] = useState(true);
   const location = useLocation();
+  const errorAlert = useErrorAlert();
   const links = [
     {
       text: "Log In",
@@ -42,11 +46,33 @@ export default function Auth() {
       appId: process.env.REACT_APP_FIREBASE_APP_ID,
       measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
     };
+
     initializeApp(fbConfig);
-    getAuth().setPersistence(inMemoryPersistence);
+    const auth = getAuth();
+    auth.setPersistence(inMemoryPersistence);
+
+    getRedirectResult(auth)
+    .then(async(result) => {
+      if (result && result.user) {
+        const credential = GoogleAuthProvider.credentialFromResult(result);
+        const idToken = await auth.currentUser.getIdToken(true);
+        axios
+          .post("/auth", { idToken })
+          .then(() => {
+            window.location.reload();
+          })
+          .catch((e) => {
+            errorAlert(e);
+            setLoading(false);
+          });
+      }
+      else{
+        setLoading(false);
+      }
+    });
   }, []);
 
-  if (!user.loaded) return <LoadingPage />;
+  if (!user.loaded || loading) return <LoadingPage />;
   else if (user.loggedIn) return <Redirect to="/play" />;
 
   return (

react_main/src/pages/Auth/LogIn.jsx

@@ -5,6 +5,8 @@ import {
   signInWithEmailAndPassword,
   sendPasswordResetEmail,
   sendEmailVerification,
+  GoogleAuthProvider,
+  signInWithRedirect,
 } from "firebase/auth";
 import axios from "axios";
 
@@ -22,6 +24,7 @@ export default function LogIn() {
   const [showResetPw, setShowResetPw] = useState(false);
   const siteInfo = useContext(SiteInfoContext);
   const errorAlert = useErrorAlert();
+  const googleProvider = new GoogleAuthProvider();
 
   useEffect(() => {
     document.title = "Log In | UltiMafia";
@@ -87,6 +90,24 @@ export default function LogIn() {
     }
   }
 
+  async function googleSubmit(e) {
+    try {
+      e.preventDefault();
+      setLoading(true);
+      await verifyRecaptcha("auth");
+      await signInWithRedirect(getAuth(), googleProvider);
+    } catch (e) {
+      setLoading(false);
+      if (!e || !e.message) return;
+
+      if (e.message.indexOf("(auth/too-many-requests)") !== -1)
+        errorAlert(
+          "Too many login attempts on this account. Please try again later."
+        );
+      else errorAlert("Failed to login. Please check your account details.");
+    }
+  }
+
   const modalContent = (
     <form className="form" onSubmit={onResetPw}>
       <div className="field-wrapper">
@@ -143,6 +164,16 @@ export default function LogIn() {
           value="Log In"
         />
       </form>
+
+      <div className="or">or</div>
+
+      <div
+        className="auth-btn google"
+        onClick={googleSubmit}>
+        <img src="/images/icons/google.webp" alt="Google" />
+        Log In with Google
+      </div>
+
       <div className="legal">
         By logging in you agree to follow our{" "}
         <Link to="/legal/tos">Terms of Service </Link>
@@ -157,5 +188,7 @@ export default function LogIn() {
         footer={modalFooter}
       />
     </div>
+
+
   );
 }

react_main/src/pages/Auth/SignUp.jsx

@@ -4,6 +4,8 @@ import {
   createUserWithEmailAndPassword,
   getAuth,
   sendEmailVerification,
+  signInWithRedirect,
+  GoogleAuthProvider,
 } from "firebase/auth";
 
 import LoadingPage from "../Loading";
@@ -20,6 +22,7 @@ export default function SignUp() {
   const [signedUp, setSignedUp] = useState(false);
   const siteInfo = useContext(SiteInfoContext);
   const errorAlert = useErrorAlert();
+  const googleProvider = new GoogleAuthProvider();
 
   const allowedEmailDomans = JSON.parse(process.env.REACT_APP_EMAIL_DOMAINS);
 
@@ -86,6 +89,24 @@ export default function SignUp() {
 
   if (signedUp) return <Redirect to="/auth/login" />;
 
+  async function googleSubmit(e) {
+    try {
+      e.preventDefault();
+      setLoading(true);
+      await verifyRecaptcha("auth");
+      await signInWithRedirect(getAuth(), googleProvider);
+    } catch (e) {
+      setLoading(false);
+      if (!e || !e.message) return;
+
+      if (e.message.indexOf("(auth/too-many-requests)") !== -1)
+        errorAlert(
+          "Too many login attempts on this account. Please try again later."
+        );
+      else errorAlert("Failed to login. Please check your account details.");
+    }
+  }
+
   return (
     <div className="span-panel main login">
       <form className="form" onSubmit={onSubmit}>
@@ -119,6 +140,16 @@ export default function SignUp() {
           value="Sign Up"
         />
       </form>
+
+      <div className="or">or</div>
+
+      <div
+        className="auth-btn google"
+        onClick={googleSubmit}>
+        <img src="/images/icons/google.webp" alt="Google" />
+        Sign Up with Google
+      </div>
+
       <div className="legal">
         By signing up you agree to follow our{" "}
         <Link to="/legal/tos">Terms of Service </Link>