grecaptcha.ts

declare var grecaptcha: {
  ready: (callback: () => void) => void;
  execute: (siteKey: string, opts: { action: "submit" }) => Promise<string>;
};

export type CodeFunction = () => Promise<string>;

export default function(setter: (fn: CodeFunction) => void) {
  const siteKey = import.meta.env.VITE_CAPTCHA_SITE_KEY;
  createScriptLoader({
    src: `https://www.google.com/recaptcha/api.js?render=${siteKey}`,
    onload: async () => {
      grecaptcha.ready(() => {
        setter(() => grecaptcha.execute(siteKey, {
          action: "submit"
        }));
      });
    }
  });
}

// test.ts
import { onMount } from "solid-js";
import addCaptcha, { CodeFunction } from "~/lib/recaptcha";

export default function() {
  let codeFn: CodeFunction;
  onMount(() => {
    addCaptcha(fn => {
      codeFn = fn;
      console.log("Loaded captcha");
    });
  });
  const onButtonClick = async () => {
    if (!codeFn) {
      return console.error("Captcha not ready");
    }
    const token = await codeFn();
    console.log(token);
  };
  onCleanup(() => {
    // Remove badge
    for (const badge of document.body.getElementsByClassName("grecaptcha-badge")) {
      badge.remove();
    }
    // Remove injected script
    for (const script of document.head.getElementsByTagName("script")) {
      if (script.src.includes("recaptcha")) {
        script.remove();
      }
    }
  });


  return (
    <button onclick={onButtonClick}>
      Click me
    </button>
  );
}