@andreyyolkin/keycloakify-vue 0.1.0

package/src/login/pages/WebauthnAuthenticate.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx, type ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { clsx } from 'keycloakify/tools/clsx';
+import type { CxArg } from 'keycloakify/tools/clsx_withTransform';
+import { toRef } from 'vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+import { useScript } from './WebauthnAuthenticate.useScript';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'webauthn-authenticate.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, realm, registrationDisabled, authenticators, shouldDisplayAuthenticators } = kcContext;
+
+const authButtonId = 'authenticateWebAuthnButton';
+
+useScript({ authButtonId, kcContext, i18n: toRef(props, 'i18n') });
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayInfo="realm.registrationAllowed && !registrationDisabled"
+  >
+    <template #header>
+      <component :is="props.i18n.msg('webauthn-login-title')" />
+    </template>
+
+    <template #info>
+      <div id="kc-registration">
+        <span>
+          <component :is="props.i18n.msg('noAccount')" />&nbsp;
+          <a
+            :tabindex="6"
+            :href="url.registrationUrl"
+          >
+            <component :is="props.i18n.msg('doRegister')" />
+          </a>
+        </span>
+      </div>
+    </template>
+
+    <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')">
+        <template v-if="authenticators">
+          <form
+            id="authn_select"
+            :class="kcClsx('kcFormClass')"
+          >
+            <input
+              v-for="authenticator in authenticators.authenticators"
+              :key="authenticator.credentialId"
+              type="hidden"
+              name="authn_use_chk"
+              :value="authenticator.credentialId"
+            />
+          </form>
+
+          <template v-if="shouldDisplayAuthenticators">
+            <p
+              v-if="authenticators.authenticators.length > 1"
+              :class="kcClsx('kcSelectAuthListItemTitle')"
+            >
+              <component :is="props.i18n.msg('webauthn-available-authenticators')" />
+            </p>
+            <div :class="kcClsx('kcFormOptionsClass')">
+              <div
+                v-for="(authenticator, idx) in authenticators.authenticators"
+                :key="authenticator.credentialId"
+                :id="`kc-webauthn-authenticator-item-${idx}`"
+                :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-${idx}`"
+                    :class="kcClsx('kcSelectAuthListItemHeadingClass')"
+                  >
+                    <component :is="props.i18n.advancedMsg(authenticator.label)" />
+                  </div>
+                  <div
+                    v-if="authenticator.transports.displayNameProperties?.length"
+                    :id="`kc-webauthn-authenticator-transport-${idx}`"
+                    :class="kcClsx('kcSelectAuthListItemDescriptionClass')"
+                  >
+                    <template
+                      v-for="(displayNameProperty, dpIdx) in authenticator.transports.displayNameProperties"
+                      :key="displayNameProperty"
+                    >
+                      <component :is="props.i18n.advancedMsg(displayNameProperty)" />
+                      <span v-if="dpIdx !== authenticator.transports.displayNameProperties!.length - 1">, </span>
+                    </template>
+                  </div>
+                  <div :class="kcClsx('kcSelectAuthListItemDescriptionClass')">
+                    <span :id="`kc-webauthn-authenticator-createdlabel-${idx}`">
+                      <component :is="props.i18n.msg('webauthn-createdAt-label')" />
+                    </span>
+                    <span :id="`kc-webauthn-authenticator-created-${idx}`">{{ authenticator.createdAt }}</span>
+                  </div>
+                  <div :class="kcClsx('kcSelectAuthListItemFillClass')"></div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+
+        <div
+          id="kc-form-buttons"
+          :class="kcClsx('kcFormButtonsClass')"
+        >
+          <input
+            :id="authButtonId"
+            type="button"
+            autofocus
+            :value="props.i18n.msgStr('webauthn-doAuthenticate')"
+            :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+          />
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

package/src/login/pages/WebauthnError.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'webauthn-error.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, isAppInitiatedAction, execution } = kcContext;
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+    :displayMessage="true"
+  >
+    <template #header>
+      <component :is="i18n.msg('webauthn-error-title')" />
+    </template>
+
+    <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"
+      @click="
+        () => {
+          // @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').requestSubmit();
+        }
+      "
+      type="button"
+      :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+      name="try-again"
+      id="kc-try-again"
+      :value="i18n.msgStr('doTryAgain')"
+    />
+    <form
+      v-if="isAppInitiatedAction"
+      :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"
+      >
+        {{ i18n.msgStr('doCancel') }}
+      </button>
+    </form>
+  </component>
+</template>

package/src/login/pages/WebauthnRegister.useScript.ts

@@ -0,0 +1,109 @@
+import { onMounted, watch, type Ref } from 'vue';
+import { useInsertScriptTags } from '../../tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { waitForElementMountedOnDom } from 'keycloakify/tools/waitForElementMountedOnDom';
+import type { KcContext } from 'keycloakify/login/KcContext';
+
+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;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.WebauthnRegister ? true : false>();
+assert<KcContext.WebauthnRegister extends KcContextLike ? true : false>();
+
+type I18nLike = {
+  msgStr: (
+    key:
+      | 'webauthn-registration-init-label'
+      | 'webauthn-registration-init-label-prompt'
+      | 'webauthn-unsupported-browser-text',
+  ) => string;
+  isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: Ref<I18nLike> }) {
+  const { authButtonId, kcContext, i18n } = params;
+
+  const {
+    url,
+    challenge,
+    userid,
+    username,
+    signatureAlgorithms,
+    rpEntityName,
+    rpId,
+    attestationConveyancePreference,
+    authenticatorAttachment,
+    requireResidentKey,
+    userVerificationRequirement,
+    createTimeout,
+    excludeCredentialIds,
+  } = kcContext;
+
+  const { insertScriptTags } = useInsertScriptTags({
+    componentOrHookName: 'WebauthnRegister',
+    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(i18n.value.msgStr('webauthn-registration-init-label'))},
+                            initLabelPrompt : ${JSON.stringify(i18n.value.msgStr('webauthn-registration-init-label-prompt'))},
+                            errmsg : ${JSON.stringify(i18n.value.msgStr('webauthn-unsupported-browser-text'))}
+                        };
+                        registerByWebAuthn(input);
+                    });
+                `,
+      },
+    ],
+  });
+
+  onMounted(() => {
+    const stopWatch = watch(
+      () => i18n.value.isFetchingTranslations,
+      async (isFetching) => {
+        if (isFetching) {
+          return;
+        }
+
+        stopWatch();
+
+        await waitForElementMountedOnDom({
+          elementId: authButtonId,
+        });
+
+        insertScriptTags();
+      },
+      { immediate: true },
+    );
+  });
+}

