demo keys

src/content/docs/en/basics/demo-keys.mdx

@@ -0,0 +1,116 @@
+---
+title: Demo Keys
+description: Learn how to use Prosopo demo keys for testing, development, and CI/CD environments without requiring production site keys.
+i18nReady: true
+---
+
+Demo keys provide predictable CAPTCHA behavior for testing, development, and automated CI/CD pipelines. They enable you to test your integration and display a warning banner to prevent accidental production usage.
+
+## What are Demo Keys?
+
+Demo keys are special, hardcoded site keys that bypass normal CAPTCHA verification and return predictable results. They provide trivial challenges with predetermined outcomes.
+
+There are two demo keys available:
+
+### Always Pass Key
+
+**Site Key:** `5DAAnrj7VHTznn2AWBemMuyBwZWs6FNFjdyVXUeYum3PTXFy`
+
+This key provides trivial CAPTCHA challenges that automatically verify successfully. Use this for testing success flows, UI states, and happy path scenarios.
+
+**Behavior:**
+- Presents a trivial PoW challenge with difficulty 1
+- Verification always succeeds
+- `onCaptchaVerified` callback is triggered
+- Red warning banner displays on the widget
+
+### Always Fail Key
+
+**Site Key:** `5CiPPseXPECbkjWCa6MnjNokrgYjMqmKndv2rSnekmSK2DjL`
+
+This key provides trivial CAPTCHA challenges that always fail verification. Use this for testing error handling, failure flows, and UI error states.
+
+**Behavior:**
+- Presents a trivial PoW challenge with difficulty 1
+- Verification always fails
+- `onCaptchaFailed` callback is triggered
+- Red warning banner displays on the widget
+- User can retry the challenge
+
+## When to Use Demo Keys
+
+Demo keys are appropriate for:
+
+- **Local Development** - Test your integration without a production site key
+- **CI/CD Pipelines** - Automated testing where you need predictable CAPTCHA behavior
+- **Unit and Integration Tests** - Test both success and failure code paths
+- **Prototyping** - Quick integration testing during development
+- **Demo Environments** - Showcase integration without real CAPTCHA challenges
+
+## When NOT to Use Demo Keys
+
+Demo keys should NEVER be used in:
+
+- **Production Environments** - Demo keys are automatically disabled when `NODE_ENV=production`
+- **Staging Environments** - Use real site keys to test actual CAPTCHA behavior
+- **User Acceptance Testing** - Real site keys ensure accurate testing of the user experience
+- **Load Testing** - Demo keys don't reflect real provider performance
+
+## Using Demo Keys
+
+### HTML/JavaScript
+
+```html
+<div class="procaptcha"
+     data-sitekey="5DAAnrj7VHTznn2AWBemMuyBwZWs6FNFjdyVXUeYum3PTXFy"
+     data-callback="onSuccess"
+     data-failed-callback="onFailure"
+     data-captcha-type="frictionless">
+</div>
+```
+
+### React
+
+```jsx
+import { Procaptcha } from '@prosopo/procaptcha-react';
+
+function MyComponent() {
+  return (
+    <Procaptcha
+      siteKey="5DAAnrj7VHTznn2AWBemMuyBwZWs6FNFjdyVXUeYum3PTXFy"
+      onVerified={(output) => console.log('Verified:', output)}
+      onFailed={() => console.log('Failed')}
+      captchaType="frictionless"
+    />
+  );
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <Procaptcha
+    site-key="5DAAnrj7VHTznn2AWBemMuyBwZWs6FNFjdyVXUeYum3PTXFy"
+    @verified="onVerified"
+    @failed="onFailed"
+    captcha-type="frictionless"
+  />
+</template>
+
+<script>
+import { Procaptcha } from '@prosopo/procaptcha-vue';
+
+export default {
+  components: { Procaptcha },
+  methods: {
+    onVerified(output) {
+      console.log('Verified:', output);
+    },
+    onFailed() {
+      console.log('Failed');
+    }
+  }
+};
+</script>
+```

src/i18n/en/nav.ts

@@ -55,6 +55,11 @@ export default [
         slug: 'basics/faq',
         key: 'basics/faq',
     },
+    {
+        text: 'Demo Keys',
+        slug: 'basics/demo-keys',
+        key: 'basics/demo-keys',
+    },
     {text: 'Advanced Usage', header: true, type: 'learn', key: 'advanced'},
         {
         text: 'Context Awareness',

vercel.json

@@ -130,6 +130,14 @@
     {
       "source": "/:lang/recipes/",
       "destination": "/:lang/community-resources/content/"
+    },
+    {
+      "source": "/demo-keys/",
+      "destination": "/en/basics/demo-keys/"
+    },
+    {
+      "source": "/:lang/demo-keys/",
+      "destination": "/:lang/basics/demo-keys/"
     }
   ]
 }