Template for passkey login

Author: tonkku107

crates/templates/src/context.rs

@@ -507,6 +507,76 @@ 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) -> 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

@@ -37,11 +37,12 @@ pub use self::{
         AccountInactiveContext, ApiDocContext, AppContext, CompatSsoContext, ConsentContext,
         DeviceConsentContext, DeviceLinkContext, DeviceLinkFormField, EmailRecoveryContext,
         EmailVerificationContext, EmptyContext, ErrorContext, FormPostContext, IndexContext,
-        LoginContext, LoginFormField, NotFoundContext, PasswordRegisterContext,
-        PolicyViolationContext, PostAuthContext, PostAuthContextInner, ReauthContext,
-        ReauthFormField, RecoveryExpiredContext, RecoveryFinishContext, RecoveryFinishFormField,
-        RecoveryProgressContext, RecoveryStartContext, RecoveryStartFormField, RegisterContext,
-        RegisterFormField, RegisterStepsDisplayNameContext, RegisterStepsDisplayNameFormField,
+        LoginContext, LoginFormField, NotFoundContext, PasskeyLoginContext, PasskeyLoginFormField,
+        PasswordRegisterContext, PolicyViolationContext, PostAuthContext, PostAuthContextInner,
+        ReauthContext, ReauthFormField, RecoveryExpiredContext, RecoveryFinishContext,
+        RecoveryFinishFormField, RecoveryProgressContext, RecoveryStartContext,
+        RecoveryStartFormField, RegisterContext, RegisterFormField,
+        RegisterStepsDisplayNameContext, RegisterStepsDisplayNameFormField,
         RegisterStepsEmailInUseContext, RegisterStepsVerifyEmailContext,
         RegisterStepsVerifyEmailFormField, SiteBranding, SiteConfigExt, SiteFeatures,
         TemplateContext, UpstreamExistingLinkContext, UpstreamRegister, UpstreamRegisterFormField,
@@ -325,7 +326,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" }
@@ -441,6 +445,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/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

@@ -20,3 +20,15 @@ export async function performRegistration(options: string): Promise<string> {
 
   return JSON.stringify(credential);
 }
+
+export async function performAuthentication(options: string): Promise<string> {
+  const opts: { publicKey: PublicKeyCredentialRequestOptionsJSON } =
+    JSON.parse(options);
+  const publicKey = PublicKeyCredential.parseRequestOptionsFromJSON(
+    opts.publicKey,
+  );
+
+  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 %}

templates/pages/login.html renamed to templates/pages/login/index.html

@@ -10,6 +10,8 @@
 
 {% from "components/idp_brand.html" import logo %}
 
+{% set params = next["params"] | default({}) | to_params(prefix="?") %}
+
 {% block content %}
   <form method="POST" class="flex flex-col gap-10">
     <header class="page-heading">
@@ -67,15 +69,14 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
       {% endif %}
 
       {% if features.passkeys_enabled %}
-        {{ button.link(text=_("mas.login.with_passkey")) }}
+        {{ button.link(text=_("mas.login.with_passkey"), href="/login/passkey" ~ params) }}
       {% endif %}
 
       {% if (features.password_login or features.passkeys_enabled) and providers %}
         {{ field.separator() }}
       {% endif %}
 
       {% if providers %}
-        {% set params = next["params"] | default({}) | to_params(prefix="?") %}
         {% for provider in providers %}
           {% set name = provider.human_name or (provider.issuer | simplify_url(keep_path=True)) or provider.id %}
           <a class="cpd-button {%- if provider.brand_name %} has-icon {%- endif %}" data-kind="secondary" data-size="lg" href="{{ ('/upstream/authorize/' ~ provider.id ~ params) | prefix_url }}">
@@ -92,12 +93,11 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
           {{ _("mas.login.call_to_register") }}
         </p>
 
-        {% set params = next["params"] | default({}) | to_params(prefix="?") %}
         {{ button.link_text(text=_("action.create_account"), href="/register" ~ params) }}
       </div>
     {% endif %}
 
-    {% if not providers and not features.password_login %}
+    {% if not providers and not features.password_login and not features.passkeys_enabled %}
       <div class="text-center">
         {{ _("mas.login.no_login_methods") }}
       </div>