change captcha in emailjs way

astrodevs-labs · Apr 14, 2024 · 1c7f184 · 1c7f184
1 parent 7c94b5f
commit 1c7f184
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 82 deletions.
diff --git a/.env.template b/.env.template
@@ -1,6 +1,5 @@
-RECAPTCHA_API_KEY=""
-RECAPTCHA_SITE_KEY=""
-EMAILJS_API_KEY=""
-EMAILJS_TEMPLATE_ID=""
-EMAILJS_SERVICE_ID=""
+NEXT_PUBLIC_EMAILJS_API_KEY=""
+NEXT_PUBLIC_EMAILJS_SERVICE_ID=""
+NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=""
+NEXT_PUBLIC_CAPTCHA_SITE_KEY=""
 LOCAL=true
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -33,11 +33,10 @@ jobs:
       - name: Build with Next.js 🏗️
         run: npx next build
         env:
-          EMAILJS_API_KEY: ${{ vars.EMAILJS_API_KEY }}
-          EMAILJS_SERVICE_ID: ${{ vars.EMAILJS_SERVICE_ID }}
-          EMAILJS_TEMPLATE_ID: ${{ vars.EMAILJS_TEMPLATE_ID }}
-          RECAPTCHA_API_KEY: ${{ vars.RECAPTCHA_API_KEY }}
-          RECAPTCHA_SITE_KEY: ${{ vars.RECAPTCHA_SITE_KEY }}
+          NEXT_PUBLIC_EMAILJS_API_KEY: ${{ vars.NEXT_PUBLIC_EMAILJS_API_KEY }}
+          NEXT_PUBLIC_EMAILJS_SERVICE_ID: ${{ vars.NEXT_PUBLIC_EMAILJS_SERVICE_ID }}
+          NEXT_PUBLIC_EMAILJS_TEMPLATE_ID: ${{ vars.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID }}
+          NEXT_PUBLIC_CAPTCHA_SITE_KEY: ${{ vars.NEXT_PUBLIC_CAPTCHA_SITE_KEY }}
 
       - name: Debug
         run: ls -la

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-google-recaptcha-v3": "^1.10.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
     "sharp": "^0.33.2",
@@ -41,6 +41,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-google-recaptcha": "^2.1.9",
     "autoprefixer": "^10.0.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/GoogleCaptchaWrapper.tsx b/src/app/GoogleCaptchaWrapper.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import { ThemeProvider } from '@/components/theme-provider'
 import { Toaster } from '@/components/ui/sonner'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import GoogleCaptchaWrapper from './GoogleCaptchaWrapper'
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -23,17 +22,15 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <GoogleCaptchaWrapper>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            {children}
-            <Toaster />
-          </ThemeProvider>
-        </GoogleCaptchaWrapper>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+          <Toaster />
+        </ThemeProvider>
       </body>
     </html>
   )

diff --git a/src/components/contact.tsx b/src/components/contact.tsx
@@ -15,7 +15,7 @@ import emailjs from '@emailjs/browser'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Image from 'next/image'
 import { useState } from 'react'
-import { GoogleReCaptcha, useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import ReCAPTCHA from 'react-google-recaptcha'
 import { useForm } from 'react-hook-form'
 import { IconContext } from 'react-icons'
 import { AiOutlineLoading3Quarters } from 'react-icons/ai'
@@ -31,8 +31,7 @@ const formSchema = z.object({
 
 export default function Contact() {
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const { executeRecaptcha } = useGoogleReCaptcha()
-  const [token, setToken] = useState('')
+  const [token, setToken] = useState<string | null>(null)
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -46,36 +45,32 @@ export default function Contact() {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     try {
       setIsSubmitting(true)
-      if (!executeRecaptcha) {
-        return
-      }
-      const token = await executeRecaptcha('send_form')
-      if (token) {
-        const params = {
-          name: values.name,
-          email: values.email,
-          message: values.message,
-        }
-        emailjs
-          .send(
-            process.env.EMAILJS_SERVICE_ID!,
-            process.env.EMAILJS_TEMPLATE_ID!,
-            params,
-            {
-              publicKey: process.env.EMAILJS_API_KEY!,
-            },
-          )
-          .then(
-            () => {
-              console.log('SUCCESS!')
-              toast.success('Request send. See you soon ;)')
-            },
-            (error) => {
-              console.log('FAILED...', error.text)
-              throw new Error(error.text)
-            },
-          )
+      console.log('token = ' + token)
+      const params = {
+        name: values.name,
+        email: values.email,
+        message: values.message,
+        'g-recaptcha-response': token,
       }
+      emailjs
+        .send(
+          process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!,
+          process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!,
+          params,
+          {
+            publicKey: process.env.NEXT_PUBLIC_EMAILJS_API_KEY!,
+          },
+        )
+        .then(
+          () => {
+            console.log('SUCCESS!')
+            toast.success('Request send. See you soon ;)')
+          },
+          (error) => {
+            console.log('FAILED...', error.text)
+            throw new Error(error.text)
+          },
+        )
       setIsSubmitting(false)
     } catch (error) {
       toast.error('Error sending the request.')
@@ -89,7 +84,6 @@ export default function Contact() {
       className="my-52 flex w-full flex-col items-center py-24"
       id="contact"
     >
-      <GoogleReCaptcha onVerify={() => {}} />
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
           <div className="flex w-full flex-col justify-between lg:flex-row lg:space-x-20">
@@ -149,7 +143,6 @@ export default function Contact() {
               />
             </div>
           </div>
-
           <div className="flex flex-row-reverse">
             <Button type="submit" disabled={isSubmitting}>
               {isSubmitting ? (
@@ -163,6 +156,10 @@ export default function Contact() {
             </Button>
           </div>
         </form>
+        <ReCAPTCHA
+          sitekey={process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY!}
+          onChange={(token) => setToken(token)}
+        />
       </Form>
     </section>
   )