Package Exports
- svelte-recaptcha-v2
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-recaptcha-v2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
svelte-recaptcha-v2
Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
Features
- svelte server side rendering (SSR) friendly.
- works with sveltekit SPA, SSR and static site adapters.
- easy integration with third party form validation libraries.
- fail-safe loader to inject recaptcha.
- invisible recaptcha or checkbox recaptcha support.
- event model for intercepting various recaptcha states.
- handle all your form logic in a single submit handler.
- proper DOM cleanup (deletes recaptcha completely)
- documented, debug.js friendly source code.
- typescript definitions are included for LSP.
Demonstration
Getting Started
# install as a development dependency
pnpm install -D svelte-recaptcha-v2Basic Usage
Import the library onto your template and update your google key:
import { Recaptcha, recaptcha, observer } from "svelte-recaptcha-v2";
/*
│Recaptcha: svelte <Recaptcha> component.
│recaptcha: google method, gives you recaptcha.execute().
│observer: allows you to track captcha state across components.
*/
const googleRecaptchaSiteKey="replace_with_yours";
let observer;
/*binding for tracking recaptcha execution*/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} />
</form>Setup your event handlers:
const onCaptchaReady = (event) => {
console.log("recaptcha init has completed.")
/*
│You can enable your form button here.
*/
};
const onCaptchaSuccess = (event) => {
userTracker.resolve(event);
console.log("token received: " + event.detail.token);
/*
│If using checkbox method, you can attach your
│form logic here, or dispatch your custom event.
*/
};
const onCaptchaError = (event) => {
console.log("recaptcha init has failed.");
/*
│Usually due to incorrect siteKey.
|Make sure you have the correct siteKey..
*/
};
const onCaptchaExpire = (event) => {
console.log("recaptcha api has expired");
/*
│Normally, you wouldn't need to do anything.
│Recaptcha should reinit itself automatically.
*/
};
const onCaptchaOpen = (event) => {
console.log("google decided to challange the user");
/*
│This fires when the puzzle frame pops.
*/
};
const onCaptchaClose = (event) => {
console.log("google decided to challange the user");
/*
│This fires when the puzzle frame closes.
│Usually happens when the user clicks outside
|the modal frame.
*/
};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.