Template for passkey login

Author: tonkku107

crates/templates/src/context.rs

@@ -394,13 +394,19 @@ pub enum LoginFormField {
 
     /// The password field
     Password,
+
+    /// The passkey challenge
+    PasskeyChallengeId,
+
+    /// The passkey response
+    PasskeyResponse,
 }
 
 impl FormField for LoginFormField {
     fn keep(&self) -> bool {
         match self {
-            Self::Username => true,
-            Self::Password => false,
+            Self::Username | Self::PasskeyChallengeId => true,
+            Self::Password | Self::PasskeyResponse => false,
         }
     }
 }
@@ -461,6 +467,7 @@ pub struct LoginContext {
     form: FormState<LoginFormField>,
     next: Option<PostAuthContext>,
     providers: Vec<UpstreamOAuthProvider>,
+    webauthn_options: String,
 }
 
 impl TemplateContext for LoginContext {
@@ -478,11 +485,13 @@ impl TemplateContext for LoginContext {
                 form: FormState::default(),
                 next: None,
                 providers: Vec::new(),
+                webauthn_options: String::new(),
             },
             LoginContext {
                 form: FormState::default(),
                 next: None,
                 providers: Vec::new(),
+                webauthn_options: String::new(),
             },
             LoginContext {
                 form: FormState::default()
@@ -496,12 +505,14 @@ impl TemplateContext for LoginContext {
                     ),
                 next: None,
                 providers: Vec::new(),
+                webauthn_options: String::new(),
             },
             LoginContext {
                 form: FormState::default()
                     .with_error_on_field(LoginFormField::Username, FieldError::Exists),
                 next: None,
                 providers: Vec::new(),
+                webauthn_options: String::new(),
             },
         ]
     }
@@ -533,6 +544,15 @@ impl LoginContext {
             ..self
         }
     }
+
+    /// Set the webauthn options
+    #[must_use]
+    pub fn with_webauthn_options(self, webauthn_options: String) -> Self {
+        Self {
+            webauthn_options,
+            ..self
+        }
+    }
 }
 
 /// Fields of the registration form

frontend/knip.config.ts

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

frontend/locales/en.json

@@ -345,5 +345,8 @@
       "view_messages": "View your existing messages and data",
       "view_profile": "See your profile info and contact details"
     }
+  },
+  "passkeys": {
+    "login": "Continue with Passkey"
   }
 }

frontend/src/components/PasskeyLoginButton.tsx

@@ -0,0 +1,65 @@
+import { useMutation } from "@tanstack/react-query";
+import IconKey from "@vector-im/compound-design-tokens/assets/web/icons/key";
+import { Alert, Button } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
+import { checkSupport, performAuthentication } from "../utils/webauthn";
+
+const PasskeyLoginButton: React.FC<{ options?: string }> = ({ options }) => {
+  const { t } = useTranslation();
+  const webauthnCeremony = useMutation({
+    mutationFn: async (options: string) => {
+      try {
+        return { response: await performAuthentication(options) };
+      } catch (e) {
+        console.error(e);
+        return { error: e as Error };
+      }
+    },
+    onSuccess: (data) => {
+      if (data.response) {
+        const form = document.querySelector("form") as HTMLFormElement;
+        const formResponse = form?.querySelector(
+          '[name="passkey_response"]',
+        ) as HTMLInputElement;
+
+        formResponse.value = data.response;
+        form.submit();
+      }
+    },
+  });
+
+  if (!options) return;
+
+  const handleClick = async (
+    e: React.FormEvent<HTMLButtonElement>,
+  ): Promise<void> => {
+    e.preventDefault();
+
+    webauthnCeremony.mutate(options);
+  };
+
+  const support = checkSupport();
+
+  return (
+    <div className="flex flex-col gap-6">
+      {webauthnCeremony.data?.error &&
+        webauthnCeremony.data?.error.name !== "NotAllowedError" && (
+          <Alert
+            type="critical"
+            title={webauthnCeremony.data?.error.toString()}
+          />
+        )}
+      <Button
+        kind="secondary"
+        size="lg"
+        Icon={IconKey}
+        onClick={handleClick}
+        disabled={!support}
+      >
+        {t("passkeys.login")}
+      </Button>
+    </div>
+  );
+};
+
+export default PasskeyLoginButton;

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.tsx

@@ -0,0 +1,35 @@
+// Copyright 2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import { StrictMode, Suspense } from "react";
+import { createRoot } from "react-dom/client";
+import { I18nextProvider } from "react-i18next";
+import LoadingSpinner from "./components/LoadingSpinner";
+import PasskeyLoginButton from "./components/PasskeyLoginButton";
+import { queryClient } from "./graphql";
+import i18n, { setupI18n } from "./i18n";
+
+setupI18n();
+
+interface IWindow {
+  WEBAUTHN_OPTIONS?: string;
+}
+
+const options =
+  (typeof window !== "undefined" && (window as IWindow).WEBAUTHN_OPTIONS) ||
+  undefined;
+
+createRoot(document.getElementById("passkey-root") as HTMLElement).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <Suspense fallback={<LoadingSpinner />}>
+        <I18nextProvider i18n={i18n}>
+          <PasskeyLoginButton options={options} />
+        </I18nextProvider>
+      </Suspense>
+    </QueryClientProvider>
+  </StrictMode>,
+);

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.tsx"),
       ],
     },
   },

templates/pages/login.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">
@@ -68,20 +70,26 @@ <h1 class="title">{{ _("mas.login.headline") }}</h1>
         {{ button.button(text=_("action.continue")) }}
       {% endif %}
 