package/src/login/pages/WebauthnRegister.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+import { toRef } from 'vue';
+import LogoutOtherSessions from '../components/LogoutOtherSessions.vue';
+import type { I18n } from '../i18n/i18n';
+import type { PageProps } from './PageProps';
+import { useScript } from './WebauthnRegister.useScript';
+
+const props = defineProps<PageProps<Extract<KcContext, { pageId: 'webauthn-register.ftl' }>, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const kcContext = props.kcContext;
+const { url, isSetRetry, isAppInitiatedAction } = kcContext;
+
+const authButtonId = 'authenticateWebAuthnButton';
+
+useScript({ authButtonId, kcContext, i18n: toRef(props, 'i18n') });
+</script>
+
+<template>
+  <component
+    :is="Template"
+    :kcContext="kcContext"
+    :i18n="props.i18n"
+    :doUseDefaultCss="doUseDefaultCss"
+    :classes="classes"
+  >
+    <template #header>
+      <span :class="kcClsx('kcWebAuthnKeyIcon')"></span>
+      <component :is="props.i18n.msg('webauthn-registration-title')" />
+    </template>
+
+    <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="kcClsx"
+          :i18n="props.i18n"
+        />
+      </div>
+    </form>
+    <input
+      type="submit"
+      :class="kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+      :id="authButtonId"
+      :value="props.i18n.msgStr('doRegisterSecurityKey')"
+    />
+    <form
+      v-if="!isSetRetry && isAppInitiatedAction"
+      :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"
+      >
+        <component :is="props.i18n.msg('doCancel')" />
+      </button>
+    </form>
+  </component>
+</template>

package/src/tools/useInsertLinkTags.ts

