@internetarchive/recaptcha-manager 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/src/recaptcha.js

@@ -0,0 +1,87 @@
+/**
+ * This encompasses a widget for a given site key.
+ */
+export class RecaptchaWidget {
+    constructor(config, recaptchaParams) {
+        this.widgetId = null;
+        this.siteKey = config.siteKey;
+        this.grecaptchaLibrary = config.grecaptchaLibrary;
+        const container = this.createContainer();
+        this.setup(container, recaptchaParams);
+    }
+    /** @inheritdoc */
+    async execute() {
+        const { widgetId } = this;
+        if (widgetId === null) {
+            throw new Error('Recaptcha is not setup');
+        }
+        // there is no way to know when users have dismissed a previous recaptcha
+        // so if we're still in the middle of execution when we call execute again,
+        // just reset it and execute it again
+        this.grecaptchaLibrary.reset(widgetId);
+        return new Promise((resolve, reject) => {
+            this.executionSuccessBlock = (token) => {
+                this.grecaptchaLibrary.reset(widgetId);
+                resolve(token);
+            };
+            this.executionExpiredBlock = () => {
+                this.grecaptchaLibrary.reset(widgetId);
+                reject(new Error('expired'));
+            };
+            this.executionErrorBlock = () => {
+                this.grecaptchaLibrary.reset(widgetId);
+                reject(new Error('error'));
+            };
+            this.grecaptchaLibrary.execute(widgetId);
+        });
+    }
+    /** @inheritdoc */
+    setup(container, recaptchaParams) {
+        var _a;
+        this.widgetId = this.grecaptchaLibrary.render(container, {
+            callback: this.responseHandler.bind(this),
+            'expired-callback': this.expiredHandler.bind(this),
+            'error-callback': this.errorHandler.bind(this),
+            sitekey: this.siteKey,
+            tabindex: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.tabindex,
+            theme: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.theme,
+            type: recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.type,
+            size: (_a = recaptchaParams === null || recaptchaParams === void 0 ? void 0 : recaptchaParams.size) !== null && _a !== void 0 ? _a : 'invisible',
+        });
+    }
+    createContainer() {
+        const elementId = `recaptchaManager-${this.siteKey}`;
+        let element = document.getElementById(elementId);
+        if (!element) {
+            element = document.createElement('div');
+            element.id = elementId;
+            element.style.position = 'fixed';
+            element.style.top = '50%';
+            element.style.left = '50%';
+            element.style.outline = '1px solid purple';
+            element.style.width = '10px';
+            element.style.height = '10px';
+            document.body.appendChild(element);
+        }
+        return element;
+    }
+    responseHandler(response) {
+        if (this.executionSuccessBlock) {
+            this.executionSuccessBlock(response);
+            this.executionSuccessBlock = undefined;
+        }
+    }
+    expiredHandler() {
+        if (this.executionExpiredBlock) {
+            this.executionExpiredBlock();
+            this.executionExpiredBlock = undefined;
+        }
+    }
+    errorHandler() {
+        if (this.executionErrorBlock) {
+            this.executionErrorBlock();
+            this.executionErrorBlock = undefined;
+        }
+    }
+}
+//# sourceMappingURL=recaptcha.js.map

