svelte-recaptcha-v2

Features

Demonstration

Getting Started

# install as a development dependencypnpm install -D svelte-recaptcha-v2

Basic Usage

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. */constgoogleRecaptchaSiteKey="replace_with_yours";

<Recaptchasitekey={googleRecaptchaSiteKey}badge={"top"}size={"invisible"}on:success={onCaptchaSuccess}on:error={onCaptchaError}on:expired={onCaptchaExpire}on:close={onCaptchaClose}on:ready={onCaptchaReady} />

constonCaptchaReady=(event)=>{console.log("recaptcha init has completed.")/*     │You can enable your form button here.     */};constonCaptchaSuccess=(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.     */};constonCaptchaError=(event)=>{console.log("recaptcha init has failed.");/*     │Usually due to incorrect siteKey.     |Make sure you have the correct siteKey..     */};constonCaptchaExpire=(event)=>{console.log("recaptcha api has expired");/*     │Normally, you wouldn't need to do anything.     │Recaptcha should reinit itself automatically.     */};constonCaptchaOpen=(event)=>{console.log("google decided to challange the user");/*     │This fires when the puzzle frame pops.     */};constonCaptchaClose=(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.     */};

constsubmitHandler=async()=>{console.log("launching recaptcha");recaptcha.execute();console.log("pending for google response");constevent=awaitPromise.resolve(observer);constrecaptchaToken=event.detail?.token ?event.detail.token :false;if(!recaptchaToken){console.log("recaptcha is NOT OK");returnfalse;}console.log("token retrieved",recaptchaToken);};

Debugging

Issues

Todo