sources/oauth: implement apple native sign-in using the apple JS SDK

closes #1881

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

web/src/flows/FlowExecutor.ts

@@ -32,6 +32,7 @@ import "../elements/LoadingOverlay";
 import { first } from "../utils";
 import "./FlowInspector";
 import "./access_denied/FlowAccessDenied";
+import "./sources/apple/AppleLoginInit";
 import "./sources/plex/PlexLoginInit";
 import "./stages/RedirectStage";
 import "./stages/authenticator_duo/AuthenticatorDuoStage";
@@ -321,6 +322,11 @@ export class FlowExecutor extends LitElement implements StageHost {
                             .host=${this as StageHost}
                             .challenge=${this.challenge}
                         ></ak-flow-sources-plex>`;
+                    case "ak-flow-sources-oauth-apple":
+                        return html`<ak-flow-sources-oauth-apple
+                            .host=${this as StageHost}
+                            .challenge=${this.challenge}
+                        ></ak-flow-sources-oauth-apple>`;
                     default:
                         break;
                 }

web/src/flows/sources/apple/AppleLoginInit.ts

@@ -0,0 +1,79 @@
+import { t } from "@lingui/macro";
+
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import AKGlobal from "../../../authentik.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFLogin from "@patternfly/patternfly/components/Login/login.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { AppleChallengeResponseRequest, AppleLoginChallenge } from "@goauthentik/api";
+
+import "../../../elements/EmptyState";
+import { BaseStage } from "../../stages/base";
+
+@customElement("ak-flow-sources-oauth-apple")
+export class AppleLoginInit extends BaseStage<AppleLoginChallenge, AppleChallengeResponseRequest> {
+    @property({ type: Boolean })
+    isModalShown = false;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal];
+    }
+
+    firstUpdated(): void {
+        const appleAuth = document.createElement("script");
+        appleAuth.src =
+            "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js";
+        appleAuth.type = "text/javascript";
+        appleAuth.onload = () => {
+            AppleID.auth.init({
+                clientId: this.challenge?.clientId,
+                scope: this.challenge.scope,
+                redirectURI: this.challenge.redirectUri,
+                state: this.challenge.state,
+                usePopup: false,
+            });
+            AppleID.auth.signIn();
+            this.isModalShown = true;
+        };
+        document.head.append(appleAuth);
+        //Listen for authorization success
+        document.addEventListener("AppleIDSignInOnSuccess", () => {
+            //handle successful response
+        });
+        //Listen for authorization failures
+        document.addEventListener("AppleIDSignInOnFailure", (error) => {
+            console.warn(error);
+            this.isModalShown = false;
+        });
+    }
+
+    render(): TemplateResult {
+        return html`<header class="pf-c-login__main-header">
+                <h1 class="pf-c-title pf-m-3xl">${t`Authenticating with Apple...`}</h1>
+            </header>
+            <div class="pf-c-login__main-body">
+                <form class="pf-c-form">
+                    <ak-empty-state ?loading="${true}"> </ak-empty-state>
+                    ${!this.isModalShown
+                        ? html`<button
+                              class="pf-c-button pf-m-primary pf-m-block"
+                              @click=${() => {
+                                  AppleID.auth.signIn();
+                              }}
+                          >
+                              ${t`Retry`}
+                          </button>`
+                        : html``}
+                </form>
+            </div>
+            <footer class="pf-c-login__main-footer">
+                <ul class="pf-c-login__main-footer-links"></ul>
+            </footer>`;
+    }
+}

web/src/flows/sources/apple/apple.d.ts

@@ -0,0 +1,14 @@
+declare namespace AppleID {
+    const auth: AppleIDAuth;
+
+    class AppleIDAuth {
+        init({
+            clientId: string,
+            scope: string,
+            redirectURI: string,
+            state: string,
+            usePopup: boolean,
+        }): void;
+        async signIn(): Promise<void>;
+    }
+}