Template for passkey login

Author: tonkku107

crates/templates/src/context.rs

@@ -535,6 +535,80 @@ impl LoginContext {
     }
 }
 
+/// Fields of the passkey login form
+#[derive(Serialize, Deserialize, Debug, Clone, Copy, Hash, PartialEq, Eq)]
+#[serde(rename_all = "snake_case")]
+pub enum PasskeyLoginFormField {
+    /// The id field
+    Id,
+
+    /// The response field
+    Response,
+}
+
+impl FormField for PasskeyLoginFormField {
+    fn keep(&self) -> bool {
+        match self {
+            Self::Id => true,
+            Self::Response => false,
+        }
+    }
+}
+
+/// Context used by the `login/passkey.html` template
+#[derive(Serialize, Default)]
+pub struct PasskeyLoginContext {
+    form: FormState<PasskeyLoginFormField>,
+    next: Option<PostAuthContext>,
+    options: String,
+}
+
+impl TemplateContext for PasskeyLoginContext {
+    fn sample(
+        _now: chrono::DateTime<Utc>,
+        _rng: &mut impl Rng,
+        _locales: &[DataLocale],
+    ) -> Vec<Self>
+    where
+        Self: Sized,
+    {
+        // TODO: samples with errors
+        vec![PasskeyLoginContext {
+            form: FormState::default(),
+            next: None,
+            options: String::new(),
+        }]
+    }
+}
+
+impl PasskeyLoginContext {
+    /// Set the form state
+    #[must_use]
+    pub fn with_form_state(self, form: FormState<PasskeyLoginFormField>) -> Self {
+        Self { form, ..self }
+    }
+
+    /// Mutably borrow the form state
+    pub fn form_state_mut(&mut self) -> &mut FormState<PasskeyLoginFormField> {
+        &mut self.form
+    }
+
+    /// Add a post authentication action to the context
+    #[must_use]
+    pub fn with_post_action(self, context: PostAuthContext) -> Self {
+        Self {
+            next: Some(context),
+            ..self
+        }
+    }
+
+    /// Set the webauthn options
+    #[must_use]
+    pub fn with_options(self, options: String) -> Self {
+        Self { options, ..self }
+    }
+}
+
 /// Fields of the registration form
 #[derive(Serialize, Deserialize, Debug, Clone, Copy, Hash, PartialEq, Eq)]
 #[serde(rename_all = "snake_case")]

crates/templates/src/lib.rs

