Migrate to Prosopo Procaptcha

.env.example

@@ -32,3 +32,11 @@ SMF_CONFIG_DB_PORT=5432
 SMF_CONFIG_DB_USERNAME=postgres
 SMF_CONFIG_DB_PASSWORD=postgres
 SMF_CONFIG_DB_DATABASE_NAME=faucet
+
+# Captcha provider details
+SMF_CONFIG_CAPTCHA_PROVIDER=procaptcha
+SMF_CONFIG_PROSOPO_DEFAULT_ENVIRONMENT=production
+SMF_CONFIG_PROSOPO_DEFAULT_NETWORK=rococo
+SMF_CONFIG_PROSOPO_DAPP_NAME=Polkadot
+SMF_CONFIG_PROSOPO_SUBSTRATE_ENDPOINT=wss://rococo-contracts-rpc.polkadot.io:443
+SMF_CONFIG_PROSOPO_SITE_KEY=5C4hrfjw9DjXZTzV3MwzrrAr9P1MJhSrvWGWqi1eSuyUpnhM

.eslintignore

@@ -1,3 +1,3 @@
 data
 build
-test
+test

.github/workflows/E2E.yml

@@ -26,11 +26,12 @@ jobs:
       - name: Run a local relaychain with a parachain using zombienet
         run: |
           export PATH=$(pwd):$PATH
-          npx --yes @zombienet/[email protected].43 \
+          npx --yes @zombienet/[email protected].86 -l text \
             --provider native spawn zombienet.native.toml \
             > polkadot.txt 2>&1 &
-          source wait_until.sh 'curl -s "127.0.0.1:9933"'
+          source wait_until.sh 'curl -s "127.0.0.1:9923"'
           source wait_until.sh 'curl -s "127.0.0.1:9934"'
+          source wait_until.sh 'curl -s "127.0.0.1:9988"'
         working-directory: e2e
       - name: Build faucet
         run: yarn build:docker

README.md

@@ -51,7 +51,7 @@ Example requests:
 curl -X POST \
   localhost:5555/drip/web \
   -H "Content-Type: application/json" \
-  -d '{"address": "xxx", "parachain_id": "1002", "recaptcha": "captcha_token"}'
+  -d '{"address": "xxx", "parachain_id": "1002", "captchaResponse": "captcha_token"}'
 ```
 
 In React:
@@ -76,7 +76,7 @@ const request = async () => {
   const body = {
     address: "xxx",
     parachain_id: "1002",
-    recaptcha: captcha_token
+    captchaResponse: captcha_token
   }
 
   const fetchResult = await fetch("http://localhost:5555/drip/web", {
@@ -89,15 +89,26 @@ const request = async () => {
 }
 ```
 
-Where the `captcha_token` is a recaptcha token created with a `sitekey`
-is matching the recaptcha secret specified in `SMF_BACKEND_RECAPTCHA_SECRET`.
+Where the `captcha_token` is either a
 
