add verification email in github oauth and bug fixes

dudko-dev · Feb 5, 2024 · d5d5742 · d5d5742
1 parent 30165cc
commit d5d5742
Show file tree

Hide file tree

Showing 21 changed files with 260 additions and 104 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "[json]": {

diff --git a/src/App.css b/src/App.css
@@ -27,4 +27,4 @@
   src: local("FontAwersome"),
     url("../public/assets/fonts/FontAwersomeBrands.ttf") format("truetype");
   font-weight: normal;
-}
+}
diff --git a/src/components/Loader.css b/src/components/Loader.css
@@ -24,7 +24,8 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
@@ -35,37 +35,37 @@ const menuItems: {
   label: string;
   secure: boolean;
 }[] = [
-  {
-    key: "page_main",
-    path: "/",
-    component: ({ authUser }: { authUser: User | null | undefined }) => (
-      <MainRoute authUser={authUser} />
-    ),
-    label: "Main Page",
-    secure: false,
-  },
-  {
-    key: "page_second",
-    path: "/second",
-    component: ({
-      authUser,
-      user,
-      isLoadingUser,
-    }: {
-      authUser: User | null | undefined;
-      user: UserModel | undefined;
-      isLoadingUser: boolean;
-    }) => (
-      <SecondRoute
-        authUser={authUser}
-        user={user}
-        isLoadingUser={isLoadingUser}
-      />
-    ),
-    label: "Second Page",
-    secure: true,
-  },
-];
+    {
+      key: "page_main",
+      path: "/",
+      component: ({ authUser }: { authUser: User | null | undefined }) => (
+        <MainRoute authUser={authUser} />
+      ),
+      label: "Main Page",
+      secure: false,
+    },
+    {
+      key: "page_second",
+      path: "/second",
+      component: ({
+        authUser,
+        user,
+        isLoadingUser,
+      }: {
+        authUser: User | null | undefined;
+        user: UserModel | undefined;
+        isLoadingUser: boolean;
+      }) => (
+        <SecondRoute
+          authUser={authUser}
+          user={user}
+          isLoadingUser={isLoadingUser}
+        />
+      ),
+      label: "Second Page",
+      secure: true,
+    },
+  ];
 
 interface Props {
   window?: () => Window;

diff --git a/src/components/auth/Action.tsx b/src/components/auth/Action.tsx
@@ -1,4 +1,4 @@
-import { useState, FormEvent, useCallback, useEffect } from "react";
+import { useState, FormEvent, useEffect, useCallback } from "react";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
@@ -33,7 +33,7 @@ export default function Action() {
   )
     ? (searchParams.get("mode") as (typeof modes)[number])
     : "resetEmail";
-  let oobCode = searchParams.get("oobCode");
+  const oobCode = searchParams.get("oobCode");
   const navigate = useNavigate();
 
   const handleResetPassword = (event: FormEvent<HTMLFormElement>) => {
@@ -120,7 +120,7 @@ export default function Action() {
       .then(async () => {
         setShowMsg({
           type: "info",
-          message: "The address has been confirmed, you need to log in again.",
+          message: "The address has been confirmed.",
           isShown: true,
         });
         if (FirebaseAuth.currentUser)
@@ -247,6 +247,7 @@ export default function Action() {
       >
         {inputBox()}
       </Box>
+      <Box sx={{ marginBottom: "10vmin" }} />
       <Snackbar
         open={showMsg.isShown}
         autoHideDuration={6000}

diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx
@@ -4,7 +4,10 @@ import TextField from "@mui/material/TextField";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
-import { signInWithEmailAndPassword } from "firebase/auth";
+import {
+  signInWithEmailAndPassword,
+  sendEmailVerification,
+} from "firebase/auth";
 import FirebaseAuth, { errorMessagesMap } from "../../services/FirebaseAuth";
 import { Alert, Snackbar, Typography } from "@mui/material";
 import { FirebaseError } from "firebase/app";
@@ -29,7 +32,7 @@ export default function SignIn() {
     process.env;
   const navigate = useNavigate();
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
     localStorage.removeItem("authorized");
@@ -44,7 +47,13 @@ export default function SignIn() {
       return;
     }
     setSignInIsRunning(true);
-    signInWithEmailAndPassword(FirebaseAuth, email, password)
+    await signInWithEmailAndPassword(FirebaseAuth, email, password)
+      .then((user) => {
+        if (user.user.emailVerified) return;
+        return sendEmailVerification(user.user, {
+          url: `${window.location.origin}`,
+        });
+      })
       .then(() => {
         setErrorMessage("");
         navigate("/");
@@ -57,6 +66,7 @@ export default function SignIn() {
             setErrorMessage("Invalid username or password");
             break;
           default:
+            console.log(err);
             if (errorMessagesMap[err.code]) {
               setErrorMessage(errorMessagesMap[err.code]);
             } else {
@@ -161,6 +171,7 @@ export default function SignIn() {
           </Grid>
         </Box>
       </Box>
+      <Box sx={{ marginBottom: "10vmin" }} />
       <Snackbar
         open={showMsg.isShown}
         autoHideDuration={6000}

diff --git a/src/components/auth/SignInWithButton.tsx b/src/components/auth/SignInWithButton.tsx
@@ -1,34 +1,37 @@
 import { Button } from "@mui/material";
 import {
   AuthProvider,
-  // FacebookAuthProvider,
   GithubAuthProvider,
   GoogleAuthProvider,
   OAuthProvider,
+  sendEmailVerification,
   signInWithPopup,
 } from "firebase/auth";
 import FirebaseAuth from "../../services/FirebaseAuth";
 import "./SignInWithButton.css";
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export enum SignInProviders {
   apple = "apple",
   google = "google",
   github = "github",
 }
 
-export const enabledProviders: SignInProviders[] = [];
+export const enabledProviders: SignInProviders[] = [
+];
 
 function SignInWithButton(
   props: {
     provider?: SignInProviders;
     errorHandler?: (err: any) => void;
   } = {
-    provider: SignInProviders.apple,
-    errorHandler: (err: any) => {},
-  }
+      provider: SignInProviders.apple,
+      errorHandler: (err: any) => { },
+    }
 ) {
   const [signInIsRunning, setSignInIsRunning] = useState(false);
+  const navigate = useNavigate();
 
   const signInFun = async (): Promise<void> => {
     let provider: AuthProvider;
@@ -48,12 +51,22 @@ function SignInWithButton(
         throw new TypeError("Invalid Sign In Provider");
     }
     setSignInIsRunning(true);
+    let loggedIn = false;
     await signInWithPopup(FirebaseAuth, provider)
+      .then(async (user) => {
+        if (!user.user.emailVerified) {
+          await sendEmailVerification(user.user, {
+            url: `${window.location.origin}`,
+          });
+        }
+        loggedIn = true;
+      })
       .catch((err) => {
         if (typeof props.errorHandler === "function") props.errorHandler(err);
       })
       .finally(() => {
         setSignInIsRunning(false);
+        if (loggedIn) navigate("/");
       });
   };
 

diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx
@@ -9,7 +9,7 @@ import {
   sendEmailVerification,
 } from "firebase/auth";
 import FirebaseAuth, { errorMessagesMap } from "../../services/FirebaseAuth";
-import { Alert, Snackbar, Typography } from "@mui/material";
+import { Alert, Checkbox, Snackbar, Typography } from "@mui/material";
 import { FirebaseError } from "firebase/app";
 import "./SignUp.css";
 import SignInWithButton, {
@@ -21,6 +21,7 @@ import { useNavigate } from "react-router-dom";
 export default function SignUp() {
   const [errorMessage, setErrorMessage] = useState("");
   const [signUpIsRunning, setSignUpIsRunning] = useState(false);
+  const [acceptPolicies, setAcceptPolicies] = useState(false);
   const [showMsg, setShowMsg] = useState(
     {} as {
       type: "success" | "warning" | "info" | "error";
@@ -32,7 +33,7 @@ export default function SignUp() {
     process.env;
   const navigate = useNavigate();
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);
     localStorage.removeItem("authorized");
@@ -56,7 +57,7 @@ export default function SignUp() {
       return;
     }
     setSignUpIsRunning(true);
-    createUserWithEmailAndPassword(FirebaseAuth, email, password)
+    await createUserWithEmailAndPassword(FirebaseAuth, email, password)
       .then((user) =>
         sendEmailVerification(user.user, {
           url: `${window.location.origin}`,
@@ -118,12 +119,29 @@ export default function SignUp() {
             id="repeat_password"
           />
           {errorMessage ? <Alert severity="error">{errorMessage}</Alert> : null}
+          <Typography sx={{ fontSize: "8pt" }}>
+            <Checkbox
+              onChange={(event) => {
+                setAcceptPolicies(!!event.target?.checked);
+              }}
+              value={acceptPolicies}
+            />
+            I confirm my agreement with{" "}
+            <a href="/privacy_policy" target="_blank" rel="noreferrer">
+              the privacy policy
+            </a>{" "}
+            and{" "}
+            <a href="/eula" target="_blank" rel="noreferrer">
+              the terms of services
+            </a>
+            .
+          </Typography>
           <Button
             type="submit"
             fullWidth
             variant="contained"
             sx={{ mt: 3 }}
-            disabled={signUpIsRunning}
+            disabled={signUpIsRunning || !acceptPolicies}
           >
             Sign Up
           </Button>
@@ -177,6 +195,7 @@ export default function SignUp() {
           </Grid>
         </Box>
       </Box>
+      <Box sx={{ marginBottom: "10vmin" }} />
       <Snackbar
         open={showMsg.isShown}
         autoHideDuration={6000}

diff --git a/src/index.css b/src/index.css
@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+}