Develop to Main

README.md

@@ -80,6 +80,7 @@ And that's it! Your `SkateHub Frontend` should now be up and running locally on
 
 ### 2024
 
+- 2024-11-13 - Add reCAPTCHA verification to sign-in process [#59](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/59) _(v0.1.22)_
 - 2024-11-08 - Add Husky [#53](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/53) _(v0.1.21)_
 - 2024-11-08 - Add vercel development deployment configuration [#31](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/31) _(v0.1.20)_
 - 2024-11-06 - Add the `forgot-password` button [#25](https://github.com/jpcmf/Frontend-GraduateProgram-FullStack-2024/pull/25) _(v0.1.19)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -25,6 +25,7 @@
     "nookies": "^2.5.2",
     "react": "latest",
     "react-dom": "latest",
+    "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.1",
     "react-icons": "^5.3.0",
     "zod": "^3.23.8"
@@ -35,6 +36,7 @@
     "@types/nodemailer": "^6.4.16",
     "@types/react": "latest",
     "@types/react-dom": "latest",
+    "@types/react-google-recaptcha": "^2.1.9",
     "eslint": "latest",
     "eslint-config-next": "latest",
     "husky": "^9.1.6",

src/contexts/AuthContext.tsx

@@ -7,6 +7,7 @@ import { signInRequest, userMe } from "../services/auth";
 type SignInData = {
   email: string;
   password: string;
+  recaptcha?: string;
 };
 
 type User = {
@@ -53,6 +54,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
     setUser(user);
 
+    console.log("user...", user);
+
     Router.push("/dashboard");
   }
 

src/pages/auth/signin.tsx

@@ -1,9 +1,10 @@
 import Head from "next/head";
 import Link from "next/link";
+import ReCAPTCHA from "react-google-recaptcha";
 import { z } from "zod";
 import { useRouter } from "next/router";
-import { useContext } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useContext, useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Box, Button, Flex, Stack, Text, Link as ChakraLink } from "@chakra-ui/react";
 
@@ -12,63 +13,80 @@ import { Toast } from "@/components/Toast";
 import { AuthContext } from "@/contexts/AuthContext";
 import { LogoSkateHub } from "@/components/LogoSkateHub";
 
-const signInFormSchema2 = z.object({
+const signInFormSchema = z.object({
   email: z.string().email({ message: "E-mail deve ser um e-mail válido." }).min(1, { message: "Campo obrigatório." }),
   password: z.string().min(1, { message: "Campo obrigatório." })
 });
 
-type SignInFormSchema = z.infer<typeof signInFormSchema2>;
+type SignInFormSchema = z.infer<typeof signInFormSchema>;
 
 export default function SignIn() {
   const router = useRouter();
   const { signIn } = useContext(AuthContext);
   const { addToast } = Toast();
+  const [isVerified, setIsVerified] = useState(false);
+  const [isVerifiedError, setIsVerifiedError] = useState(false);
+  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
 
   const {
     handleSubmit,
     register,
     formState: { errors, isSubmitting }
   } = useForm<SignInFormSchema>({
-    resolver: zodResolver(signInFormSchema2),
+    resolver: zodResolver(signInFormSchema),
     defaultValues: { email: "", password: "" },
     mode: "onChange"
   });
 
   const handleSignIn: SubmitHandler<SignInFormSchema> = async values => {
-    await signIn(values)
-      .then(_ => {})
-      .catch(error => {
-        console.log("error...", error);
+    if (isVerified) {
+      const recaptchaValue = recaptchaRef.current?.getValue();
+      const newValues = { ...values, recaptcha: recaptchaValue || undefined };
 
-        if (!error.response.data.error?.message) {
-          console.log("ping");
-        }
+      await signIn(newValues)
+        .then(_ => {})
+        .catch(error => {
+          recaptchaRef.current?.reset();
+          setIsVerified(false);
 
-        switch (error.response.data.error?.message) {
-          case "Your account email is not confirmed":
-            addToast({
-              title: "Erro de autenticação.",
-              message: "Confirme seu e-mail para acessar a plataforma.",
-              type: "warning"
-            });
-            break;
-          case "Your account has been blocked by an administrator":
-            addToast({
-              title: "Erro de autenticação.",
-              message:
-                "Sua conta está temporariamente bloqueada. Se você acabou de se cadastrar, por favor, aguarde enquanto suas informações estão sendo revisadas por nossa equipe.",
-              type: "error"
-            });
-            break;
-          default:
-            addToast({
-              title: "Erro de autenticação.",
-              message: "Verifique seus dados de login e tente novamente.",
-              type: "error"
-            });
-            break;
-        }
-      });
+          switch (error.response.data.error?.message) {
+            case "Your account email is not confirmed":
+              addToast({
+                title: "Erro de autenticação.",
+                message: "Confirme seu e-mail para acessar a plataforma.",
+                type: "warning"
+              });
+              break;
+            case "Your account has been blocked by an administrator":
+              addToast({
+                title: "Erro de autenticação.",
+                message:
+                  "Sua conta está temporariamente bloqueada. Se você acabou de se cadastrar, por favor, aguarde enquanto suas informações estão sendo revisadas por nossa equipe.",
+                type: "error"
+              });
+              break;
+            default:
+              addToast({
+                title: "Erro de autenticação.",
+                message: "Verifique seus dados de login e tente novamente.",
+                type: "error"
+              });
+              break;
+          }
+        });
+    } else {
+      setIsVerifiedError(true);
+      console.log("Please verify the reCAPTCHA.");
+    }
+  };
+
+  const onVerify = (token: string | null) => {
+    if (!token) return;
+
+    if (token) {
+      setIsVerified(true);
+      setIsVerifiedError(false);
+    }
   };
 
   return (
@@ -123,6 +141,23 @@ export default function SignIn() {
                 </Text>
               </Box>
             </Flex>
+
+            <Flex flexDir="column">
+              <ReCAPTCHA
+                ref={recaptchaRef}
+                sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""}
+                onChange={onVerify}
+                size="normal"
+                hl="pt-BR"
+                badge="inline"
+                id="recaptcha"
+              />
+              {isVerifiedError && (
+                <Text fontSize={"13.3px"} fontWeight="semibold" color="red.500" mt="1.5">
+                  Please verify that you are not a robot.
+                </Text>
+              )}
+            </Flex>
           </Stack>
           <Button type="submit" mt="6" colorScheme="green" fontWeight="bold" size="lg" isLoading={isSubmitting}>
             Entrar