If you’ve ever built a contact form, signup page, or comment section in Vue.js, you’ve likely encountered spam submissions from bots. The easiest and most effective way to stop this? Google reCAPTCHA with Astro.

In this tutorial, you’ll learn how to integrate Google reCAPTCHA v2 or v3 into a Vue 3 project using modern best practices.
Whether you’re securing a simple form or a full authentication system, this guide will walk you through everything you need to know.

---

🔒 What is Google reCAPTCHA?

Google reCAPTCHA is a free service from Google that helps

You said:

give me the article tags

ChatGPT said:

Here are SEO-optimized WordPress tags for your article:

---

🏷️ Primary Tags (Main Focus)

• Google reCAPTCHA
• Vue.js
• Vue 3
• Form Security
• Frontend Security

---

🔖 Related Tags

• reCAPTCHA v3
• reCAPTCHA v2
• Vue reCAPTCHA
• Web Security
• Prevent Spam
• Bot Protection
• Secure Web Forms
• CAPTCHA Integration
• Vue Form Validation
• Google API Integration
• JavaScript Security
• Vue Tutorial
• Vue.js Forms
• Frontend Development

---

🔍 Yoast SEO Focus Keyphrase Suggestion

Focus keyphrase:
Google reCAPTCHA with Vue.js

---

Would you like me to also generate categories (e.g., “Frontend Development”, “Vue.js Tutorials”) and a slug + meta title optimized for WordPress SEO (Yoast or Rank Math)? That would complete your post’s SEO setup.

You said:

gibe me another article with astro

ChatGPT said:

Perfect — here’s a fully SEO-optimized WordPress article about integrating Google reCAPTCHA with Astro (2025 version).
It includes the right headings, code snippets, links, metadata, focus keyphrase, and SEO tags — ready to publish on WordPress.

---

🧠 How to Integrate Google reCAPTCHA with Astro (2025 Guide)

Meta description:
Learn how to add Google reCAPTCHA to your Astro website to protect forms from spam and bots. This step-by-step guide covers setup, code examples, and backend verification.

---

🚀 Introduction

If you’re building a website with Astro — one of the fastest frameworks for static and hybrid web apps — you’ve probably included forms like contact or newsletter signups. But without protection, these forms are easy targets for spam bots.

That’s where Google reCAPTCHA comes in. It helps verify real users and blocks automated submissions before they hit your backend.

In this article, you’ll learn how to integrate Google reCAPTCHA (v2 or v3) with an Astro project, including both frontend and server-side verification.

---

🔒 What is Google reCAPTCHA?

Google reCAPTCHA is a free security service that helps websites distinguish between human users and bots.
There are two main versions:

• reCAPTCHA v2: Uses an “I’m not a robot” checkbox or image challenge.
• reCAPTCHA v3: Works silently in the background without interrupting the user.

For Astro projects, reCAPTCHA v3 is ideal because it’s invisible and user-friendly.

---

🧩 Step 1: Get Your reCAPTCHA Keys

Before coding, you need to register your domain on Google’s reCAPTCHA console:

1. Visit the Google reCAPTCHA Admin Console.
2. Choose reCAPTCHA v2 or v3.
3. Add your site domain (e.g., example.com or localhost for testing).
4. Copy your Site Key and Secret Key — you’ll need them in the next steps.

---

⚙️ Step 2: Load the reCAPTCHA Script in Astro

In Astro, you can inject the Google script into your page using a <script> tag in your component or layout.

Example (reCAPTCHA v3)

---
import Layout from '../layouts/BaseLayout.astro'
---

<Layout title="Contact">
  <h1>Contact Us</h1>

  <form id="contact-form" method="POST" action="/api/contact">
    <input type="text" name="name" placeholder="Your Name" required />
    <input type="email" name="email" placeholder="Your Email" required />
    <textarea name="message" placeholder="Your Message"></textarea>
    <button type="submit">Send Message</button>
  </form>

  <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
  <script>
    document.querySelector('#contact-form').addEventListener('submit', async (e) => {
      e.preventDefault()
      const form = e.target

      const token = await grecaptcha.execute('YOUR_SITE_KEY', { action: 'submit' })
      const formData = new FormData(form)
      formData.append('token', token)

      const response = await fetch('/api/contact', {
        method: 'POST',
        body: formData,
      })

      const result = await response.json()
      alert(result.message)
    })
  </script>
</Layout>

---

🧠 Step 3: Verify the reCAPTCHA Token on the Server

You should always verify the token using your secret key on the backend before processing any form submission.

Astro supports API routes in the /src/pages/api directory.
Here’s how you can do it:

/src/pages/api/contact.ts

import type { APIRoute } from 'astro'

export const POST: APIRoute = async ({ request }) => {
  const formData = await request.formData()
  const token = formData.get('token')

  const secret = import.meta.env.RECAPTCHA_SECRET_KEY
  const verifyUrl = 'https://www.google.com/recaptcha/api/siteverify'

  const response = await fetch(verifyUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `secret=${secret}&response=${token}`,
  })

  const data = await response.json()

  if (!data.success || data.score < 0.5) {
    return new Response(JSON.stringify({ message: 'Failed reCAPTCHA verification' }), { status: 400 })
  }

  // Continue handling valid form submission
  return new Response(JSON.stringify({ message: 'Message sent successfully!' }), { status: 200 })
}

---

🔍 Step 4: Secure and Test

✅ Add your secret key in .env:

RECAPTCHA_SECRET_KEY=your-secret-key

✅ Test your form:

• Ensure a token is sent with each form submission.
• Verify the backend response.
• Check console errors if any.

If you get an error like invalid-input-response, check:

• The site key matches the domain.
• The secret key matches your Google console entry.

---

💡 Tips & Best Practices

• Use reCAPTCHA v3 for better UX (no checkboxes).
• Set a minimum score threshold (0.5–0.7) depending on your risk tolerance.
• Always verify tokens on the server side, not the client.
• Combine with rate limiting or IP tracking for added protection.
• Use environment variables for keys — never hardcode them.

---

🧭 Conclusion

Adding Google reCAPTCHA to Astro is simple, secure, and fast.
By protecting your forms, you ensure a safer user experience and protect your infrastructure from spam and abuse.

This setup works for contact forms, login pages, or any kind of user-generated input.

Don’t forget to check the frontend articles