web/flows: fix alternate captchas not loading

closes #4321

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/package-lock.json

@@ -22,6 +22,7 @@
                 "@formatjs/intl-listformat": "^7.1.7",
                 "@fortawesome/fontawesome-free": "^6.2.1",
                 "@goauthentik/api": "^2022.12.1-1672593591",
+                "@hcaptcha/types": "^1.0.3",
                 "@jackfranklin/rollup-plugin-markdown": "^0.4.0",
                 "@lingui/cli": "^3.15.0",
                 "@lingui/core": "^3.15.0",
@@ -71,6 +72,7 @@
                 "rollup-plugin-terser": "^7.0.2",
                 "ts-lit-plugin": "^1.2.1",
                 "tslib": "^2.4.1",
+                "turnstile-types": "^1.0.2",
                 "typescript": "^4.9.4",
                 "webcomponent-qr-code": "^1.1.0",
                 "yaml": "^2.2.0"
@@ -1961,6 +1963,11 @@
             "resolved": "https://registry.npmjs.org/@goauthentik/api/-/api-2022.12.1-1672593591.tgz",
             "integrity": "sha512-m/7fe3azj8foouf2pZgkoJ8phYFJjd0ORr45+PlETgpeaCGes8GI3PgA3ZBqUQR4cn4OvFuA/OxWUpw4XvzKmg=="
         },
+        "node_modules/@hcaptcha/types": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@hcaptcha/types/-/types-1.0.3.tgz",
+            "integrity": "sha512-1mbU6eSGawRrqeahRrOzZo/SVLI6oZ5/azuBpSyVrRRR96CnS3fOVDWfzxpngfxKD0/I9Rwu6c/3ITqD8rXeTQ=="
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.8",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -9511,6 +9518,11 @@
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
             "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         },
+        "node_modules/turnstile-types": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/turnstile-types/-/turnstile-types-1.0.2.tgz",
+            "integrity": "sha512-Y98xYhxf9xtYuu1QCrQm7og0o2zw2bGdsyUNXeWgPVXsHFkJIwTrRY6o3Oioa9PjFtoYM+oHe1n23V+oE27WUQ=="
+        },
         "node_modules/type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -11400,6 +11412,11 @@
             "resolved": "https://registry.npmjs.org/@goauthentik/api/-/api-2022.12.1-1672593591.tgz",
             "integrity": "sha512-m/7fe3azj8foouf2pZgkoJ8phYFJjd0ORr45+PlETgpeaCGes8GI3PgA3ZBqUQR4cn4OvFuA/OxWUpw4XvzKmg=="
         },
+        "@hcaptcha/types": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@hcaptcha/types/-/types-1.0.3.tgz",
+            "integrity": "sha512-1mbU6eSGawRrqeahRrOzZo/SVLI6oZ5/azuBpSyVrRRR96CnS3fOVDWfzxpngfxKD0/I9Rwu6c/3ITqD8rXeTQ=="
+        },
         "@humanwhocodes/config-array": {
             "version": "0.11.8",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -17025,6 +17042,11 @@
                 }
             }
         },
+        "turnstile-types": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/turnstile-types/-/turnstile-types-1.0.2.tgz",
+            "integrity": "sha512-Y98xYhxf9xtYuu1QCrQm7og0o2zw2bGdsyUNXeWgPVXsHFkJIwTrRY6o3Oioa9PjFtoYM+oHe1n23V+oE27WUQ=="
+        },
         "type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

web/package.json

@@ -65,6 +65,7 @@
         "@formatjs/intl-listformat": "^7.1.7",
         "@fortawesome/fontawesome-free": "^6.2.1",
         "@goauthentik/api": "^2022.12.1-1672593591",
+        "@hcaptcha/types": "^1.0.3",
         "@jackfranklin/rollup-plugin-markdown": "^0.4.0",
         "@lingui/cli": "^3.15.0",
         "@lingui/core": "^3.15.0",
@@ -114,6 +115,7 @@
         "rollup-plugin-terser": "^7.0.2",
         "ts-lit-plugin": "^1.2.1",
         "tslib": "^2.4.1",
+        "turnstile-types": "^1.0.2",
         "typescript": "^4.9.4",
         "webcomponent-qr-code": "^1.1.0",
         "yaml": "^2.2.0"

web/src/flow/stages/captcha/CaptchaStage.ts

