svelte-recaptcha-v2
Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
Features
Demonstration
svelte-recaptcha-v2 demo
Getting Started
pnpm install -D svelte-recaptcha-v2
Basic Usage
Import the library onto your template and update your google key:
import { Recaptcha, recaptcha, observer } from "svelte-recaptcha-v2";
const googleRecaptchaSiteKey="replace_with_yours";
In your form, add the component:
<Recaptcha
sitekey={googleRecaptchaSiteKey}
badge={"top"}
size={"invisible"}
on:success={onCaptchaSuccess}
on:error={onCaptchaError}
on:expired={onCaptchaExpire}
on:close={onCaptchaClose}
on:ready={onCaptchaReady} />
Setup your event handlers:
const onCaptchaReady = (event) => {
console.log("recaptcha init has completed.")
};
const onCaptchaSuccess = (event) => {
userTracker.resolve(event);
console.log("token received: " + event.detail.token);
};
const onCaptchaError = (event) => {
console.log("recaptcha init has failed.");
};
const onCaptchaExpire = (event) => {
console.log("recaptcha api has expired");
};
const onCaptchaOpen = (event) => {
console.log("google decided to challange the user");
};
const onCaptchaClose = (event) => {
console.log("google decided to challange the user");
};
Update your form handler:
const submitHandler = async () => {
console.log("launching recaptcha");
recaptcha.execute();
console.log("pending for google response");
const event = await Promise.resolve(observer);
const recaptchaToken = event.detail?.token ? event.detail.token : false;
if (!recaptchaToken) {
console.log("recaptcha is NOT OK");
return false;
}
console.log("token retrieved", recaptchaToken);
};
Debugging
If you would like to enable client side debugging, add {Recaptcha}
value to your localStorage DEBUG
key.
Issues
If any trouble, please create an issue. PRs are most welcome.
Todo
- [] add recipes for validation libraries (felte, stock etc)
- [] look into mutation observers