package/dist/src/recaptcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recaptcha.js","sourceRoot":"","sources":["../../src/recaptcha.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,OAAO,eAAe;IAa1B,YACE,MAGC,EACD,eAAwC;QAPlC,aAAQ,GAAkB,IAAI,CAAC;QASrC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAElD,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;IACzC,CAAC;IAED,kBAAkB;IAClB,KAAK,CAAC,OAAO;QACX,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAE1B,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,yEAAyE;QACzE,2EAA2E;QAC3E,qCAAqC;QACrC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAEvC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,qBAAqB,GAAG,CAAC,KAAa,EAAQ,EAAE;gBACnD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACvC,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,CAAC;YAEF,IAAI,CAAC,qBAAqB,GAAG,GAAS,EAAE;gBACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACvC,MAAM,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YAC/B,CAAC,CAAC;YAEF,IAAI,CAAC,mBAAmB,GAAG,GAAS,EAAE;gBACpC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACvC,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YAC7B,CAAC,CAAC;YAEF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;IACV,KAAK,CACX,SAAsB,EACtB,eAAwC;;QAExC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,SAAS,EAAE;YACvD,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YACzC,kBAAkB,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;YAClD,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;YAC9C,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ;YACnC,KAAK,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK;YAC7B,IAAI,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI;YAC3B,IAAI,EAAE,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,IAAI,mCAAI,WAAW;SAC3C,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,MAAM,SAAS,GAAG,oBAAoB,IAAI,CAAC,OAAO,EAAE,CAAC;QACrD,IAAI,OAAO,GAAuB,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO,CAAC,EAAE,GAAG,SAAS,CAAC;YACvB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;YAC1B,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,kBAAkB,CAAC;YAC3C,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAC7B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;SACpC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,eAAe,CAAC,QAAa;QACnC,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YACrC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;SACxC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;SACxC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;SACtC;IACH,CAAC;CACF","sourcesContent":["export interface RecaptchaWidgetInterface {\n  /** execute the recaptcha request and returns a token */\n  execute(): Promise<string>;\n}\n\n/**\n * This encompasses a widget for a given site key.\n */\nexport class RecaptchaWidget implements RecaptchaWidgetInterface {\n  private executionSuccessBlock?: (token: string) => void;\n\n  private executionExpiredBlock?: () => void;\n\n  private executionErrorBlock?: () => void;\n\n  private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n\n  private siteKey: string;\n\n  private widgetId: number | null = null;\n\n  constructor(\n    config: {\n      siteKey: string;\n      grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n    },\n    recaptchaParams?: ReCaptchaV2.Parameters\n  ) {\n    this.siteKey = config.siteKey;\n    this.grecaptchaLibrary = config.grecaptchaLibrary;\n\n    const container = this.createContainer();\n    this.setup(container, recaptchaParams);\n  }\n\n  /** @inheritdoc */\n  async execute(): Promise<string> {\n    const { widgetId } = this;\n\n    if (widgetId === null) {\n      throw new Error('Recaptcha is not setup');\n    }\n\n    // there is no way to know when users have dismissed a previous recaptcha\n    // so if we're still in the middle of execution when we call execute again,\n    // just reset it and execute it again\n    this.grecaptchaLibrary.reset(widgetId);\n\n    return new Promise((resolve, reject) => {\n      this.executionSuccessBlock = (token: string): void => {\n        this.grecaptchaLibrary.reset(widgetId);\n        resolve(token);\n      };\n\n      this.executionExpiredBlock = (): void => {\n        this.grecaptchaLibrary.reset(widgetId);\n        reject(new Error('expired'));\n      };\n\n      this.executionErrorBlock = (): void => {\n        this.grecaptchaLibrary.reset(widgetId);\n        reject(new Error('error'));\n      };\n\n      this.grecaptchaLibrary.execute(widgetId);\n    });\n  }\n\n  /** @inheritdoc */\n  private setup(\n    container: HTMLElement,\n    recaptchaParams?: ReCaptchaV2.Parameters\n  ): void {\n    this.widgetId = this.grecaptchaLibrary.render(container, {\n      callback: this.responseHandler.bind(this),\n      'expired-callback': this.expiredHandler.bind(this),\n      'error-callback': this.errorHandler.bind(this),\n      sitekey: this.siteKey,\n      tabindex: recaptchaParams?.tabindex,\n      theme: recaptchaParams?.theme,\n      type: recaptchaParams?.type,\n      size: recaptchaParams?.size ?? 'invisible',\n    });\n  }\n\n  private createContainer(): HTMLElement {\n    const elementId = `recaptchaManager-${this.siteKey}`;\n    let element: HTMLElement | null = document.getElementById(elementId);\n    if (!element) {\n      element = document.createElement('div');\n      element.id = elementId;\n      element.style.position = 'fixed';\n      element.style.top = '50%';\n      element.style.left = '50%';\n      element.style.outline = '1px solid purple';\n      element.style.width = '10px';\n      element.style.height = '10px';\n      document.body.appendChild(element);\n    }\n    return element;\n  }\n\n  private responseHandler(response: any): void {\n    if (this.executionSuccessBlock) {\n      this.executionSuccessBlock(response);\n      this.executionSuccessBlock = undefined;\n    }\n  }\n\n  private expiredHandler(): void {\n    if (this.executionExpiredBlock) {\n      this.executionExpiredBlock();\n      this.executionExpiredBlock = undefined;\n    }\n  }\n\n  private errorHandler(): void {\n    if (this.executionErrorBlock) {\n      this.executionErrorBlock();\n      this.executionErrorBlock = undefined;\n    }\n  }\n}\n"]}

package/dist/test/recaptcha-manager.test.js

@@ -1,4 +1,3 @@
 "use strict";
-describe('YourWebComponent', () => {
-});
+describe('YourWebComponent', () => { });
 //# sourceMappingURL=recaptcha-manager.test.js.map

package/dist/test/recaptcha-manager.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"recaptcha-manager.test.js","sourceRoot":"","sources":["../../test/recaptcha-manager.test.ts"],"names":[],"mappings":";AAAA,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;AAElC,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {\n\n});\n"]}
+{"version":3,"file":"recaptcha-manager.test.js","sourceRoot":"","sources":["../../test/recaptcha-manager.test.ts"],"names":[],"mappings":";AAAA,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC","sourcesContent":["describe('YourWebComponent', () => {});\n"]}