@@ -1,13 +1,16 @@
+///<reference types="@hcaptcha/types"/>
+///<reference types="turnstile-types"/>
 import "@goauthentik/elements/EmptyState";
 import { PFSize } from "@goauthentik/elements/Spinner";
 import "@goauthentik/elements/forms/FormElement";
 import "@goauthentik/flow/FormStatic";
+import "@goauthentik/flow/stages/access_denied/AccessDeniedStage";
 import { BaseStage } from "@goauthentik/flow/stages/base";
 
 import { t } from "@lingui/macro";
 
 import { CSSResult, TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import AKGlobal from "@goauthentik/common/styles/authentik.css";
@@ -26,6 +29,11 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
         return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
     }
 
+    handlers = [this.handleGReCaptcha, this.handleHCaptcha, this.handleTurnstile];
+
+    @state()
+    error?: string;
+
     firstUpdated(): void {
         const script = document.createElement("script");
         script.src = this.challenge.jsUrl;
@@ -35,10 +43,41 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
         document.body.appendChild(captchaContainer);
         script.onload = () => {
             console.debug("authentik/stages/captcha: script loaded");
+            let found = false;
+            let lastError = undefined;
+            this.handlers.forEach((handler) => {
+                let handlerFound = false;
+                try {
+                    console.debug(`authentik/stages/captcha[${handler.name}]: trying handler`);
+                    handlerFound = handler.apply(this, [captchaContainer]);
+                    if (handlerFound) {
+                        console.debug(
+                            `authentik/stages/captcha[${handler.name}]: handler succeeded`,
+                        );
+                        found = true;
+                    }
+                } catch (exc) {
+                    console.debug(
+                        `authentik/stages/captcha[${handler.name}]: handler failed: ${exc}`,
+                    );
+                    if (handlerFound) {
+                        lastError = exc;
+                    }
+                }
+            });
+            if (!found && lastError) {
+                this.error = (lastError as Error).toString();
+            }
+        };
+        document.head.appendChild(script);
+    }
+
+    handleGReCaptcha(container: HTMLDivElement): boolean {
+        if (!Object.hasOwn(window, "grecaptcha")) {
+            return false;
+        }
         grecaptcha.ready(() => {
-                if (!this.challenge?.siteKey) return;
+            const captchaId = grecaptcha.render(container, {
-                console.debug("authentik/stages/captcha: ready");
-                const captchaId = grecaptcha.render(captchaContainer, {
                 sitekey: this.challenge.siteKey,
                 callback: (token) => {
                     this.host?.submit({
@@ -49,8 +88,40 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
             });
             grecaptcha.execute(captchaId);
         });
-        };
+        return true;
-        document.head.appendChild(script);
+    }
+
+    handleHCaptcha(container: HTMLDivElement): boolean {
+        if (!Object.hasOwn(window, "hcaptcha")) {
+            return false;
+        }
+        const captchaId = hcaptcha.render(container, {
+            sitekey: this.challenge.siteKey,
+            size: "invisible",
+            callback: (token) => {
+                this.host?.submit({
+                    token: token,
+                });
+            },
+        });
+        hcaptcha.execute(captchaId);
+        return true;
+    }
+
+    handleTurnstile(container: HTMLDivElement): boolean {
+        if (!Object.hasOwn(window, "turnstile")) {
+            return false;
+        }
+        window.turnstile.render(container, {
+            sitekey: this.challenge.siteKey,
+            size: "invisible",
+            callback: (token) => {
+                this.host?.submit({
+                    token: token,
+                });
+            },
+        });
+        return true;
     }
 
     render(): TemplateResult {
@@ -73,9 +144,12 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
                             >
                         </div>
                     </ak-form-static>
-                    <div class="ak-loading">
+                    ${this.error
+                        ? html`<ak-stage-access-denied-icon errorMessage=${ifDefined(this.error)}>
+                          </ak-stage-access-denied-icon>`
+                        : html`<div>
                               <ak-spinner size=${PFSize.XLarge}></ak-spinner>
-                    </div>
+                          </div>`}
                 </form>
             </div>
             <footer class="pf-c-login__main-footer">

website/docs/flow/stages/captcha/index.md

@@ -2,7 +2,11 @@
 title: Captcha stage
 ---
 
-This stage adds a form of verification using [Google's ReCaptcha](https://www.google.com/recaptcha/intro/v3.html) or compatible services.
+This stage adds a form of verification using [Google's ReCaptcha](https://www.google.com/recaptcha/intro/v3.html) or compatible services. Currently supported implementations:
+
+-   ReCaptcha
+-   hCaptcha
+-   Turnstile
 
 ### Google ReCaptcha