EU CAPTCHA for Gatsby

Frequently Asked Questions

• How do I add EU CAPTCHA to a Gatsby site?

  Install the package with npm i @myrasec/eu-captcha. Import { EuCaptcha, isEuCaptchaDone } from '@myrasec/eu-captcha' and place <EuCaptcha sitekey={sitekey} /> in your form component. Guard any DOM access with typeof window !== 'undefined'. Call isEuCaptchaDone() on submit and send the token to a Gatsby Function or backend API for server-side verification.

• Does EU CAPTCHA work with Gatsby's static site generation?

  Yes. Since the EuCaptcha component only runs in the browser after hydration, it works seamlessly with Gatsby's SSG approach. The component does not render during the static build — it initialises after the page hydrates in the user's browser, which is exactly when form interactions occur.

• How do I prevent build-time errors with EU CAPTCHA in Gatsby?

  Gatsby builds pages at compile time using Node.js, where window and document are not available. The @myrasec/eu-captcha package handles this gracefully, but if you access the widget element directly, always guard DOM queries with a typeof window !== 'undefined' check or place them inside a useEffect hook.

• Can I verify the CAPTCHA token using Gatsby Functions?

  Yes. Gatsby Functions (placed in src/api/) provide serverless endpoints that run on Netlify or other compatible hosts. Create a function that receives the eu-captcha-response token, POSTs it to the EU CAPTCHA verification API with your secret key, and returns an appropriate response to the client before processing the form data.

• Does EU CAPTCHA work alongside Formik or React Hook Form?

  Yes. The EuCaptcha component from @myrasec/eu-captcha works independently of any form library. Place it inside your form, use isEuCaptchaDone() to confirm completion, and read the hidden eu-captcha-response input value in your submission handler. Include it alongside the rest of your form data before sending to the server.

• How should I handle CAPTCHA reinitialisation in Gatsby client-side navigation?

  The EuCaptcha component follows standard React lifecycle rules and reinitialises each time it mounts. When Gatsby navigates between pages, components unmount and remount, so the widget reinitialises automatically. Use a key prop tied to the current location pathname if you need to force a full reinitialisation.

• Is EU CAPTCHA GDPR compliant for Gatsby sites?

  Yes. EU CAPTCHA is operated by an EU-based company, is hosted entirely in Germany, and does not rely on US cloud providers or infrastructure subject to US surveillance laws. The service processes only the data necessary to provide and verify the CAPTCHA (such as IP address and technical browser or device information) in line with the requirements of the GDPR. Your organization remains responsible for providing transparent privacy information, selecting an appropriate legal basis, and obtaining any required consent for your specific Gatsby implementation. This information does not constitute legal advice; please consult your legal counsel for an assessment of your individual case.