package/index.ts

@@ -1 +1,9 @@
-export { RecaptchaManager, RecaptchaManagerInterface } from './src/recaptcha-manager';
+export {
+  RecaptchaManager,
+  RecaptchaManagerInterface,
+} from './src/recaptcha-manager';
+
+export {
+  RecaptchaWidget,
+  RecaptchaWidgetInterface,
+} from './src/recaptcha-widget';

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/recaptcha-manager.ts

@@ -2,173 +2,86 @@ import {
   LazyLoaderService,
   LazyLoaderServiceInterface,
 } from '@internetarchive/lazy-loader-service';
+import { RecaptchaWidget } from './recaptcha-widget';
 
 export interface RecaptchaManagerInterface {
-  execute(): Promise<string>;
-  setup(
-    container: HTMLElement,
-    tabIndex: number,
-    theme: ReCaptchaV2.Theme,
-    type: ReCaptchaV2.Type
-  ): void;
-}
-
-export class RecaptchaManager implements RecaptchaManagerInterface {
-  /**
-   * This is a convenience initializer that also lazily loads
-   * the recaptcha library from Google.
-   *
-   * @param options
-   * @returns
-   */
-  static async getRecaptchaManager(options: {
-    siteKey: string;
-  }): Promise<RecaptchaManagerInterface> {
-    const grecaptchaLibrary = await RecaptchaManager.loadRecaptchaLibrary();
-    return new RecaptchaManager({
-      grecaptchaLibrary,
-      siteKey: options.siteKey,
-    });
-  }
-
   /**
-   * Load the Recaptch library from Google.
-   *
-   * @param options
-   * @returns
+   * Load a recaptcha widget for a given site key or the default site key.
    */
-  static async loadRecaptchaLibrary(options?: {
-    lazyLoader?: LazyLoaderServiceInterface;
-  }): Promise<ReCaptchaV2.ReCaptcha> {
-    const service = options?.lazyLoader ?? new LazyLoaderService();
-
-    return new Promise(resolve => {
-      (window as any).grecaptchaLoadedCallback = (): void => {
-        setTimeout(() => {
-          // remove the callback when we're done with it
-          delete (window as any).grecaptchaLoadedCallback;
-        }, 10);
-        resolve(window.grecaptcha);
-      };
+  getRecaptchaWidget(options?: {
+    siteKey?: string;
+    recaptchaParams?: ReCaptchaV2.Parameters;
+  }): Promise<RecaptchaWidget>;
+}
 
-      service.loadScript({
-        src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',
-      });
-    });
-  }
+export class RecaptchaManager implements RecaptchaManagerInterface {
+  private lazyLoader: LazyLoaderServiceInterface;
 
-  private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+  private defaultSiteKey?: string;
 
-  private siteKey: string;
+  private recaptchaCache: Record<string, RecaptchaWidget> = {};
 
   constructor(options: {
-    grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
-    siteKey: string;
+    defaultSiteKey: string;
+    lazyLoader?: LazyLoaderServiceInterface;
+    grecaptchaLibrary?: ReCaptchaV2.ReCaptcha; // allows dependency injection or will be lazy loaded
   }) {
-    this.grecaptchaLibrary = options.grecaptchaLibrary;
-    this.siteKey = options.siteKey;
+    this.defaultSiteKey = options.defaultSiteKey;
+    this.lazyLoader = options.lazyLoader ?? new LazyLoaderService();
+    this.grecaptchaLibraryCache = options.grecaptchaLibrary;
   }
 
-  private executionSuccessBlock?: (token: string) => void;
+  /** @inheritdoc */
+  async getRecaptchaWidget(options?: {
+    siteKey?: string;
+    recaptchaParams?: ReCaptchaV2.Parameters;
+  }): Promise<RecaptchaWidget> {
+    const key = options?.siteKey ?? this.defaultSiteKey;
+    if (!key) {
+      throw new Error('RecaptchaManager requires a site key');
+    }
 
-  private executionExpiredBlock?: () => void;
+    const cached = this.recaptchaCache[key];
+    if (cached) return cached;
 
-  private executionErrorBlock?: () => void;
+    const grecaptchaLibrary = await this.getRecaptchaLibrary();
+    const recaptcha = new RecaptchaWidget(
+      {
+        siteKey: key,
+        grecaptchaLibrary,
+      },
+      options?.recaptchaParams
+    );
 
-  private isExecuting = false;
+    this.recaptchaCache[key] = recaptcha;
+    return recaptcha;
+  }
 
   /**
-   * Execute Recaptcha and return a Promise containing the response token.
-   *
-   * This is an interesting flow.. we call `execute()` here, but have to wait for the
-   * response and expiration handlers that we bind during the inital `setup` call.
-   * For consumers, we want to be able to just call `execute()` and wait for a response.
-   * To allow this, we assign two callbacks:
-   * - `executionSuccessBlock`
-   * - `executionExpiredBlock`
-   *
-   * We then call those callbacks from inside `responseHandler` and `expiredHandler` to
-   * either resolve or reject the Promise.
-   *
-   * ie:
-   *
-   * try {
-   *   const recaptchaResult = await recaptchaManager.execute();
-   *   console.log('recaptcha token:', recaptchaResult);
-   * } catch {
-   *   console.error('something happened')
-   * }
+   * Load the Recaptch library from Google.
    *
-   * @returns {Promise<string>}
-   * @memberof RecaptchaManager
+   * @returns Promise<ReCaptchaV2.ReCaptcha>
    */
-  execute(): Promise<string> {
-    if (this.isExecuting) {
-      this.finishExecution();
+  private async getRecaptchaLibrary(): Promise<ReCaptchaV2.ReCaptcha> {
+    if (this.grecaptchaLibraryCache) {
+      return this.grecaptchaLibraryCache;
     }
-    this.isExecuting = true;
-    return new Promise((resolve, reject) => {
-      this.executionSuccessBlock = (token: string): void => {
-        this.finishExecution();
-        resolve(token);
-      };
-
-      this.executionExpiredBlock = (): void => {
-        this.finishExecution();
-        reject(new Error('expired'));
-      };
-
-      this.executionErrorBlock = (): void => {
-        this.finishExecution();
-        reject(new Error('error'));
+    return new Promise(resolve => {
+      (window as any).grecaptchaLoadedCallback = (): void => {
+        setTimeout(() => {
+          // remove the callback when we're done with it
+          delete (window as any).grecaptchaLoadedCallback;
+        }, 10);
+        this.grecaptchaLibraryCache = window.grecaptcha;
+        resolve(window.grecaptcha);
       };
 
-      this.grecaptchaLibrary.execute();
-    });
-  }
-
-  private finishExecution(): void {
-    this.isExecuting = false;
-    this.grecaptchaLibrary.reset();
-  }
-
-  setup(
-    container: HTMLElement,
-    tabIndex: number,
-    theme: ReCaptchaV2.Theme,
-    type: ReCaptchaV2.Type
-  ): void {
-    this.grecaptchaLibrary.render(container, {
-      callback: this.responseHandler.bind(this),
-      'expired-callback': this.expiredHandler.bind(this),
-      'error-callback': this.errorHandler.bind(this),
-      sitekey: this.siteKey,
-      tabindex: tabIndex,
-      theme,
-      type,
-      size: 'invisible',
+      this.lazyLoader.loadScript({
+        src: 'https://www.google.com/recaptcha/api.js?onload=grecaptchaLoadedCallback&render=explicit',
+      });
     });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private responseHandler(response: any): void {
-    if (this.executionSuccessBlock) {
-      this.executionSuccessBlock(response);
-      this.executionSuccessBlock = undefined;
-    }
-  }
-
-  private expiredHandler(): void {
-    if (this.executionExpiredBlock) {
-      this.executionExpiredBlock();
-      this.executionExpiredBlock = undefined;
-    }
-  }
-
-  private errorHandler(): void {
-    if (this.executionErrorBlock) {
-      this.executionErrorBlock();
-      this.executionErrorBlock = undefined;
-    }
-  }
+  /** don't use directly, use `getRecaptchaLibrary()` */
+  private grecaptchaLibraryCache?: ReCaptchaV2.ReCaptcha;
 }

package/src/recaptcha-widget.ts

@@ -0,0 +1,134 @@
+/**
+ * This encompasses a widget for a given site key.
+ */
+export interface RecaptchaWidgetInterface {
+  /** execute the recaptcha request and returns a token */
+  execute(): Promise<string>;
+}
+
+/**
+ * This encompasses a widget for a given site key.
+ */
+export class RecaptchaWidget implements RecaptchaWidgetInterface {
+  private executionSuccessBlock?: (token: string) => void;
+
+  private executionExpiredBlock?: () => void;
+
+  private executionErrorBlock?: () => void;
+
+  private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+
+  private siteKey: string;
+
+  private widgetId: number | null = null;
+
+  private isExecuting = false;
+
+  constructor(
+    config: {
+      siteKey: string;
+      grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+    },
+    recaptchaParams?: ReCaptchaV2.Parameters
+  ) {
+    this.siteKey = config.siteKey;
+    this.grecaptchaLibrary = config.grecaptchaLibrary;
+
+    const container = this.createContainer();
+    this.setup(container, recaptchaParams);
+  }
+
+  /** @inheritdoc */
+  async execute(): Promise<string> {
+    const { widgetId } = this;
+
+    if (widgetId === null) {
+      throw new Error('Recaptcha is not setup');
+    }
+
+    if (this.isExecuting) {
+      // there is no way to know when users have dismissed a previous recaptcha
+      // so if we're still in the middle of execution when we call execute again,
+      // just reset it and execute it again
+      this.finishExecution();
+    }
+
+    return new Promise((resolve, reject) => {
+      this.executionSuccessBlock = (token: string): void => {
+        this.finishExecution();
+        resolve(token);
+      };
+
+      this.executionExpiredBlock = (): void => {
+        this.finishExecution();
+        reject(new Error('expired'));
+      };
+
+      this.executionErrorBlock = (): void => {
+        this.finishExecution();
+        reject(new Error('error'));
+      };
+
+      this.grecaptchaLibrary.execute(widgetId);
+    });
+  }
+
+  private finishExecution() {
+    this.isExecuting = false;
+    const { widgetId } = this;
+    if (widgetId === null) return;
+    this.grecaptchaLibrary.reset(widgetId);
+  }
+
+  /** @inheritdoc */
+  private setup(
+    container: HTMLElement,
+    recaptchaParams?: ReCaptchaV2.Parameters
+  ): void {
+    this.widgetId = this.grecaptchaLibrary.render(container, {
+      callback: this.responseHandler.bind(this),
+      'expired-callback': this.expiredHandler.bind(this),
+      'error-callback': this.errorHandler.bind(this),
+      sitekey: this.siteKey,
+      tabindex: recaptchaParams?.tabindex,
+      theme: recaptchaParams?.theme,
+      type: recaptchaParams?.type,
+      size: recaptchaParams?.size ?? 'invisible',
+    });
+  }
+
+  private createContainer(): HTMLElement {
+    const elementId = `recaptchaManager-${this.siteKey}`;
+    let element: HTMLElement | null = document.getElementById(elementId);
+    if (!element) {
+      element = document.createElement('div');
+      element.id = elementId;
+      element.style.position = 'fixed';
+      element.style.top = '50%';
+      element.style.left = '50%';
+      document.body.appendChild(element);
+    }
+    return element;
+  }
+
+  private responseHandler(response: any): void {
+    if (this.executionSuccessBlock) {
+      this.executionSuccessBlock(response);
+      this.executionSuccessBlock = undefined;
+    }
+  }
+
+  private expiredHandler(): void {
+    if (this.executionExpiredBlock) {
+      this.executionExpiredBlock();
+      this.executionExpiredBlock = undefined;
+    }
+  }
+
+  private errorHandler(): void {
+    if (this.executionErrorBlock) {
+      this.executionErrorBlock();
+      this.executionErrorBlock = undefined;
+    }
+  }
+}

package/test/recaptcha-manager.test.ts

@@ -1,3 +1 @@
-describe('YourWebComponent', () => {
-
-});
+describe('YourWebComponent', () => {});