@captchacat/svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Captchacat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# @captchacat/svelte
+
+Svelte/SvelteKit integration for Captchacat.
+
+GitHub: https://github.com/Captchacat-Integrations/Svelte
+
+## Installation
+
+```bash
+npm install @captchacat/svelte
+```
+
+## Usage
+
+### Basic Form (Recommended)
+
+The captcha token is automatically added as a hidden `captchacat-token` field when the user completes verification.
+
+```svelte
+<script>
+  import { Captchacat } from '@captchacat/svelte';
+</script>
+
+<form action="/api/login" method="POST">
+  <input name="email" type="email" />
+  <input name="password" type="password" />
+  <Captchacat siteKey="your-site-key" />
+  <button type="submit">Login</button>
+</form>
+```
+
+### With Callback (Optional)
+
+Use `on:verify` if you need to know when verification completes (e.g., enable submit button).
+
+```svelte
+<script lang="ts">
+  import { Captchacat } from '@captchacat/svelte';
+
+  let isVerified = false;
+
+  function handleVerify(event: CustomEvent<string>) {
+    console.log('Token:', event.detail);
+    isVerified = true;
+  }
+</script>
+
+<Captchacat siteKey="your-site-key" on:verify={handleVerify} />
+<button disabled={!isVerified}>Submit</button>
+```
+
+## Server-Side Validation
+
+Validate the `captchacat-token` from the form submission:
+
+```typescript
+// src/routes/api/login/+server.ts
+import { validateCaptchacatToken } from "@captchacat/svelte/server";
+import { json, error } from "@sveltejs/kit";
+
+export const POST = async ({ request }) => {
+  const formData = await request.formData();
+  const token = formData.get("captchacat-token") as string;
+
+  const result = await validateCaptchacatToken({
+    apiKey: process.env.CAPTCHACAT_API_KEY!,
+    token,
+  });
+
+  if (!result.valid) {
+    throw error(403, "Captcha failed");
+  }
+
+  // Captcha valid - proceed with login
+  const email = formData.get("email");
+  const password = formData.get("password");
+  // ...
+
+  return json({ success: true });
+};
+```
+
+## API
+
+### `<Captchacat />`
+
+| Prop      | Type     | Required | Description                      |
+| --------- | -------- | -------- | -------------------------------- |
+| `siteKey` | `string` | Yes      | Your site key from the dashboard |
+
+| Event    | Payload  | Description                     |
+| -------- | -------- | ------------------------------- |
+| `verify` | `string` | Emitted on verification success |
+
+### `validateCaptchacatToken(options)`
+
+| Option   | Type     | Required |
+| -------- | -------- | -------- |
+| `apiKey` | `string` | Yes      |
+| `token`  | `string` | Yes      |
+
+Returns: `Promise<{ valid: boolean, message?: string, rawResponse?: unknown }>`

package/dist/Captchacat.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import { onMount, onDestroy } from "svelte";
+import { createEventDispatcher } from "svelte";
+import "./global.d.ts";
+const BASE_URL = "https://challenge.captchacat.com";
+export let siteKey;
+const dispatch = createEventDispatcher();
+let containerRef;
+let callbackName = "";
+onMount(() => {
+  callbackName = `captchacat_cb_${Math.random().toString(36).substring(7)}`;
+  window[callbackName] = (token) => {
+    dispatch("verify", token);
+  };
+  const scriptUrl = `${BASE_URL}/ray/widget.js`;
+  const handleInit = () => {
+    if (window.Captchacat?.render && containerRef) {
+      window.Captchacat.render(containerRef);
+    }
+  };
+  let script = document.querySelector(
+    `script[src="${scriptUrl}"]`
+  );
+  if (!script) {
+    script = document.createElement("script");
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = handleInit;
+    document.body.appendChild(script);
+  } else {
+    if (window.Captchacat) {
+      handleInit();
+    } else {
+      script.addEventListener("load", handleInit);
+    }
+  }
+});
+onDestroy(() => {
+  if (callbackName && typeof window !== "undefined") {
+    delete window[callbackName];
+  }
+  if (containerRef) {
+    containerRef.innerHTML = "";
+  }
+});
+$: if (siteKey && typeof window !== "undefined" && window.Captchacat?.render && containerRef) {
+  containerRef.innerHTML = "";
+  window.Captchacat.render(containerRef);
+}
+</script>
+
+<div
+  bind:this={containerRef}
+  class="captcha-widget"
+  data-sitekey={siteKey}
+  data-token-callback={callbackName}
+  style="min-height: 48px;"
+></div>

package/dist/Captchacat.svelte.d.ts

@@ -0,0 +1,23 @@
+import './global.d.ts';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Captchacat: $$__sveltets_2_IsomorphicComponent<{
+    siteKey: string;
+}, {
+    verify: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Captchacat = InstanceType<typeof Captchacat>;
+export default Captchacat;

package/dist/global.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  interface Window {
+    Captchacat?: {
+      render: (container?: HTMLElement) => void;
+    };
+    [key: string]: unknown;
+  }
+}
+
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as Captchacat } from './Captchacat.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as Captchacat } from './Captchacat.svelte';

package/dist/server.d.ts

@@ -0,0 +1,13 @@
+export interface ValidationResponse {
+    valid: boolean;
+    message?: string;
+    rawResponse?: unknown;
+}
+export interface ValidationOptions {
+    apiKey: string;
+    token: string;
+}
+/**
+ * Validates the Captchacat token server-side.
+ */
+export declare function validateCaptchacatToken(options: ValidationOptions): Promise<ValidationResponse>;

package/dist/server.js

@@ -0,0 +1,30 @@
+/**
+ * Validates the Captchacat token server-side.
+ */
+export async function validateCaptchacatToken(options) {
+    const { apiKey, token } = options;
+    try {
+        const response = await fetch('https://challenge.captchacat.com/validate_token', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                api_key: apiKey,
+                token: token,
+            }),
+        });
+        if (!response.ok) {
+            return { valid: false, message: `Server error: ${response.status}` };
+        }
+        const text = await response.text();
+        const data = text ? JSON.parse(text) : null;
+        return { valid: true, rawResponse: data };
+    }
+    catch (error) {
+        return {
+            valid: false,
+            message: error instanceof Error ? error.message : 'Unknown validation error',
+        };
+    }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@captchacat/svelte",
+  "version": "0.1.0",
+  "description": "Svelte/SvelteKit integration for Captchacat",
+  "author": "Captchacat",
+  "homepage": "https://captchacat.com",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "package": "svelte-kit sync && svelte-package -o dist",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  },
+  "keywords": [
+    "captcha",
+    "captchacat",
+    "svelte",
+    "sveltekit",
+    "bot-detection"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Captchacat-Integrations/Svelte"
+  }
+}