-For testing, you can use a public, testing recaptcha secret which will allow any captcha token to pass.
+- JSON payload that includes a verified rococo address [procaptcha](https://prosopo.io)
 
-```shell
-# Public testing secret, will accept all tokens.
-SMF_BACKEND_RECAPTCHA_SECRET="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe"
-```
+or
+
+- a recaptcha token created with a `sitekey` matching the [recaptcha](https://developers.google.com/recaptcha/) secret specified in `SMF_BACKEND_RECAPTCHA_SECRET`.
+
+For testing, you can use
+
+- Alice's address `5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY` with procaptcha
+
+or
+
+- a public, testing captcha secret which will allow any captcha token to pass with recaptcha.
+
+  ```shell
+  # Public testing secret, will accept all tokens.
+  SMF_BACKEND_RECAPTCHA_SECRET="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe"
+  ```
 
 ### Helm chart
 

client/.env

@@ -1,9 +1,13 @@
 PUBLIC_DEMO_MODE=
-PUBLIC_CAPTCHA_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+PUBLIC_RECAPTCHA_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+PUBLIC_PROSOPO_SITE_KEY=5C4hrfjw9DjXZTzV3MwzrrAr9P1MJhSrvWGWqi1eSuyUpnhM
 
 PUBLIC_FAUCET_URL=
 # uncomment to direct requests to local instance
 # PUBLIC_FAUCET_URL=http://localhost:5555/drip/web/
 
 PUBLIC_ISSUE_LINK=https://github.com/paritytech/polkadot-testnet-faucet/issues/new/choose
 PUBLIC_FORUM="https://forum.polkadot.network/t/experiencing-trouble-accessing-our-rococo-faucet-please-post-here/2952"
+PUBLIC_CAPTCHA_PROVIDER=procaptcha
+
+

client/README.md

@@ -10,9 +10,11 @@ Two current options are to [access Matrix and contact a bot](https://wiki.polkad
 
 ## Development
 
-To develop you need two env variables:
+To develop you need three env variables:
 
-- `PUBLIC_CAPTCHA_KEY`: The [reCaptcha v2 site key](https://www.google.com/u/0/recaptcha/admin).
+- `PUBLIC_CAPTCHA_PROVIDER`: The captcha provider. Currently `procaptcha` and `recaptcha` are supported. You will then need one of the following site keys:
+    - `PUBLIC_PROSOPO_SITE_KEY`: The [Prosopo site key](https://prosopo.io/) which is `5HUBceb4Du6dvMA9BiwN5VzUrzUsX9Zp7z7nSR2cC1TCv5jg`.
+    - `PUBLIC_RECAPTCHA_KEY`: The [reCaptcha v2 site key](https://www.google.com/u/0/recaptcha/admin).
 - `PUBLIC_FAUCET_URL`: The endpoint to contact the faucet backend. Keep unset to run client-side code with production backend.
 
 The reason for which these variables have `PUBLIC_` as a prefix is a security measure to not upload any unnecessary data. [More info here](https://kit.svelte.dev/docs/modules#$env-static-public)

client/package.json

@@ -6,7 +6,9 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "playwright test",
+    "test:recaptcha": "playwright test --config playwright.config.recaptcha.ts",
+    "test:procaptcha": "playwright test --config playwright.config.procaptcha.ts",
+    "test": "yarn test:recaptcha && yarn test:procaptcha",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
@@ -20,10 +22,13 @@
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.4.4",
     "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.0.3",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.1",
     "svelte-markdown": "^0.4.0",
     "svelte-meta-tags": "^3.1.0",
+    "svelte-preprocess": "^5.1.1",
     "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.3.2",

client/playwright.config.procaptcha.ts

@@ -0,0 +1,17 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: "npm run build && npm run preview",
+    port: 4173,
+    env: {
+      PUBLIC_CAPTCHA_PROVIDER: "procaptcha",
+      PUBLIC_PROSOPO_SITE_KEY: "5HUBceb4Du6dvMA9BiwN5VzUrzUsX9Zp7z7nSR2cC1TCv5jg",
+      PUBLIC_DEMO_MODE: "",
+      PUBLIC_FAUCET_URL: "https://example.com/test",
+    },
+  },
+  testDir: "tests",
+};
+
+export default config;

client/playwright.config.ts → client/playwright.config.recaptcha.ts

@@ -5,11 +5,13 @@ const config: PlaywrightTestConfig = {
     command: "npm run build && npm run preview",
     port: 4173,
     env: {
-      PUBLIC_CAPTCHA_KEY: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
+      PUBLIC_CAPTCHA_PROVIDER: "recaptcha",
+      PUBLIC_RECAPTCHA_KEY: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
       PUBLIC_DEMO_MODE: "",
       PUBLIC_FAUCET_URL: "https://example.com/test",
     },
   },
+
   testDir: "tests",
 };
 

client/src/app.d.ts

@@ -9,14 +9,14 @@ declare global {
   }
 
   declare interface Window {
-    grecaptcha?: Captcha;
+    grecaptcha?: Recaptcha;
+    procaptcha?: Procaptcha;
     captchaLoaded: () => void;
     onToken: (token: string) => void;
     onExpiredToken: () => void;
   }
 }
-
-interface Captcha {
+interface Recaptcha {
   render: (
     element: string,
     key: {
@@ -30,4 +30,17 @@ interface Captcha {
   getResponse: () => string;
 }
 
+interface Procaptcha {
+  render: (
+    element: string,
+    key: {
+      siteKey: string;
+      callback?: string;
+      theme?: "light" | "dark";
+      "chalexpired-callback"?: string;
+    },
+  ) => void;
+  default: (callback: () => void) => void;
+}
+
 export {};

client/src/lib/components/CaptchaV2.svelte

@@ -1,9 +1,10 @@
-<script lang="ts">
+<script type="module" lang="ts">
   import { createEventDispatcher, onMount } from "svelte";
   import Cross from "./icons/Cross.svelte";
+  import { CaptchaProvider } from "$lib/utils/captcha";
 
   export let captchaKey: string;
-
+  export let captchaProvider: string;
   const dispatch = createEventDispatcher<{ token: string }>();
 
   const captchaId = "captcha_element";
@@ -13,7 +14,7 @@
   let componentMounted: boolean;
 
   onMount(() => {
-    window.captchaLoaded = () => {
+    window.captchaLoaded = async () => {
       const colorTheme =
         theme === "auto"
           ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -22,21 +23,42 @@
           : theme;
       const mobileScreen = window.innerHeight > window.innerWidth;
 
-      if (!window.grecaptcha) {
+      if (captchaProvider === CaptchaProvider.procaptcha) {
+        if (!window.procaptcha) {
+          captchaError = true;
+          throw new Error(`${captchaProvider} is undefined!`);
+        }
+        window.procaptcha.render(captchaId, {
+          siteKey: captchaKey,
+          theme: colorTheme,
+          callback: "onToken",
+          "chalexpired-callback": "onExpiredToken",
+        });
+      } else if (captchaProvider === CaptchaProvider.recaptcha) {
+        if (!window.grecaptcha) {
+          captchaError = true;
+          throw new Error("grecaptcha is undefined!");
+        }
+        window.grecaptcha.render(captchaId, {
+          sitekey: captchaKey,
+          theme: colorTheme,
+          callback: "onToken",
+          size: mobileScreen ? "compact" : "normal",
+          "expired-callback": "onExpiredToken",
+        });
+      } else {
         captchaError = true;
-        throw new Error("grecaptcha is undefined!");
+        throw new Error(`Unknown captcha provider: ${captchaProvider}`);
       }
-      window.grecaptcha.render(captchaId, {
-        sitekey: captchaKey,
-        theme: colorTheme,
-        callback: "onToken",
-        size: mobileScreen ? "compact" : "normal",
-        "expired-callback": "onExpiredToken",
-      });
     };
 
     window.onToken = (token) => {
       dispatch("token", token);
+      // Forces a new captcha on page reload
+      if (captchaProvider === CaptchaProvider.procaptcha) {
+        window.localStorage.removeItem("@prosopo/current_account");
+        window.localStorage.removeItem("@prosopo/provider");
+      }
     };
 
     // clean the token so the form becomes invalid
@@ -52,15 +74,24 @@
 
 <svelte:head>
   {#if componentMounted}
-    <script src="https://www.google.com/recaptcha/api.js?onload=captchaLoaded&render=explicit" async defer></script>
+    {#if captchaProvider === "procaptcha"}
+      <script
+        type="module"
+        src="https://js.prosopo.io/js/procaptcha.bundle.js?render=implicit&onload=captchaLoaded"
+        async
+        defer
+      ></script>
+    {:else}
+      <script src="https://www.google.com/recaptcha/api.js?onload=captchaLoaded&render=explicit" async defer></script>
+    {/if}
   {/if}
 </svelte:head>
 
 {#if captchaError}
   <div class="alert alert-error shadow-lg" data-testid="error">
     <div>
       <Cross />
-      <span>Error loading Google Captcha. Please reload the page.</span>
+      <span>Error loading {captchaProvider} Captcha. Please reload the page.</span>
     </div>
   </div>
 {/if}

client/src/lib/components/Form.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { PUBLIC_CAPTCHA_KEY } from "$env/static/public";
-  import type { NetworkData } from "$lib/utils/networkData";
+  import { PUBLIC_CAPTCHA_PROVIDER, PUBLIC_PROSOPO_SITE_KEY, PUBLIC_RECAPTCHA_KEY } from "$env/static/public";
   import { operation, testnet } from "$lib/utils/stores";
   import { request as faucetRequest } from "../utils";
   import CaptchaV2 from "./CaptchaV2.svelte";
-  import NetworkDropdown from "./NetworkDropdown.svelte";
   import NetworkInput from "./NetworkInput.svelte";
+  import { CaptchaProvider } from "$lib/utils/captcha";
+  import NetworkDropdown from "./NetworkDropdown.svelte";
+  import type { NetworkData } from "$lib/utils/networkData";
 
   let address: string = "";
   export let network: number = -1;
@@ -58,7 +59,14 @@
   </div>
   {#if !webRequest}
     <div class="grid place-items-center">
-      <CaptchaV2 captchaKey={PUBLIC_CAPTCHA_KEY ?? ""} on:token={onToken} theme="dark" />
+      <CaptchaV2
+        captchaKey={PUBLIC_CAPTCHA_PROVIDER === CaptchaProvider.procaptcha
+          ? PUBLIC_PROSOPO_SITE_KEY
+          : PUBLIC_RECAPTCHA_KEY}
+        captchaProvider={PUBLIC_CAPTCHA_PROVIDER}
+        on:token={onToken}
+        theme="dark"
+      />
     </div>
     <button class="submit-btn" type="submit" data-testid="submit-button" disabled={!formValid}>
       Get some {$testnet.currency}s

client/src/lib/utils/captcha.ts

@@ -0,0 +1,4 @@
+export enum CaptchaProvider {
+  procaptcha = "procaptcha",
+  recaptcha = "recaptcha",
+}

client/src/lib/utils/faucetRequest.ts

@@ -4,24 +4,24 @@ import type { NetworkData } from "./networkData";
 
 export async function request(
   address: string,
-  recaptcha: string,
+  captchaResponse: string,
   network: NetworkData,
   parachain?: number,
 ): Promise<string> {
   if (DEMO !== undefined && DEMO !== "") {
     return await boilerplateRequest(address);
   }
   const chain = parachain && parachain > 0 ? parachain.toString() : undefined;
-  return await faucetRequest(address, recaptcha, network, chain);
+  return await faucetRequest(address, captchaResponse, network, chain);
 }
 
 export async function faucetRequest(
   address: string,
-  recaptcha: string,
+  captchaResponse: string,
   network: NetworkData,
   parachain_id?: string,
 ): Promise<string> {
-  const body = { address, parachain_id, recaptcha };
+  const body = { address, parachain_id, captchaResponse };
 
   const url = network.endpoint;
   if (!url) {