{"id":21089210,"url":"https://github.com/basaran/svelte-recaptcha-v2","last_synced_at":"2025-10-29T08:43:06.907Z","repository":{"id":43278990,"uuid":"419505388","full_name":"basaran/svelte-recaptcha-v2","owner":"basaran","description":"Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.","archived":false,"fork":false,"pushed_at":"2023-12-28T11:51:28.000Z","size":598,"stargazers_count":43,"open_issues_count":12,"forks_count":15,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-16T11:39:14.913Z","etag":null,"topics":["recaptcha","ssr","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"https://basaran.github.io/svelte-recaptcha-v2/demo","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basaran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-20T22:16:23.000Z","updated_at":"2025-02-18T13:57:30.000Z","dependencies_parsed_at":"2024-06-21T05:48:20.577Z","dependency_job_id":"eabfe008-37a1-41d5-8e1f-2da3d2be3205","html_url":"https://github.com/basaran/svelte-recaptcha-v2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/basaran/svelte-recaptcha-v2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basaran%2Fsvelte-recaptcha-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basaran%2Fsvelte-recaptcha-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basaran%2Fsvelte-recaptcha-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basaran%2Fsvelte-recaptcha-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basaran","download_url":"https://codeload.github.com/basaran/svelte-recaptcha-v2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basaran%2Fsvelte-recaptcha-v2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262319313,"owners_count":23293018,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["recaptcha","ssr","svelte","sveltekit"],"created_at":"2024-11-19T21:24:22.423Z","updated_at":"2025-10-29T08:43:01.878Z","avatar_url":"https://github.com/basaran.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"![svelte-recaptcha-v2](https://user-images.githubusercontent.com/30809170/138197082-b92887d5-a875-41ee-9939-cbb8aba9ab6b.png)\n\n# svelte-recaptcha-v2\n\n[Google reCAPTCHA v2](https://developers.google.com/recaptcha/docs/display)  implementation for Svelte SPA, SSR and  sveltekit static sites.\n\n## Features\n\n - [x] svelte server side rendering (SSR) friendly.\n - [x] works with sveltekit SPA, SSR and static site adapters.\n - [x] easy integration with third party form validation libraries.\n - [x] fail-safe loader to inject recaptcha.\n - [x] invisible recaptcha or checkbox recaptcha support.\n - [x] event model for intercepting various recaptcha states.\n - [x] handle all your form logic in a single submit handler.\n - [x] proper DOM cleanup (deletes recaptcha completely)\n - [x] documented, debug.js friendly source code.\n - [x] typescript definitions are included for LSP.\n\n## Demonstration\n[svelte-recaptcha-v2 demo](https://basaran.github.io/svelte-recaptcha-v2/)\n\n## Getting Started\n```bash\n# install as a development dependency\npnpm install -D svelte-recaptcha-v2\n```\n\n## Basic Usage\n\nImport the library onto your template and update your google key:\n\n```js\nimport { Recaptcha, recaptcha, observer } from \"svelte-recaptcha-v2\";\n/*\n │Recaptcha: svelte \u003cRecaptcha\u003e component.\n │recaptcha: google method, gives you recaptcha.execute().\n │observer: allows you to track captcha state across components.\n */\n\nconst googleRecaptchaSiteKey=\"replace_with_yours\";\n```\n\nIn your form, add the component:\n\n```svelte\n\u003cRecaptcha\n    sitekey={googleRecaptchaSiteKey}\n    badge={\"top\"}\n    size={\"invisible\"}\n    on:success={onCaptchaSuccess}\n    on:error={onCaptchaError}\n    on:expired={onCaptchaExpire}\n    on:close={onCaptchaClose}\n    on:ready={onCaptchaReady} /\u003e\n```\n\nSetup your event handlers:\n\n```js\nconst onCaptchaReady = (event) =\u003e {\n    console.log(\"recaptcha init has completed.\")\n    /*\n     │You can enable your form button here.\n     */\n};\n\nconst onCaptchaSuccess = (event) =\u003e {\n    userTracker.resolve(event);\n    console.log(\"token received: \" + event.detail.token);\n    /*\n     │If using checkbox method, you can attach your\n     │form logic here, or dispatch your custom event.\n     */\n};\n\nconst onCaptchaError = (event) =\u003e {\n    console.log(\"recaptcha init has failed.\");\n    /*\n     │Usually due to incorrect siteKey.\n     |Make sure you have the correct siteKey..\n     */\n};\n\nconst onCaptchaExpire = (event) =\u003e {\n    console.log(\"recaptcha api has expired\");\n    /*\n     │Normally, you wouldn't need to do anything.\n     │Recaptcha should reinit itself automatically.\n     */\n};\n\nconst onCaptchaOpen = (event) =\u003e {\n    console.log(\"google decided to challange the user\");\n    /*\n     │This fires when the puzzle frame pops.\n     */\n};\n\nconst onCaptchaClose = (event) =\u003e {\n    console.log(\"google decided to challange the user\");\n    /*\n     │This fires when the puzzle frame closes.\n     │Usually happens when the user clicks outside\n     |the modal frame.\n     */\n};\n```\n\nUpdate your form handler:\n\n```js\nconst submitHandler = async () =\u003e {\n    console.log(\"launching recaptcha\");\n    recaptcha.execute();\n\n    console.log(\"pending for google response\");\n    const event = await Promise.resolve(observer);\n\n    const recaptchaToken = event.detail?.token ? event.detail.token : false;\n\n    if (!recaptchaToken) {\n        console.log(\"recaptcha is NOT OK\");\n        return false;\n    }\n\n    console.log(\"token retrieved\", recaptchaToken);\n};\n```\n\n## Debugging\n\nIf you would like to enable client side debugging, add `{Recaptcha}` value to your localStorage `DEBUG` key.\n\n## Issues\n\nIf any trouble, please create an issue. PRs are most welcome.\n\n## Todo\n\n- [] add recipes for validation libraries (felte, stock etc)\n- [] look into mutation observers\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasaran%2Fsvelte-recaptcha-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasaran%2Fsvelte-recaptcha-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasaran%2Fsvelte-recaptcha-v2/lists"}