@andreyyolkin/keycloakify-vue 0.1.2 → 0.2.1

package/README.md

@@ -41,6 +41,14 @@ The easiest way to get started is the official starter template:
   and `IdpReviewUserProfile`.
 - **`i18nBuilder`** — factory for wiring Keycloakify's `noJsx` i18n engine into Vue (returns `msg()` /
   `advancedMsg()` that produce sanitized `VNode`s).
+  > **`withCustomTranslations` must be called from a plain `.ts`/`.tsx`/`.js` file, never from a `.vue` SFC.**
+  > At build time, `keycloakify`'s `generateMessageProperties` step statically scans your theme source for a
+  > `withCustomTranslations({...})` call to produce the server-side `messages_<lang>.properties` bundle — but
+  > it only scans files matching `/\.(js|ts|tsx)$/`, so a call placed inside a `<script setup>` block of a
+  > `.vue` file is silently skipped and those keys never reach the server bundle (client-side `msg()` still
+  > works, which can make the gap easy to miss). Keep your `i18nBuilder(...).withCustomTranslations(...)`
+  > call in a dedicated `i18n.ts` (as in this repo's `stories/login/i18n.ts`) and import it from your `.vue`
+  > components instead.
 - **Account theme** — importable from `@andreyyolkin/keycloakify-vue/account`: its own `DefaultPage` + `Template`,
   the 7 account pages at `@andreyyolkin/keycloakify-vue/account/pages/*.vue`, and an account `i18nBuilder`.
 - **`bin` handlers** — `_keycloakify-custom-handler` delegates `update-kc-gen`, `eject-page`,

package/keycloakify-vue/account/pages/Log.vue

@@ -28,37 +28,37 @@ const { log } = kcContext;
       <div class="col-md-10">
         <h2><component :is="props.i18n.msg('accountLogHtmlTitle')" /></h2>
       </div>
-    </div>
 
-    <table class="table table-striped table-bordered">
-      <thead>
-        <tr>
-          <td><component :is="props.i18n.msg('date')" /></td>
-          <td><component :is="props.i18n.msg('event')" /></td>
-          <td><component :is="props.i18n.msg('ip')" /></td>
-          <td><component :is="props.i18n.msg('client')" /></td>
-          <td><component :is="props.i18n.msg('details')" /></td>
-        </tr>
-      </thead>
+      <table class="table table-striped table-bordered">
+        <thead>
+          <tr>
+            <td><component :is="props.i18n.msg('date')" /></td>
+            <td><component :is="props.i18n.msg('event')" /></td>
+            <td><component :is="props.i18n.msg('ip')" /></td>
+            <td><component :is="props.i18n.msg('client')" /></td>
+            <td><component :is="props.i18n.msg('details')" /></td>
+          </tr>
+        </thead>
 
-      <tbody>
-        <tr
-          v-for="(event, index) in log.events"
-          :key="index"
-        >
-          <td>{{ event.date ? new Date(event.date).toLocaleString() : '' }}</td>
-          <td>{{ event.event }}</td>
-          <td>{{ event.ipAddress }}</td>
-          <td>{{ event.client || '' }}</td>
-          <td>
-            <span
-              v-for="(detail, detailIndex) in event.details"
-              :key="detailIndex"
-              >{{ `${detail.key} = ${detail.value}` }}{{ detailIndex < event.details.length - 1 ? ', ' : '' }}</span
-            >
-          </td>
-        </tr>
-      </tbody>
-    </table>
+        <tbody>
+          <tr
+            v-for="(event, index) in log.events"
+            :key="index"
+          >
+            <td>{{ event.date ? new Date(event.date).toLocaleString() : '' }}</td>
+            <td>{{ event.event }}</td>
+            <td>{{ event.ipAddress }}</td>
+            <td>{{ event.client || '' }}</td>
+            <td>
+              <span
+                v-for="(detail, detailIndex) in event.details"
+                :key="detailIndex"
+                >{{ `${detail.key} = ${detail.value}` }}{{ detailIndex < event.details.length - 1 ? ', ' : '' }}</span
+              >
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </component>
 </template>

package/keycloakify-vue/account/pages/PageProps.d.ts

@@ -1,7 +1,7 @@
-import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { ClassKey } from '../TemplateProps';
 import type { Component } from 'vue';
 export type PageProps<NarrowedKcContext, I18n> = {
-    Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+    Template: Component;
     kcContext: NarrowedKcContext;
     i18n: I18n;
     doUseDefaultCss: boolean;

package/keycloakify-vue/login/Template.vue

@@ -27,7 +27,8 @@ const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
 const slots = useSlots();
 
 onMounted(() => {
-  document.title = props.documentTitle ?? props.i18n.msgStr('loginTitle', kcContext.realm.displayName);
+  document.title =
+    props.documentTitle ?? props.i18n.msgStr('loginTitle', kcContext.realm.displayName || kcContext.realm.name);
 });
 
 useSetClassName({ qualifiedName: 'html', className: kcClsx('kcHtmlClass') });
@@ -81,9 +82,8 @@ function onTryAnotherWay() {
       <div
         id="kc-header-wrapper"
         :class="kcClsx('kcHeaderWrapperClass')"
-      >
-        {{ i18n.msgStr('loginTitleHtml', realm.displayNameHtml) }}
-      </div>
+        v-html="kcSanitize(i18n.msgStr('loginTitleHtml', realm.displayNameHtml || realm.name))"
+      ></div>
     </div>
 
     <div :class="kcClsx('kcFormCardClass')">
@@ -97,45 +97,47 @@ function onTryAnotherWay() {
             id="kc-locale-wrapper"
             :class="kcClsx('kcLocaleWrapperClass')"
           >
-            <div
-              id="kc-locale-dropdown"
-              :class="clsx('menu-button-links', kcClsx('kcLocaleDropDownClass'))"
-            >
-              <button
-                :tabindex="1"
-                id="kc-current-locale-link"
-                :aria-label="i18n.msgStr('languages')"
-                aria-haspopup="true"
-                aria-expanded="false"
-                aria-controls="language-switch1"
+            <slot name="localeSelector">
+              <div
+                id="kc-locale-dropdown"
+                :class="clsx('menu-button-links', kcClsx('kcLocaleDropDownClass'))"
               >
-                {{ i18n.currentLanguage.label }}
-              </button>
-              <ul
-                role="menu"
-                :tabindex="-1"
-                aria-labelledby="kc-current-locale-link"
-                aria-activedescendant=""
-                id="language-switch1"
-                :class="kcClsx('kcLocaleListClass')"
-              >
-                <li
-                  v-for="(enabledLanguage, i) in i18n.enabledLanguages"
-                  :key="enabledLanguage.languageTag"
-                  :class="kcClsx('kcLocaleListItemClass')"
-                  role="none"
+                <button
+                  :tabindex="1"
+                  id="kc-current-locale-link"
+                  :aria-label="i18n.msgStr('languages')"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                  aria-controls="language-switch1"
+                >
+                  {{ i18n.currentLanguage.label }}
+                </button>
+                <ul
+                  role="menu"
+                  :tabindex="-1"
+                  aria-labelledby="kc-current-locale-link"
+                  aria-activedescendant=""
+                  id="language-switch1"
+                  :class="kcClsx('kcLocaleListClass')"
                 >
-                  <a
-                    role="menuitem"
-                    :id="`language-${i + 1}`"
-                    :class="kcClsx('kcLocaleItemClass')"
-                    :href="enabledLanguage.href"
+                  <li
+                    v-for="(enabledLanguage, i) in i18n.enabledLanguages"
+                    :key="enabledLanguage.languageTag"
+                    :class="kcClsx('kcLocaleListItemClass')"
+                    role="none"
                   >
-                    {{ enabledLanguage.label }}
-                  </a>
-                </li>
-              </ul>
-            </div>
+                    <a
+                      role="menuitem"
+                      :id="`language-${i + 1}`"
+                      :class="kcClsx('kcLocaleItemClass')"
+                      :href="enabledLanguage.href"
+                    >
+                      {{ enabledLanguage.label }}
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </slot>
           </div>
         </div>
 

package/keycloakify-vue/login/Template.vue.d.ts

@@ -2,13 +2,15 @@ import type { KcContext } from 'keycloakify/login/KcContext';
 import type { I18n } from './i18n/i18n';
 import type { TemplateProps } from './TemplateProps';
 type __VLS_Props = TemplateProps<KcContext, I18n>;
-declare var __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    localeSelector?: (props: typeof __VLS_1) => any;
 } & {
-    socialProviders?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    info?: (props: typeof __VLS_15) => any;
+    socialProviders?: (props: typeof __VLS_15) => any;
+} & {
+    info?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     displayInfo: boolean;

package/keycloakify-vue/login/components/PasswordWrapper.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   kcClsx: KcClsx;
   i18n: I18n;
   passwordInputId: string;
+  tabIndex?: number;
 }>();
 
 const isPasswordRevealed = ref(false);
@@ -28,6 +29,7 @@ watch(
     <slot />
     <button
       type="button"
+      :tabindex="tabIndex"
       :class="kcClsx('kcFormPasswordVisibilityButtonClass')"
       :aria-label="i18n.msgStr(isPasswordRevealed ? 'hidePassword' : 'showPassword')"
       :aria-controls="passwordInputId"

package/keycloakify-vue/login/components/PasswordWrapper.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     kcClsx: KcClsx;
     i18n: I18n;
     passwordInputId: string;
+    tabIndex?: number;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/keycloakify-vue/login/pages/Login.useScript.d.ts

@@ -0,0 +1,25 @@
+import { type Ref } from 'vue';
+import type { KcContext } from 'keycloakify/login/KcContext';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: 'true' | 'false';
+    challenge: string;
+    userVerification: KcContext.WebauthnAuthenticate['userVerification'];
+    rpId: string;
+    createTimeout: number | string;
+    mediation?: string;
+    authenticatorAttachment?: string;
+    enableWebAuthnConditionalUI?: boolean;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-unsupported-browser-text' | 'passkey-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    webAuthnButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Ref<I18nLike>;
+}): void;
+export {};

package/keycloakify-vue/login/pages/Login.useScript.js

@@ -0,0 +1,75 @@
+import { onMounted, watch } from "vue";
+import { useInsertScriptTags } from "../../tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
+assert();
+assert();
+function useScript(params) {
+  const { webAuthnButtonId, kcContext, i18n } = params;
+  const {
+    url,
+    isUserIdentified,
+    challenge,
+    userVerification,
+    rpId,
+    createTimeout,
+    mediation,
+    authenticatorAttachment
+  } = kcContext;
+  const { insertScriptTags } = useInsertScriptTags({
+    componentOrHookName: "Login",
+    scriptTags: [
+      {
+        type: "module",
+        textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+                    const authButton = document.getElementById('${webAuthnButtonId}');
+                    const input = {
+                        isUserIdentified : ${isUserIdentified},
+                        challenge : ${JSON.stringify(challenge)},
+                        userVerification : ${JSON.stringify(userVerification)},
+                        rpId : ${JSON.stringify(rpId)},
+                        createTimeout : ${JSON.stringify(createTimeout)},
+                        mediation : ${JSON.stringify(mediation)},
+                        authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(i18n.value.msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    }, { once: true });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(i18n.value.msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+      }
+    ]
+  });
+  onMounted(() => {
+    if (kcContext.enableWebAuthnConditionalUI !== true) {
+      return;
+    }
+    const stopWatch = watch(
+      () => i18n.value.isFetchingTranslations,
+      async (isFetching) => {
+        if (isFetching) {
+          return;
+        }
+        stopWatch();
+        await waitForElementMountedOnDom({
+          elementId: webAuthnButtonId
+        });
+        insertScriptTags();
+      },
+      { immediate: true }
+    );
+  });
+}
+export {
+  useScript
+};

package/keycloakify-vue/login/pages/Login.vue

@@ -3,10 +3,11 @@ import { kcSanitize } from 'keycloakify/lib/kcSanitize';
 import type { KcContext } from 'keycloakify/login/KcContext';
 import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
 import { clsx } from 'keycloakify/tools/clsx';
-import { computed, ref } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import PasswordWrapper from '../components/PasswordWrapper.vue';
 import type { I18n } from '../i18n/i18n';
 import type { PageProps } from './PageProps';
+import { useScript } from './Login.useScript';
 
 const props = defineProps<PageProps<Extract<KcContext, { pageId: 'login.ftl' }>, I18n>>();
 
@@ -16,7 +17,18 @@ const { kcClsx } = getKcClsx({
 });
 
 const kcContext = props.kcContext;
-const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
+const {
+  social,
+  realm,
+  url,
+  usernameHidden,
+  login,
+  auth,
+  registrationDisabled,
+  messagesPerField,
+  enableWebAuthnConditionalUI,
+  authenticators,
+} = kcContext;
 
 const isLoginButtonDisabled = ref(false);
 
@@ -28,6 +40,14 @@ function onSubmit() {
   isLoginButtonDisabled.value = true;
   return true;
 }
+
+const webAuthnButtonId = 'authenticateWebAuthnButton';
+
+useScript({
+  webAuthnButtonId,
+  kcContext,
+  i18n: toRef(props, 'i18n'),
+});
 </script>
 
 <template>
@@ -130,7 +150,7 @@ function onSubmit() {
               :value="login.username ?? ''"
               type="text"
               autofocus
-              autocomplete="username"
+              :autocomplete="enableWebAuthnConditionalUI ? 'username webauthn' : 'username'"
               :aria-invalid="messagesPerField.existsError('username', 'password')"
             />
             <span
@@ -151,6 +171,7 @@ function onSubmit() {
             </label>
             <PasswordWrapper
               :kcClsx="kcClsx"
+              :tabIndex="4"
               :i18n="i18n"
               passwordInputId="password"
             >
@@ -226,5 +247,69 @@ function onSubmit() {
         </form>
       </div>
     </div>
+
+    <template v-if="enableWebAuthnConditionalUI">
+      <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>
+
+      <template v-if="authenticators !== undefined && authenticators.authenticators.length !== 0">
+        <form
+          id="authn_select"
+          :class="kcClsx('kcFormClass')"
+        >
+          <input
+            v-for="(authenticator, i) in authenticators.authenticators"
+            :key="i"
+            type="hidden"
+            name="authn_use_chk"
+            :value="authenticator.credentialId"
+            readonly
+          />
+        </form>
+      </template>
+
+      <br />
+
+      <input
+        :id="webAuthnButtonId"
+        type="button"
+        :class="kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')"
+        :value="i18n.msgStr('passkey-doAuthenticate')"
+      />
+    </template>
   </component>
 </template>

package/keycloakify-vue/login/pages/LoginPasskeysConditionalAuthenticate.useScript.js

@@ -22,7 +22,7 @@ function useScript(params) {
                         challenge : ${JSON.stringify(challenge)},
                         userVerification : ${JSON.stringify(userVerification)},
                         rpId : ${JSON.stringify(rpId)},
-                        createTimeout : ${createTimeout}
+                        createTimeout : ${JSON.stringify(createTimeout)}
                     };
                     authButton.addEventListener("click", () => {
                         authenticateByWebAuthn({

package/keycloakify-vue/login/pages/LoginPassword.useScript.d.ts

@@ -9,6 +9,8 @@ type KcContextLike = {
     userVerification: KcContext.WebauthnAuthenticate['userVerification'];
     rpId: string;
     createTimeout: number | string;
+    mediation?: string;
+    authenticatorAttachment?: string;
     enableWebAuthnConditionalUI?: boolean;
 };
 type I18nLike = {

package/keycloakify-vue/login/pages/LoginPassword.useScript.js

@@ -6,7 +6,16 @@ assert();
 assert();
 function useScript(params) {
   const { webAuthnButtonId, kcContext, i18n } = params;
-  const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+  const {
+    url,
+    isUserIdentified,
+    challenge,
+    userVerification,
+    rpId,
+    createTimeout,
+    mediation,
+    authenticatorAttachment
+  } = kcContext;
   const { insertScriptTags } = useInsertScriptTags({
     componentOrHookName: "LoginPassword",
     scriptTags: [
@@ -22,7 +31,9 @@ function useScript(params) {
                         challenge : ${JSON.stringify(challenge)},
                         userVerification : ${JSON.stringify(userVerification)},
                         rpId : ${JSON.stringify(rpId)},
-                        createTimeout : ${createTimeout}
+                        createTimeout : ${JSON.stringify(createTimeout)},
+                        mediation : ${JSON.stringify(mediation)},
+                        authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)}
                     };
                     authButton.addEventListener("click", () => {
                         authenticateByWebAuthn({

package/keycloakify-vue/login/pages/LoginUsername.useScript.d.ts

@@ -9,6 +9,8 @@ type KcContextLike = {
     userVerification: KcContext.WebauthnAuthenticate['userVerification'];
     rpId: string;
     createTimeout: number | string;
+    mediation?: string;
+    authenticatorAttachment?: string;
     enableWebAuthnConditionalUI?: boolean;
 };
 type I18nLike = {

package/keycloakify-vue/login/pages/LoginUsername.useScript.js

@@ -6,7 +6,16 @@ assert();
 assert();
 function useScript(params) {
   const { webAuthnButtonId, kcContext, i18n } = params;
-  const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+  const {
+    url,
+    isUserIdentified,
+    challenge,
+    userVerification,
+    rpId,
+    createTimeout,
+    mediation,
+    authenticatorAttachment
+  } = kcContext;
   const { insertScriptTags } = useInsertScriptTags({
     componentOrHookName: "LoginUsername",
     scriptTags: [
@@ -22,7 +31,9 @@ function useScript(params) {
                         challenge : ${JSON.stringify(challenge)},
                         userVerification : ${JSON.stringify(userVerification)},
                         rpId : ${JSON.stringify(rpId)},
-                        createTimeout : ${createTimeout}
+                        createTimeout : ${JSON.stringify(createTimeout)},
+                        mediation : ${JSON.stringify(mediation)},
+                        authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)}
                     };
                     authButton.addEventListener("click", () => {
                         authenticateByWebAuthn({

package/keycloakify-vue/login/pages/PageProps.d.ts

@@ -1,7 +1,7 @@
-import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { ClassKey } from '../TemplateProps';
 import type { Component } from 'vue';
 export type PageProps<NarrowedKcContext, I18n> = {
-    Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+    Template: Component;
     kcContext: NarrowedKcContext;
     i18n: I18n;
     doUseDefaultCss: boolean;

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

@@ -19,14 +19,14 @@ function useScript(params) {
                     authButton.addEventListener("click", function() {
                         const input = {
                             isUserIdentified : ${isUserIdentified},
-                            challenge : '${challenge}',
-                            userVerification : '${userVerification}',
-                            rpId : '${rpId}',
-                            createTimeout : ${createTimeout},
+                            challenge : ${JSON.stringify(challenge)},
+                            userVerification : ${JSON.stringify(userVerification)},
+                            rpId : ${JSON.stringify(rpId)},
+                            createTimeout : ${JSON.stringify(createTimeout)},
                             errmsg : ${JSON.stringify(i18n.value.msgStr("webauthn-unsupported-browser-text"))}
                         };
                         authenticateByWebAuthn(input);
-                    });
+                    }, { once: true });
                 `
       }
     ]

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

@@ -11,7 +11,8 @@ type KcContextLike = {
     rpId: string;
     attestationConveyancePreference: string;
     authenticatorAttachment: string;
-    requireResidentKey: string;
+    requireResidentKey?: string;
+    residentKey?: string;
     userVerificationRequirement: string;
     createTimeout: number | string;
     excludeCredentialIds: string;

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

@@ -17,6 +17,7 @@ function useScript(params) {
     attestationConveyancePreference,
     authenticatorAttachment,
     requireResidentKey,
+    residentKey,
     userVerificationRequirement,
     createTimeout,
     excludeCredentialIds
@@ -31,24 +32,25 @@ function useScript(params) {
                     const registerButton = document.getElementById('${authButtonId}');
                     registerButton.addEventListener("click", function() {
                         const input = {
-                            challenge : '${challenge}',
-                            userid : '${userid}',
-                            username : '${username}',
+                            challenge : ${JSON.stringify(challenge)},
+                            userid : ${JSON.stringify(userid)},
+                            username : ${JSON.stringify(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)},
+                            residentKey : ${JSON.stringify(residentKey)},
                             userVerificationRequirement : ${JSON.stringify(userVerificationRequirement)},
-                            createTimeout : ${createTimeout},
+                            createTimeout : ${JSON.stringify(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);
-                    });
+                    }, { once: true });
                 `
       }
     ]