Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basaran/svelte-recaptcha-v2
Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
https://github.com/basaran/svelte-recaptcha-v2
recaptcha ssr svelte sveltekit
Last synced: about 3 hours ago
JSON representation
Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
- Host: GitHub
- URL: https://github.com/basaran/svelte-recaptcha-v2
- Owner: basaran
- License: mit
- Created: 2021-10-20T22:16:23.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-28T11:51:28.000Z (11 months ago)
- Last Synced: 2024-11-09T06:19:12.341Z (11 days ago)
- Topics: recaptcha, ssr, svelte, sveltekit
- Language: Svelte
- Homepage: https://basaran.github.io/svelte-recaptcha-v2/demo
- Size: 584 KB
- Stars: 42
- Watchers: 3
- Forks: 15
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-recaptcha-v2
[Google reCAPTCHA v2](https://developers.google.com/recaptcha/docs/display) implementation for Svelte SPA, SSR and sveltekit static sites.
## Features
- [x] svelte server side rendering (SSR) friendly.
- [x] works with sveltekit SPA, SSR and static site adapters.
- [x] easy integration with third party form validation libraries.
- [x] fail-safe loader to inject recaptcha.
- [x] invisible recaptcha or checkbox recaptcha support.
- [x] event model for intercepting various recaptcha states.
- [x] handle all your form logic in a single submit handler.
- [x] proper DOM cleanup (deletes recaptcha completely)
- [x] documented, debug.js friendly source code.
- [x] typescript definitions are included for LSP.
## Demonstration
[svelte-recaptcha-v2 demo](https://basaran.github.io/svelte-recaptcha-v2/)
## Getting Started
```bash
# install as a development dependency
pnpm install -D svelte-recaptcha-v2
```
## Basic Usage
Import the library onto your template and update your google key:
```js
import { Recaptcha, recaptcha, observer } from "svelte-recaptcha-v2";
/*
│Recaptcha: svelte component.
│recaptcha: google method, gives you recaptcha.execute().
│observer: allows you to track captcha state across components.
*/
const googleRecaptchaSiteKey="replace_with_yours";
```
In your form, add the component:
```svelte
```
Setup your event handlers:
```js
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:
```js
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