Google reCAPTCHA captcha control for @react-typed-forms/schemas
Google reCAPTCHA v2 control for @react-typed-forms/schemas.
``bash`
npm install @astroapps/schemas-recaptcha
`tsx
import { createRecaptchaRenderer, RecaptchaExtension } from "@astroapps/schemas-recaptcha";
// Add the extension to your form editor
const extensions = [RecaptchaExtension];
// Add the renderer to your form renderer
const renderer = createFormRenderer([
createRecaptchaRenderer({
sitekey: "your-site-key",
}),
// ... other renderers
]);
`
| Option | Type | Description |
|------------------|------|-------------|
| sitekey | string | Default site key (can be overridden per-field) |theme
| | "light" \| "dark" | Widget theme (default: "light") |size
| | "normal" \| "compact" \| "invisible" | Widget size (default: "normal") |badge
| | "bottomright" \| "bottomleft" \| "inline" | Badge position for invisible reCAPTCHA |containerClass
| | string | CSS class for the container element |
- Site Key: Override the default site key
- Theme: Light or Dark
- Size: Normal, Compact, or Invisible
- Badge Position: For invisible mode positioning
- Challenge Type: Image or Audio preference
For development and testing, you can use Google's test keys:
| Key | Value |
|-----|-------|
| Site Key | 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI |6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
| Secret Key | |
These keys will always pass verification and should only be used for testing.
The control stores the verification token in the form control value. This token should be verified server-side using Google's siteverify API:
`bash``
POST https://www.google.com/recaptcha/api/siteverify
secret=your-secret-key
response=token-from-client
See Google's reCAPTCHA documentation for more details.