@keycloakify/svelte 0.0.1-rc.6 → 0.1.0

package/keycloakify-svelte/login/pages/WebauthnAuthenticate.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { useScript } from './WebauthnAuthenticate.useScript';
+  import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { CxArg } from 'keycloakify/tools/clsx_withTransform';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'webauthn-authenticate.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+  const { url, realm, registrationDisabled, authenticators, shouldDisplayAuthenticators } = kcContext;
+
+  const { msg, msgStr, advancedMsg } = $i18n;
+
+  const authButtonId = 'authenticateWebAuthnButton';
+
+  useScript({
+    authButtonId,
+    kcContext,
+    i18n,
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayInfo={realm.registrationAllowed && !registrationDisabled}
+>
+  {#snippet headerNode()}
+    {@render msg('webauthn-login-title')()}
+  {/snippet}
+  {#snippet infoNode()}
+    <div id="kc-registration">
+      <span>
+        {@render msg('noAccount')()}{' '}
+        <a
+          tabindex={6}
+          href={url.registrationUrl}
+        >
+          {@render msg('doRegister')()}
+        </a>
+      </span>
+    </div>
+  {/snippet}
+  <div
+    id="kc-form-webauthn"
+    class={kcClsx('kcFormClass')}
+  >
+    <form
+      id="webauth"
+      action={url.loginAction}
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="clientDataJSON"
+        name="clientDataJSON"
+      />
+      <input
+        type="hidden"
+        id="authenticatorData"
+        name="authenticatorData"
+      />
+      <input
+        type="hidden"
+        id="signature"
+        name="signature"
+      />
+      <input
+        type="hidden"
+        id="credentialId"
+        name="credentialId"
+      />
+      <input
+        type="hidden"
+        id="userHandle"
+        name="userHandle"
+      />
+      <input
+        type="hidden"
+        id="error"
+        name="error"
+      />
+    </form>
+    <div class={clsx(kcClsx('kcFormGroupClass'), 'no-bottom-margin')}>
+      {#if authenticators}
+        <form
+          id="authn_select"
+          class={kcClsx('kcFormClass')}
+        >
+          {#each authenticators.authenticators as authenticator}
+            <input
+              type="hidden"
+              name="authn_use_chk"
+              value={authenticator.credentialId}
+            />
+          {/each}
+        </form>
+
+        {#if shouldDisplayAuthenticators}
+          {#if authenticators.authenticators.length > 1}
+            <p class={kcClsx('kcSelectAuthListItemTitle')}>{@render msg('webauthn-available-authenticators')()}</p>
+          {/if}
+          <div class={kcClsx('kcFormOptionsClass')}>
+            {#each authenticators.authenticators as authenticator, i}
+              <div
+                id={`kc-webauthn-authenticator-item-${i}`}
+                class={kcClsx('kcSelectAuthListItemClass')}
+              >
+                <div class={kcClsx('kcSelectAuthListItemIconClass')}>
+                  <i
+                    class={clsx(
+                      (() => {
+                        const klass = kcClsx(authenticator.transports.iconClass as CxArg<ClassKey>);
+                        if (klass === authenticator.transports.iconClass) {
+                          return kcClsx('kcWebAuthnDefaultIcon');
+                        }
+                        return klass;
+                      })(),
+                      kcClsx('kcSelectAuthListItemIconPropertyClass'),
+                    )}
+                  ></i>
+                </div>
+                <div class={kcClsx('kcSelectAuthListItemArrowIconClass')}>
+                  <div
+                    id={`kc-webauthn-authenticator-label-${i}`}
+                    class={kcClsx('kcSelectAuthListItemHeadingClass')}
+                  >
+                    {@render advancedMsg(authenticator.label)()}
+                  </div>
+                  {#if authenticator.transports.displayNameProperties?.length}
+                    <div
+                      id={`kc-webauthn-authenticator-transport-${i}`}
+                      class={kcClsx('kcSelectAuthListItemDescriptionClass')}
+                    >
+                      {#each authenticator.transports.displayNameProperties as displayNameProperty, i}
+                        {@const hasNext = i !== authenticator.transports.displayNameProperties.length - 1}
+                        {@render advancedMsg(displayNameProperty)()}
+                        {#if hasNext}<span>, </span>{/if}
+                      {/each}
+                    </div>
+                  {/if}
+                  <div class={kcClsx('kcSelectAuthListItemDescriptionClass')}>
+                    <span id={`kc-webauthn-authenticator-createdlabel-${i}`}>
+                      {@render msg('webauthn-createdAt-label')()}
+                    </span>
+                    <span id={`kc-webauthn-authenticator-created-${i}`}>{authenticator.createdAt}</span>
+                  </div>
+                  <div class={kcClsx('kcSelectAuthListItemFillClass')}></div>
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/if}
+      {/if}
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          id={authButtonId}
+          type="button"
+          autofocus
+          value={msgStr('webauthn-doAuthenticate')}
+          class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+        />
+      </div>
+    </div>
+  </div>
+</Template>

package/keycloakify-svelte/login/pages/WebauthnAuthenticate.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const WebauthnAuthenticate: import("svelte").Component<PageProps<KcContext.WebauthnAuthenticate, I18n>, {}, "">;
+type WebauthnAuthenticate = ReturnType<typeof WebauthnAuthenticate>;
+export default WebauthnAuthenticate;

package/keycloakify-svelte/login/pages/WebauthnAuthenticate.useScript.d.ts

@@ -0,0 +1,22 @@
+import type { KcContext } from '../KcContext';
+import type { Readable } from 'svelte/store';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: 'true' | 'false';
+    challenge: string;
+    userVerification: KcContext.WebauthnAuthenticate['userVerification'];
+    rpId: string;
+    createTimeout: number | string;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    authButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Readable<I18nLike>;
+}): void;
+export {};

package/keycloakify-svelte/login/pages/WebauthnAuthenticate.useScript.js

@@ -0,0 +1,49 @@
+import { useInsertScriptTags } from '../../tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { waitForElementMountedOnDom } from 'keycloakify/tools/waitForElementMountedOnDom';
+import { onMount } from 'svelte';
+assert();
+assert();
+export function useScript(params) {
+    const { authButtonId, kcContext, i18n } = params;
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+    onMount(() => {
+        const unsubscribe = i18n.subscribe(($i18n) => {
+            const { msgStr, isFetchingTranslations } = $i18n;
+            const { insertScriptTags } = useInsertScriptTags({
+                componentOrHookName: 'WebauthnAuthenticate',
+                scriptTags: [
+                    {
+                        type: 'module',
+                        textContent: () => `
+    
+                        import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                        const authButton = document.getElementById('${authButtonId}');
+                        authButton.addEventListener("click", function() {
+                            const input = {
+                                isUserIdentified : ${isUserIdentified},
+                                challenge : '${challenge}',
+                                userVerification : '${userVerification}',
+                                rpId : '${rpId}',
+                                createTimeout : ${createTimeout},
+                                errmsg : ${JSON.stringify(msgStr('webauthn-unsupported-browser-text'))}
+                            };
+                            authenticateByWebAuthn(input);
+                        });
+                    `,
+                    },
+                ],
+            });
+            if (isFetchingTranslations) {
+                return;
+            }
+            (async () => {
+                await waitForElementMountedOnDom({
+                    elementId: authButtonId,
+                });
+                insertScriptTags();
+            })();
+        });
+        return () => unsubscribe();
+    });
+}

package/keycloakify-svelte/login/pages/WebauthnError.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'webauthn-error.ftl' }>, I18n> = $props();
+
+  const { url, isAppInitiatedAction } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={true}
+>
+  {#snippet headerNode()}
+    {@render msg('webauthn-error-title')()}
+  {/snippet}
+  <form
+    id="kc-error-credential-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <input
+      type="hidden"
+      id="executionValue"
+      name="authenticationExecution"
+    />
+    <input
+      type="hidden"
+      id="isSetRetry"
+      name="isSetRetry"
+    />
+  </form>
+  <input
+    tabindex={4}
+    onclick={() => {
+      // @ts-expect-error: Trusted Keycloak's code
+      document.getElementById('isSetRetry').value = 'retry';
+      // @ts-expect-error: Trusted Keycloak's code
+      document.getElementById('executionValue').value = '${execution}';
+      // @ts-expect-error: Trusted Keycloak's code
+      document.getElementById('kc-error-credential-form').submit();
+    }}
+    type="button"
+    class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+    name="try-again"
+    id="kc-try-again"
+    value={msgStr('doTryAgain')}
+  />
+  {#if isAppInitiatedAction}
+    <form
+      action={url.loginAction}
+      class={kcClsx('kcFormClass')}
+      id="kc-webauthn-settings-form"
+      method="post"
+    >
+      <button
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+        id="cancelWebAuthnAIA"
+        name="cancel-aia"
+        value="true"
+      >
+        {msgStr('doCancel')}
+      </button>
+    </form>
+  {/if}
+</Template>

package/keycloakify-svelte/login/pages/WebauthnError.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const WebauthnError: import("svelte").Component<PageProps<KcContext.WebauthnError, I18n>, {}, "">;
+type WebauthnError = ReturnType<typeof WebauthnError>;
+export default WebauthnError;

package/keycloakify-svelte/login/pages/WebauthnRegister.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import LogoutOtherSessions from '../components/LogoutOtherSessions.svelte';
+  import type { PageProps } from './PageProps';
+  import { useScript } from './WebauthnRegister.useScript';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'webauthn-register.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+  const { url, isSetRetry, isAppInitiatedAction } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const authButtonId = 'authenticateWebAuthnButton';
+
+  useScript({
+    authButtonId,
+    kcContext,
+    i18n,
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    <span class={kcClsx('kcWebAuthnKeyIcon')}></span>
+    {@render msg('webauthn-registration-title')()}
+  {/snippet}
+  <form
+    id="register"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <input
+        type="hidden"
+        id="clientDataJSON"
+        name="clientDataJSON"
+      />
+      <input
+        type="hidden"
+        id="attestationObject"
+        name="attestationObject"
+      />
+      <input
+        type="hidden"
+        id="publicKeyCredentialId"
+        name="publicKeyCredentialId"
+      />
+      <input
+        type="hidden"
+        id="authenticatorLabel"
+        name="authenticatorLabel"
+      />
+      <input
+        type="hidden"
+        id="transports"
+        name="transports"
+      />
+      <input
+        type="hidden"
+        id="error"
+        name="error"
+      />
+      <LogoutOtherSessions
+        {kcClsx}
+        {i18n}
+      />
+    </div>
+  </form>
+  <input
+    type="submit"
+    class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+    id={authButtonId}
+    value={msgStr('doRegisterSecurityKey')}
+  />
+  {#if !isSetRetry && isAppInitiatedAction}
+    <form
+      action={url.loginAction}
+      class={kcClsx('kcFormClass')}
+      id="kc-webauthn-settings-form"
+      method="post"
+    >
+      <button
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+        id="cancelWebAuthnAIA"
+        name="cancel-aia"
+        value="true"
+      >
+        {@render msg('doCancel')()}
+      </button>
+    </form>
+  {/if}
+</Template>

package/keycloakify-svelte/login/pages/WebauthnRegister.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const WebauthnRegister: import("svelte").Component<PageProps<KcContext.WebauthnRegister, I18n>, {}, "">;
+type WebauthnRegister = ReturnType<typeof WebauthnRegister>;
+export default WebauthnRegister;

package/keycloakify-svelte/login/pages/WebauthnRegister.useScript.d.ts

@@ -0,0 +1,28 @@
+import type { Readable } from 'svelte/store';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    challenge: string;
+    userid: string;
+    username: string;
+    signatureAlgorithms: string[];
+    rpEntityName: string;
+    rpId: string;
+    attestationConveyancePreference: string;
+    authenticatorAttachment: string;
+    requireResidentKey: string;
+    userVerificationRequirement: string;
+    createTimeout: number | string;
+    excludeCredentialIds: string;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-registration-init-label' | 'webauthn-registration-init-label-prompt' | 'webauthn-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    authButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Readable<I18nLike>;
+}): void;
+export {};

package/keycloakify-svelte/login/pages/WebauthnRegister.useScript.js

@@ -0,0 +1,57 @@
+import { useInsertScriptTags } from '../../tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { waitForElementMountedOnDom } from 'keycloakify/tools/waitForElementMountedOnDom';
+import { onMount } from 'svelte';
+assert();
+assert();
+export function useScript(params) {
+    const { authButtonId, kcContext, i18n } = params;
+    const { url, challenge, userid, username, signatureAlgorithms, rpEntityName, rpId, attestationConveyancePreference, authenticatorAttachment, requireResidentKey, userVerificationRequirement, createTimeout, excludeCredentialIds, } = kcContext;
+    onMount(() => {
+        const unsubscribe = i18n.subscribe(($i18n) => {
+            const { msgStr, isFetchingTranslations } = $i18n;
+            const { insertScriptTags } = useInsertScriptTags({
+                componentOrHookName: 'LoginRecoveryAuthnCodeConfig',
+                scriptTags: [
+                    {
+                        type: 'module',
+                        textContent: () => `
+                    import { registerByWebAuthn } from "${url.resourcesPath}/js/webauthnRegister.js";
+                    const registerButton = document.getElementById('${authButtonId}');
+                    registerButton.addEventListener("click", function() {
+                        const input = {
+                            challenge : '${challenge}',
+                            userid : '${userid}',
+                            username : '${username}',
+                            signatureAlgorithms : ${JSON.stringify(signatureAlgorithms)},
+                            rpEntityName : ${JSON.stringify(rpEntityName)},
+                            rpId : ${JSON.stringify(rpId)},
+                            attestationConveyancePreference : ${JSON.stringify(attestationConveyancePreference)},
+                            authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)},
+                            requireResidentKey : ${JSON.stringify(requireResidentKey)},
+                            userVerificationRequirement : ${JSON.stringify(userVerificationRequirement)},
+                            createTimeout : ${createTimeout},
+                            excludeCredentialIds : ${JSON.stringify(excludeCredentialIds)},
+                            initLabel : ${JSON.stringify(msgStr('webauthn-registration-init-label'))},
+                            initLabelPrompt : ${JSON.stringify(msgStr('webauthn-registration-init-label-prompt'))},
+                            errmsg : ${JSON.stringify(msgStr('webauthn-unsupported-browser-text'))}
+                        };
+                        registerByWebAuthn(input);
+                    });
+                `,
+                    },
+                ],
+            });
+            if (isFetchingTranslations) {
+                return;
+            }
+            (async () => {
+                await waitForElementMountedOnDom({
+                    elementId: authButtonId,
+                });
+                insertScriptTags();
+            })();
+        });
+        return () => unsubscribe();
+    });
+}

package/keycloakify-svelte/tools/useConst.d.ts

@@ -0,0 +1 @@
+export declare function useConst<T>(getValue: () => T): T;

package/keycloakify-svelte/tools/useConst.js

@@ -0,0 +1,4 @@
+export function useConst(getValue) {
+    const value = getValue();
+    return value;
+}

package/keycloakify-svelte/tools/useInsertLinkTags.d.ts

@@ -0,0 +1,12 @@
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different hrefs.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports css stylesheet in the head.
+ */
+export declare function useInsertLinkTags(params: {
+    componentOrHookName: string;
+    hrefs: string[];
+}): {
+    areAllStyleSheetsLoaded: import("svelte/store").Readable<boolean>;
+};

package/keycloakify-svelte/tools/useInsertLinkTags.js

@@ -0,0 +1,62 @@
+import { onMount } from 'svelte';
+import { id } from 'tsafe/id';
+import { useConst } from './useConst';
+import { useReducer } from './useReducer';
+const alreadyMountedComponentOrHookNames = new Set();
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different hrefs.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports css stylesheet in the head.
+ */
+export function useInsertLinkTags(params) {
+    const { hrefs, componentOrHookName } = params;
+    onMount(() => {
+        const isAlreadyMounted = alreadyMountedComponentOrHookNames.has(componentOrHookName);
+        if (isAlreadyMounted) {
+            reload: {
+                if (new URL(window.location.href).searchParams.get('viewMode') === 'docs') {
+                    // NOTE: Special case for Storybook, we want to avoid infinite reload loop.
+                    break reload;
+                }
+                window.location.reload();
+            }
+            return;
+        }
+        alreadyMountedComponentOrHookNames.add(componentOrHookName);
+    });
+    const [areAllStyleSheetsLoaded, setAllStyleSheetsLoaded] = useReducer(() => true, false);
+    const refPrAllStyleSheetLoaded = useConst(() => ({
+        current: id(undefined),
+    }));
+    onMount(() => {
+        let isActive = true;
+        (refPrAllStyleSheetLoaded.current ??= (async () => {
+            let lastMountedHtmlElement = undefined;
+            const prs = [];
+            for (const href of hrefs) {
+                const htmlElement = document.createElement('link');
+                prs.push(new Promise((resolve) => htmlElement.addEventListener('load', () => resolve())));
+                htmlElement.rel = 'stylesheet';
+                htmlElement.href = href;
+                if (lastMountedHtmlElement !== undefined) {
+                    lastMountedHtmlElement.insertAdjacentElement('afterend', htmlElement);
+                }
+                else {
+                    document.head.prepend(htmlElement);
+                }
+                lastMountedHtmlElement = htmlElement;
+            }
+            await Promise.all(prs);
+        })()).then(() => {
+            if (!isActive) {
+                return;
+            }
+            setAllStyleSheetsLoaded();
+        });
+        return () => {
+            isActive = false;
+        };
+    });
+    return { areAllStyleSheetsLoaded };
+}

package/keycloakify-svelte/tools/useInsertScriptTags.d.ts

@@ -0,0 +1,29 @@
+export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
+export declare namespace ScriptTag {
+    type Common = {
+        type: 'text/javascript' | 'module';
+    };
+    export type TextContent = Common & {
+        textContent: string | (() => string);
+    };
+    export type Src = Common & {
+        src: string;
+    };
+    export {};
+}
+/**
+ * NOTE: The component that use this hook can only be mounded once!
+ * And can't rerender with different scriptTags.
+ * If it's mounted again the page will be reloaded.
+ * This simulates the behavior of a server rendered page that imports javascript in the head.
+ *
+ * The returned function is supposed to be called in a useEffect and
+ * will not download the scripts multiple times event if called more than once (react strict mode).
+ *
+ */
+export declare function useInsertScriptTags(params: {
+    componentOrHookName: string;
+    scriptTags: ScriptTag[];
+}): {
+    insertScriptTags: () => void;
+};