@@ -38,10 +38,11 @@ pub use self::{
         DeviceConsentContext, DeviceLinkContext, DeviceLinkFormField, DeviceNameContext,
         EmailRecoveryContext, EmailVerificationContext, EmptyContext, ErrorContext,
         FormPostContext, IndexContext, LoginContext, LoginFormField, NotFoundContext,
-        PasswordRegisterContext, PolicyViolationContext, PostAuthContext, PostAuthContextInner,
-        RecoveryExpiredContext, RecoveryFinishContext, RecoveryFinishFormField,
-        RecoveryProgressContext, RecoveryStartContext, RecoveryStartFormField, RegisterContext,
-        RegisterFormField, RegisterStepsDisplayNameContext, RegisterStepsDisplayNameFormField,
+        PasskeyLoginContext, PasskeyLoginFormField, PasswordRegisterContext,
+        PolicyViolationContext, PostAuthContext, PostAuthContextInner, RecoveryExpiredContext,
+        RecoveryFinishContext, RecoveryFinishFormField, RecoveryProgressContext,
+        RecoveryStartContext, RecoveryStartFormField, RegisterContext, RegisterFormField,
+        RegisterStepsDisplayNameContext, RegisterStepsDisplayNameFormField,
         RegisterStepsEmailInUseContext, RegisterStepsVerifyEmailContext,
         RegisterStepsVerifyEmailFormField, SiteBranding, SiteConfigExt, SiteFeatures,
         TemplateContext, UpstreamExistingLinkContext, UpstreamRegister, UpstreamRegisterFormField,
@@ -323,7 +324,10 @@ register_templates! {
     pub fn render_swagger_callback(ApiDocContext) { "swagger/oauth2-redirect.html" }
 
     /// Render the login page
-    pub fn render_login(WithLanguage<WithCsrf<LoginContext>>) { "pages/login.html" }
+    pub fn render_login(WithLanguage<WithCsrf<LoginContext>>) { "pages/login/index.html" }
+
+    /// Render the passkey login page
+    pub fn render_passkey_login(WithLanguage<WithCsrf<PasskeyLoginContext>>) { "pages/login/passkey.html" }
 
     /// Render the registration page
     pub fn render_register(WithLanguage<WithCsrf<RegisterContext>>) { "pages/register/index.html" }
@@ -439,6 +443,7 @@ impl Templates {
         check::render_swagger(self, now, rng)?;
         check::render_swagger_callback(self, now, rng)?;
         check::render_login(self, now, rng)?;
+        check::render_passkey_login(self, now, rng)?;
         check::render_register(self, now, rng)?;
         check::render_password_register(self, now, rng)?;
         check::render_register_steps_verify_email(self, now, rng)?;

frontend/knip.config.ts

@@ -9,6 +9,7 @@ export default {
   entry: [
     "src/main.tsx",
     "src/swagger.ts",
+    "src/template_passkey.ts",
     "src/routes/*",
     "i18next-parser.config.ts",
   ],

frontend/locales/en.json

@@ -70,6 +70,7 @@
         "name_field_label": "Name",
         "name_invalid_error": "The entered name is invalid",
         "never_used_message": "Never used",
+        "not_supported": "Passkeys are not supported on this browser",
         "response_invalid_error": "The response from your passkey was invalid: {{error}}",
         "title": "Passkeys"
       },

frontend/src/i18n.ts

@@ -81,7 +81,7 @@ const Backend = {
   },
 } satisfies BackendModule;
 
-export const setupI18n = () => {
+export const setupI18n = () =>
   i18n
     .use(Backend)
     .use(LanguageDetector)
@@ -96,7 +96,6 @@ export const setupI18n = () => {
         escapeValue: false, // React has built-in XSS protections
       },
     } satisfies InitOptions);
-};
 
 import.meta.hot?.on("locales-update", () => {
   i18n.reloadResources().then(() => {

frontend/src/template_passkey.ts

@@ -0,0 +1,74 @@
+// Copyright 2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+
+import { setupI18n } from "./i18n";
+import { checkSupport, performAuthentication } from "./utils/webauthn";
+
+const t = await setupI18n();
+
+interface IWindow {
+  WEBAUTHN_OPTIONS?: string;
+}
+
+const options =
+  typeof window !== "undefined" && (window as IWindow).WEBAUTHN_OPTIONS;
+
+const errors = document.getElementById("errors");
+const retryButtonContainer = document.getElementById("retry-button-container");
+const retryButton = document.getElementById("retry-button");
+const form = document.getElementById("passkey-form");
+const formResponse = form?.querySelector('[name="response"]');
+
+function setError(text: string) {
+  const error = document.createElement("div");
+  error.classList.add("text-critical", "font-medium");
+  error.innerText = text;
+  errors?.appendChild(error);
+}
+
+async function run() {
+  if (!options) {
+    throw new Error("WEBAUTHN_OPTIONS is not defined");
+  }
+
+  if (
+    !errors ||
+    !retryButtonContainer ||
+    !retryButton ||
+    !form ||
+    !formResponse
+  ) {
+    throw new Error("Missing elements in document");
+  }
+
+  errors.innerHTML = "";
+
+  if (!checkSupport()) {
+    setError(t("frontend.account.passkeys.not_supported"));
+    return;
+  }
+
+  try {
+    const response = await performAuthentication(options);
+    (formResponse as HTMLInputElement).value = response;
+    (form as HTMLFormElement).submit();
+  } catch (e) {
+    if (e instanceof Error && e.name !== "NotAllowedError") {
+      setError(e.toString());
+    }
+    retryButtonContainer?.classList.remove("hidden");
+    return;
+  }
+}
+
+if (!errors?.children.length) {
+  run();
+} else {
+  retryButtonContainer?.classList.remove("hidden");
+}
+
+retryButton?.addEventListener("click", () => {
+  run();
+});

frontend/src/templates.css

@@ -175,3 +175,13 @@
     }
   }
 }
+
+.fullscreen-noscript {
+  z-index: 99;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: var(--cpd-color-bg-canvas-default);
+}

frontend/src/utils/webauthn.ts

@@ -116,3 +116,13 @@ export async function performRegistration(options: string): Promise<string> {
 
   return JSON.stringify(credential);
 }
+
+export async function performAuthentication(options: string): Promise<string> {
+  const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(
+    JSON.parse(options),
+  );
+
+  const credential = await navigator.credentials.get({ publicKey });
+
+  return JSON.stringify(credential);
+}

frontend/vite.config.ts

@@ -59,6 +59,7 @@ export default defineConfig((env) => ({
         resolve(__dirname, "src/shared.css"),
         resolve(__dirname, "src/templates.css"),
         resolve(__dirname, "src/swagger.ts"),
+        resolve(__dirname, "src/template_passkey.ts"),
       ],
     },
   },

templates/components/button.html

@@ -27,6 +27,7 @@
   name="",
   type="submit",
   class="",
+  id="",
   value="",
   disabled=False,
   kind="primary",
@@ -40,6 +41,7 @@
     type="{{ type }}"
     {% if disabled %}disabled{% endif %}
     class="cpd-button {{ class }}"
+    id="{{id}}"
     data-kind="{{ kind }}"
     data-size="{{ size }}"
     {% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
@@ -53,6 +55,7 @@
   name="",
   type="submit",
   class="",
+  id="",
   value="",
   disabled=False,
   autocomplete=False,
@@ -65,6 +68,7 @@
     {% if disabled %}disabled{% endif %}
     data-kind="primary"
     class="cpd-link {{ class }}"
+    id="{{id}}"
     {% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
     {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
     {% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
@@ -76,6 +80,7 @@
   name="",
   type="submit",
   class="",
+  id="",
   value="",
   disabled=False,
   size="lg",
@@ -87,6 +92,7 @@
     value="{{ value }}"
     type="{{ type }}"
     class="cpd-button {{ class }}"
+    id="{{id}}"
     data-kind="secondary"
     data-size="{{ size }}"
     {% if disabled %}disabled{% endif %}