-      {% if features.password_login and features.passkeys_enabled %}
-        {{ field.separator() }}
-      {% endif %}
-
       {% if features.passkeys_enabled %}
-        {{ button.link(text=_("mas.login.with_passkey")) }}
+        <div id="passkey-root"></div>
+
+        <div class="hidden">
+          {% call(f) field.field(name="passkey_challenge_id", form_state=form) %}
+            <input {{ field.attributes(f) }} class="cpd-text-control" type="hidden" />
+          {% endcall %}
+
+          {% call(f) field.field(name="passkey_response", form_state=form) %}
+            <input {{ field.attributes(f) }} class="cpd-text-control" type="hidden" />
+          {% endcall %}
+        </div>
+
       {% 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 }}">
@@ -98,15 +106,21 @@ <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>
     {% endif %}
   </form>
+
+  {% if features.passkeys_enabled %}
+    <script>
+      window.WEBAUTHN_OPTIONS = "{{ webauthn_options | add_slashes | safe }}";
+    </script>
+    {{ include_asset('src/template_passkey.tsx') | indent(4) | safe }}
+  {% endif %}
 {% endblock content %}

translations/en.json

@@ -10,11 +10,11 @@
     },
     "continue": "Continue",
     "@continue": {
-      "context": "form_post.html:25:28-48, pages/consent.html:57:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:68:30-50, pages/reauth.html:32:28-48, pages/recovery/start.html:38:26-46, pages/register/password.html:74:26-46, pages/register/steps/display_name.html:43:28-48, pages/register/steps/verify_email.html:51:26-46, pages/sso.html:37:28-48"
+      "context": "form_post.html:25:28-48, pages/consent.html:57:28-48, pages/device_consent.html:124:13-33, pages/device_link.html:40:26-46, pages/login.html:70:30-50, pages/reauth.html:32:28-48, pages/recovery/start.html:38:26-46, pages/register/password.html:74:26-46, pages/register/steps/display_name.html:43:28-48, pages/register/steps/verify_email.html:51:26-46, pages/sso.html:37:28-48"
     },
     "create_account": "Create Account",
     "@create_account": {
-      "context": "pages/login.html:102:33-59, pages/upstream_oauth2/do_register.html:192:26-52"
+      "context": "pages/login.html:109:33-59, pages/upstream_oauth2/do_register.html:192:26-52"
     },
     "sign_in": "Sign in",
     "@sign_in": {
@@ -91,15 +91,15 @@
     },
     "password": "Password",
     "@password": {
-      "context": "pages/login.html:56:37-57, pages/reauth.html:28:35-55, pages/register/password.html:42:33-53"
+      "context": "pages/login.html:58:37-57, pages/reauth.html:28:35-55, pages/register/password.html:42:33-53"
     },
     "password_confirm": "Confirm password",
     "@password_confirm": {
       "context": "pages/register/password.html:46:33-61"
     },
     "username": "Username",
     "@username": {
-      "context": "pages/login.html:51:39-59, pages/register/index.html:30:35-55, pages/register/password.html:34:33-53, pages/upstream_oauth2/do_register.html:101:35-55, pages/upstream_oauth2/do_register.html:106:39-59"
+      "context": "pages/login.html:53:39-59, pages/register/index.html:30:35-55, pages/register/password.html:34:33-53, pages/upstream_oauth2/do_register.html:101:35-55, pages/upstream_oauth2/do_register.html:106:39-59"
     }
   },
   "error": {
@@ -419,47 +419,43 @@
     "login": {
       "call_to_register": "Don't have an account yet?",
       "@call_to_register": {
-        "context": "pages/login.html:98:13-44"
+        "context": "pages/login.html:106:13-44"
       },
       "continue_with_provider": "Continue with %(provider)s",
       "@continue_with_provider": {
-        "context": "pages/login.html:89:15-67, pages/register/index.html:53:15-67",
+        "context": "pages/login.html:97:15-67, pages/register/index.html:53:15-67",
         "description": "Button to log in with an upstream provider"
       },
       "description": "Please sign in to continue:",
       "@description": {
-        "context": "pages/login.html:29:29-55"
+        "context": "pages/login.html:31:29-55"
       },
       "forgot_password": "Forgot password?",
       "@forgot_password": {
-        "context": "pages/login.html:61:35-65",
+        "context": "pages/login.html:63:35-65",
         "description": "On the login page, link to the account recovery process"
       },
       "headline": "Sign in",
       "@headline": {
-        "context": "pages/login.html:28:31-54"
+        "context": "pages/login.html:30:31-54"
       },
       "link": {
         "description": "Linking your <span class=\"break-keep text-links\">%(provider)s</span> account",
         "@description": {
-          "context": "pages/login.html:24:29-75"
+          "context": "pages/login.html:26:29-75"
         },
         "headline": "Sign in to link",
         "@headline": {
-          "context": "pages/login.html:22:31-59"
+          "context": "pages/login.html:24:31-59"
         }
       },
       "no_login_methods": "No login methods available.",
       "@no_login_methods": {
-        "context": "pages/login.html:108:11-42"
+        "context": "pages/login.html:115:11-42"
       },
       "username_or_email": "Username or Email",
       "@username_or_email": {
-        "context": "pages/login.html:47:39-71"
-      },
-      "with_passkey": "Sign in with a Passkey",
-      "@with_passkey": {
-        "context": "pages/login.html:76:28-55"
+        "context": "pages/login.html:49:39-71"
       }
     },
     "navbar": {