@@ -0,0 +1,62 @@
+import { onMounted, onUnmounted, ref, type Ref } from 'vue';
+
+const alreadyMountedComponentOrHookNames = new Set<string>();
+
+/**
+ * The component using this can only be mounted once and cannot rerender with
+ * different hrefs. Mounting again reloads the page (mimics a server-rendered
+ * page importing stylesheets in the head).
+ */
+export function useInsertLinkTags(params: { componentOrHookName: string; hrefs: string[] }): {
+  areAllStyleSheetsLoaded: Ref<boolean>;
+} {
+  const { hrefs, componentOrHookName } = params;
+
+  const areAllStyleSheetsLoaded = ref(false);
+
+  onMounted(() => {
+    if (alreadyMountedComponentOrHookNames.has(componentOrHookName)) {
+      if (new URL(window.location.href).searchParams.get('viewMode') !== 'docs') {
+        window.location.reload();
+      }
+      return;
+    }
+    alreadyMountedComponentOrHookNames.add(componentOrHookName);
+  });
+
+  onMounted(() => {
+    let isActive = true;
+
+    (async () => {
+      let lastMountedHtmlElement: HTMLLinkElement | undefined = undefined;
+      const prs: Promise<void>[] = [];
+
+      for (const href of hrefs) {
+        const htmlElement = document.createElement('link');
+        prs.push(new Promise<void>((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;
+      }
+      areAllStyleSheetsLoaded.value = true;
+    });
+
+    onUnmounted(() => {
+      isActive = false;
+    });
+  });
+
+  return { areAllStyleSheetsLoaded };
+}

package/src/tools/useInsertScriptTags.ts

@@ -0,0 +1,75 @@
+import { onMounted } from 'vue';
+import { assert } from 'keycloakify/tools/assert';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace ScriptTag {
+  type Common = { type: 'text/javascript' | 'module' };
+  export type TextContent = Common & { textContent: string | (() => string) };
+  export type Src = Common & { src: string };
+}
+
+export type ScriptTag = ScriptTag.TextContent | ScriptTag.Src;
+
+const alreadyMountedComponentOrHookNames = new Set<string>();
+
+export function useInsertScriptTags(params: { componentOrHookName: string; scriptTags: ScriptTag[] }): {
+  insertScriptTags: () => void;
+} {
+  const { scriptTags, componentOrHookName } = params;
+
+  onMounted(() => {
+    if (alreadyMountedComponentOrHookNames.has(componentOrHookName)) {
+      if (new URL(window.location.href).searchParams.get('viewMode') !== 'docs') {
+        window.location.reload();
+      }
+      return;
+    }
+    alreadyMountedComponentOrHookNames.add(componentOrHookName);
+  });
+
+  let areScriptsInserted = false;
+
+  const insertScriptTags = () => {
+    if (areScriptsInserted) {
+      return;
+    }
+
+    scriptTags.forEach((scriptTag) => {
+      const scripts = document.getElementsByTagName('script');
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if ('textContent' in scriptTag) {
+          const textContent =
+            typeof scriptTag.textContent === 'function' ? scriptTag.textContent() : scriptTag.textContent;
+          if (script.textContent === textContent) {
+            return;
+          }
+          continue;
+        }
+        if ('src' in scriptTag) {
+          if (script.getAttribute('src') === scriptTag.src) {
+            return;
+          }
+          continue;
+        }
+        assert(false);
+      }
+
+      const htmlElement = document.createElement('script');
+      htmlElement.type = scriptTag.type;
+      if ('textContent' in scriptTag) {
+        htmlElement.textContent =
+          typeof scriptTag.textContent === 'function' ? scriptTag.textContent() : scriptTag.textContent;
+      } else if ('src' in scriptTag) {
+        htmlElement.src = scriptTag.src;
+      } else {
+        assert(false);
+      }
+      document.head.appendChild(htmlElement);
+    });
+
+    areScriptsInserted = true;
+  };
+
+  return { insertScriptTags };
+}

package/src/tools/useSetClassName.ts

@@ -0,0 +1,15 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export function useSetClassName(params: { qualifiedName: 'html' | 'body'; className: string | undefined }): void {
+  const { qualifiedName, className } = params;
+
+  onMounted(() => {
+    if (!className || className === '') {
+      return;
+    }
+    const classList = document.getElementsByTagName(qualifiedName)[0].classList;
+    const tokens = className.split(' ');
+    classList.add(...tokens);
+    onUnmounted(() => classList.remove(...tokens));
+  });
+}

package/stories/account/KcContext.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import type { ExtendKcContext } from 'keycloakify/account';
+import type { KcEnvName, ThemeName } from '../kc.gen';
+
+export type KcContextExtension = {
+  themeName: ThemeName;
+
+  properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = {};
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/stories/account/KcContextMock.ts

@@ -0,0 +1,26 @@
+import { createGetKcContextMock } from 'keycloakify/account/KcContext';
+import type { DeepPartial } from 'keycloakify/tools/DeepPartial';
+import { kcEnvDefaults, themeNames } from '../kc.gen';
+import type { KcContext, KcContextExtension, KcContextExtensionPerPage } from './KcContext';
+
+const kcContextExtension: KcContextExtension = {
+  themeName: themeNames[0],
+  properties: {
+    ...kcEnvDefaults,
+  },
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+  kcContextExtension,
+  kcContextExtensionPerPage,
+  overrides: {},
+  overridesPerPage: {},
+});
+
+type PageId = KcContext['pageId'];
+
+export type KcPageStoryProps = {
+  pageId: PageId;
+  kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
+};