{"_id":"@arkangel-dev/svelte-recaptcha-v2","name":"@arkangel-dev/svelte-recaptcha-v2","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.5":{"name":"@arkangel-dev/svelte-recaptcha-v2","version":"0.0.5","description":"Google ReCaptcha v2 implementation for Svelte and SvelteKit","scripts":{"build":"rollup -c","prepublishOnly":"yarn build"},"types":"./types/index.d.ts","svelte":"./src/index.js","module":"./dist/index.mjs","main":"./dist/index.js","repository":{"type":"git","url":"git+https://github.com/arkangel-dev/svelte-recaptcha-v2.git"},"keywords":["svelte","sveltekit","recaptcha","v2"],"author":{"name":"arkangel-dev"},"license":"MIT","bugs":{"url":"https://github.com/arkangel-dev/svelte-recaptcha-v2/pulls"},"type":"module","homepage":"https://github.com/arkangel-dev/svelte-recaptcha-v2","devDependencies":{"@rollup/plugin-commonjs":"^21.0.0","@rollup/plugin-node-resolve":"^13.0.5","@rollup/plugin-strip":"^2.1.0","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-svelte3":"^3.2.1","prettier":"^2.4.1","prettier-plugin-svelte":"^2.4.0","rollup":"^2.58.0","rollup-plugin-css-only":"^3.1.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-svelte":"^7.1.0","rollup-plugin-terser":"^7.0.2","svelte":"^3.44.0"},"dependencies":{"debug":"^4.3.2"},"gitHead":"5f8fdf478c26a035daea8038f55ebbf37e553384","_id":"@arkangel-dev/svelte-recaptcha-v2@0.0.5","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-qwrAvl8yPRYW1IjSkQfVQox9ngwbEnZjzjbJNcPcHVdIGJrymVhu4+8hpm43DBi8CL4u+FWAMllBl607RmLHkA==","shasum":"c17a2216bbaa7e4c5f5f4f818b84b686309cce7a","tarball":"https://registry.npmjs.org/@arkangel-dev/svelte-recaptcha-v2/-/svelte-recaptcha-v2-0.0.5.tgz","fileCount":10,"unpackedSize":32117,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIRrS+UPYbwUXSo8pTNEqk9yx3YV4Cs9ACC6PVrRC9PAiEA/Vph+AY9LyymiwxWHHm+u+yIci+UGK+Q6KE5qwT1jhc="}]},"_npmUser":{"name":"arkangel-dev","email":"samramirez.personal@gmail.com"},"directories":{},"maintainers":[{"name":"arkangel-dev","email":"samramirez.personal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-recaptcha-v2_0.0.5_1708186706376_0.14443144832854293"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-17T16:18:26.290Z","0.0.5":"2024-02-17T16:18:26.739Z","modified":"2024-02-17T16:18:27.672Z"},"maintainers":[{"name":"arkangel-dev","email":"samramirez.personal@gmail.com"}],"description":"Google ReCaptcha v2 implementation for Svelte and SvelteKit","homepage":"https://github.com/arkangel-dev/svelte-recaptcha-v2","keywords":["svelte","sveltekit","recaptcha","v2"],"repository":{"type":"git","url":"git+https://github.com/arkangel-dev/svelte-recaptcha-v2.git"},"author":{"name":"arkangel-dev"},"bugs":{"url":"https://github.com/arkangel-dev/svelte-recaptcha-v2/pulls"},"license":"MIT","readme":"![svelte-recaptcha-v2](https://user-images.githubusercontent.com/30809170/138197082-b92887d5-a875-41ee-9939-cbb8aba9ab6b.png)\r\n\r\n# svelte-recaptcha-v2\r\n\r\n[Google reCAPTCHA v2](https://developers.google.com/recaptcha/docs/display)  implementation for Svelte SPA, SSR and  sveltekit static sites.\r\n\r\n## Features\r\n\r\n - [x] svelte server side rendering (SSR) friendly.\r\n - [x] works with sveltekit SPA, SSR and static site adapters.\r\n - [x] easy integration with third party form validation libraries.\r\n - [x] fail-safe loader to inject recaptcha.\r\n - [x] invisible recaptcha or checkbox recaptcha support.\r\n - [x] event model for intercepting various recaptcha states.\r\n - [x] handle all your form logic in a single submit handler.\r\n - [x] proper DOM cleanup (deletes recaptcha completely)\r\n - [x] documented, debug.js friendly source code.\r\n - [x] typescript definitions are included for LSP.\r\n\r\n## Demonstration\r\n[svelte-recaptcha-v2 demo](https://basaran.github.io/svelte-recaptcha-v2/)\r\n\r\n## Getting Started\r\n```bash\r\n# install as a development dependency\r\npnpm install -D svelte-recaptcha-v2\r\n```\r\n\r\n## Basic Usage\r\n\r\nImport the library onto your template and update your google key:\r\n\r\n```js\r\nimport { Recaptcha, recaptcha, observer } from \"svelte-recaptcha-v2\";\r\n/*\r\n │Recaptcha: svelte <Recaptcha> component.\r\n │recaptcha: google method, gives you recaptcha.execute().\r\n │observer: allows you to track captcha state across components.\r\n */\r\n\r\nconst googleRecaptchaSiteKey=\"replace_with_yours\";\r\n```\r\n\r\nIn your form, add the component:\r\n\r\n```svelte\r\n<Recaptcha\r\n    sitekey={googleRecaptchaSiteKey}\r\n    badge={\"top\"}\r\n    size={\"invisible\"}\r\n    theme={\"light\"}\r\n    on:success={onCaptchaSuccess}\r\n    on:error={onCaptchaError}\r\n    on:expired={onCaptchaExpire}\r\n    on:close={onCaptchaClose}\r\n    on:ready={onCaptchaReady} />\r\n```\r\n\r\nSetup your event handlers:\r\n\r\n```js\r\nconst onCaptchaReady = (event) => {\r\n    console.log(\"recaptcha init has completed.\")\r\n    /*\r\n     │You can enable your form button here.\r\n     */\r\n};\r\n\r\nconst onCaptchaSuccess = (event) => {\r\n    userTracker.resolve(event);\r\n    console.log(\"token received: \" + event.detail.token);\r\n    /*\r\n     │If using checkbox method, you can attach your\r\n     │form logic here, or dispatch your custom event.\r\n     */\r\n};\r\n\r\nconst onCaptchaError = (event) => {\r\n    console.log(\"recaptcha init has failed.\");\r\n    /*\r\n     │Usually due to incorrect siteKey.\r\n     |Make sure you have the correct siteKey..\r\n     */\r\n};\r\n\r\nconst onCaptchaExpire = (event) => {\r\n    console.log(\"recaptcha api has expired\");\r\n    /*\r\n     │Normally, you wouldn't need to do anything.\r\n     │Recaptcha should reinit itself automatically.\r\n     */\r\n};\r\n\r\nconst onCaptchaOpen = (event) => {\r\n    console.log(\"google decided to challange the user\");\r\n    /*\r\n     │This fires when the puzzle frame pops.\r\n     */\r\n};\r\n\r\nconst onCaptchaClose = (event) => {\r\n    console.log(\"google decided to challange the user\");\r\n    /*\r\n     │This fires when the puzzle frame closes.\r\n     │Usually happens when the user clicks outside\r\n     |the modal frame.\r\n     */\r\n};\r\n```\r\n\r\nUpdate your form handler:\r\n\r\n```js\r\nconst submitHandler = async () => {\r\n    console.log(\"launching recaptcha\");\r\n    recaptcha.execute();\r\n\r\n    console.log(\"pending for google response\");\r\n    const event = await Promise.resolve(observer);\r\n\r\n    const recaptchaToken = event.detail?.token ? event.detail.token : false;\r\n\r\n    if (!recaptchaToken) {\r\n        console.log(\"recaptcha is NOT OK\");\r\n        return false;\r\n    }\r\n\r\n    console.log(\"token retrieved\", recaptchaToken);\r\n};\r\n```\r\n\r\n## Debugging\r\n\r\nIf you would like to enable client side debugging, add `{Recaptcha}` value to your localStorage `DEBUG` key.\r\n\r\n## Issues\r\n\r\nIf any trouble, please create an issue. PRs are most welcome.\r\n\r\n## Todo\r\n\r\n- [] add recipes for validation libraries (felte, stock etc)\r\n- [] look into mutation observers\r\n","readmeFilename":"README.md"}