@hotosm/hanko-auth 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",
@@ -10,7 +10,8 @@
       "import": "./dist/hanko-auth.esm.js",
       "require": "./dist/hanko-auth.umd.js"
     },
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
   },
   "files": [
     "dist",

package/src/hanko-auth.styles.ts

@@ -13,7 +13,10 @@ export const styles = css`
   }
 
   .loading {
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
     padding: var(--hot-spacing-3x-large);
     color: var(--hot-color-gray-600);
   }
@@ -27,18 +30,38 @@ export const styles = css`
   }
 
   .spinner {
-    width: var(--hot-spacing-3x-large);
-    height: var(--hot-spacing-3x-large);
-    border: var(--hot-spacing-2x-small) solid var(--hot-color-gray-50);
-    border-top: var(--hot-spacing-2x-small) solid var(--hot-color-red-600);
+    width: clamp(40px, 10%, 60px);
+    height: clamp(40px, 10%, 60px);
+    border: 4px solid var(--hot-color-gray-50);
+    border-top: 4px solid var(--hot-color-red-600);
     border-radius: 50%;
     animation: spin 1s linear infinite;
+    margin: 0 auto;
+  }
+  /* Container that mimics the login button dimensions */
+  .loading-placeholder {
+    display: inline-grid;
+    place-items: center;
+    /* Use same styling as login-link button */
+    padding: var(--login-btn-padding, var(--hot-spacing-x-small) var(--hot-spacing-medium));
+    margin: var(--login-btn-margin, 0);
+    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
+    font-family: var(--login-btn-font-family, inherit);
+    border-radius: var(--login-btn-border-radius, var(--hot-border-radius-medium));
+  }
+
+  /* Invisible text to reserve button width */
+  .loading-placeholder-text {
+    visibility: hidden;
+    grid-area: 1 / 1;
   }
+
   .spinner-small {
-    width: var(--hot-spacing-x-large);
-    height: var(--hot-spacing-x-large);
-    border: var(--hot-spacing-2x-small) solid var(--hot-color-gray-50);
-    border-top: var(--hot-spacing-2x-small) solid var(--hot-color-gray-600);
+    grid-area: 1 / 1;
+    width: 1em;
+    height: 1em;
+    border: 2px solid var(--hot-color-gray-200);
+    border-top: 2px solid var(--hot-color-gray-600);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -230,15 +253,17 @@ export const styles = css`
   }
 
   .login-link {
-    color: white;
-    font-size: var(--hot-font-size-medium);
-    border-radius: var(--hot-border-radius-medium);
+    color: var(--login-btn-text-color, white);
+    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
+    border-radius: var(--login-btn-border-radius, var(--hot-border-radius-medium));
     text-decoration: none;
-    padding: var(--hot-spacing-x-small) var(--hot-spacing-medium);
+    padding: var(--login-btn-padding, var(--hot-spacing-x-small) var(--hot-spacing-medium));
+    margin: var(--login-btn-margin, 0);
     display: inline-block;
     cursor: pointer;
     transition: all 0.2s;
     font-weight: var(--hot-font-weight-medium);
+    font-family: var(--login-btn-font-family, inherit);
   }
 
   /* Button variants - filled */
@@ -246,77 +271,76 @@ export const styles = css`
     border: none;
   }
   .login-link.filled.primary {
-    background: var(--hot-color-primary-1000);
-    color: white;
+    background: var(--login-btn-bg-color, var(--hot-color-primary-1000));
+    color: var(--login-btn-text-color, white);
   }
   .login-link.filled.primary:hover {
-    background: var(--hot-color-primary-900);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));
   }
   .login-link.filled.neutral {
-    background: var(--hot-color-neutral-600);
-    color: white;
+    background: var(--login-btn-bg-color, var(--hot-color-neutral-600));
+    color: var(--login-btn-text-color, white);
   }
   .login-link.filled.neutral:hover {
-    background: var(--hot-color-neutral-700);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-neutral-700));
   }
   .login-link.filled.danger {
-    background: var(--hot-color-red-600);
-    color: white;
+    background: var(--login-btn-bg-color, var(--hot-color-red-600));
+    color: var(--login-btn-text-color, white);
   }
   .login-link.filled.danger:hover {
-    background: var(--hot-color-red-700);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-red-700));
   }
 
   /* Button variants - outline */
   .login-link.outline {
-    background: transparent;
+    background: var(--login-btn-bg-color, transparent);
     border: 1px solid;
   }
   .login-link.outline.primary {
-    border-color: var(--hot-color-primary-1000);
-    color: var(--hot-color-primary-1000);
+    border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));
+    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
   }
   .login-link.outline.primary:hover {
-    background: var(--hot-color-primary-50);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
   }
   .login-link.outline.neutral {
-    border-color: var(--hot-color-neutral-700);
-    color: var(--hot-color-neutral-700);
+    border-color: var(--login-btn-bg-color, var(--hot-color-neutral-700));
+    color: var(--login-btn-text-color, var(--hot-color-neutral-700));
   }
   .login-link.outline.neutral:hover {
-    background: var(--hot-color-neutral-50);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-neutral-50));
   }
   .login-link.outline.danger {
-    border-color: var(--hot-color-red-600);
-    color: var(--hot-color-red-600);
+    border-color: var(--login-btn-bg-color, var(--hot-color-red-600));
+    color: var(--login-btn-text-color, var(--hot-color-red-600));
   }
   .login-link.outline.danger:hover {
-    background: var(--hot-color-red-50);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-red-50));
   }
 
   /* Button variants - plain */
   .login-link.plain {
-    background: transparent;
+    background: var(--login-btn-bg-color, transparent);
     border: none;
-    padding: var(--hot-spacing-x-small) var(--hot-spacing-medium);
   }
   .login-link.plain.primary {
-    color: var(--hot-color-primary-1000);
+    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
   }
   .login-link.plain.primary:hover {
-    background: var(--hot-color-primary-50);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
   }
   .login-link.plain.neutral {
-    color: var(--hot-color-neutral-700);
+    color: var(--login-btn-text-color, var(--hot-color-neutral-700));
   }
   .login-link.plain.neutral:hover {
-    background: var(--hot-color-neutral-50);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-neutral-50));
   }
   .login-link.plain.danger {
-    color: var(--hot-color-red-600);
+    color: var(--login-btn-text-color, var(--hot-color-red-600));
   }
   .login-link.plain.danger:hover {
-    background: var(--hot-color-red-50);
+    background: var(--login-btn-hover-bg-color, var(--hot-color-red-50));
   }
   /* Dropdown styles */
   .dropdown {

package/src/hanko-auth.ts

@@ -11,15 +11,54 @@
 
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
 import { register } from "@teamhanko/hanko-elements";
 import { styles } from "./hanko-auth.styles";
+// hanko ui translations
+import { en } from "@teamhanko/hanko-elements/i18n/en";
+import { es } from "./hanko-i18n-es";
+import { fr } from "./hanko-i18n-fr";
+import { pt } from "./hanko-i18n-pt";
+// custom component translations
 import { translations } from "./translations";
+
 //Icons
 import accountIcon from "../assets/icon-account.svg";
 import logoutIcon from "../assets/icon-logout.svg";
 import mapIcon from "../assets/icon-map.svg";
 import checkIcon from "../assets/icon-check.svg";
 
+// Track if Hanko has been registered globally
+let hankoRegistered = false;
+let hankoRegistrationPromise: Promise<void> | null = null;
+
+// Pre-register translations at module load time to prevent 404 errors
+// This will be called again with hankoUrl when component initializes
+async function ensureHankoRegistered(hankoUrl: string): Promise<void> {
+  if (hankoRegistered) return;
+  if (hankoRegistrationPromise) return hankoRegistrationPromise;
+
+  hankoRegistrationPromise = (async () => {
+    console.log("[hanko-auth] Pre-registering Hanko translations...");
+    try {
+      await register(hankoUrl, {
+        enablePasskeys: false,
+        hidePasskeyButtonOnLogin: true,
+        translations: { en, es, fr, pt },
+        fallbackLanguage: "en",
+      });
+      hankoRegistered = true;
+      console.log("[hanko-auth] Hanko registration complete");
+    } catch (error) {
+      console.error("[hanko-auth] Hanko registration failed:", error);
+      hankoRegistrationPromise = null;
+      throw error;
+    }
+  })();
+
+  return hankoRegistrationPromise;
+}
+
 // Module-level singleton state - shared across all instances
 const sharedAuth = {
   primary: null as any, // The primary instance that makes API calls
@@ -31,6 +70,7 @@ const sharedAuth = {
   initialized: false,
   instances: new Set<any>(),
   profileDisplayName: "", // Shared profile display name
+  hankoReady: false, // used for translations
 };
 
 // Session storage key generators to avoid duplication
@@ -78,7 +118,7 @@ export class HankoAuth extends LitElement {
   // Custom login page URL (for standalone mode - overrides ${hankoUrl}/app)
   @property({ type: String, attribute: "login-url" }) loginUrl = "";
   // Language code (en, es, fr, pt, etc.)
-  @property({ type: String }) lang = "en";
+  @property({ type: String, reflect: true }) lang = "en";
   // Button variant (filled, outline, plain)
   @property({ type: String, attribute: "button-variant" }) buttonVariant:
     | "filled"
@@ -97,6 +137,7 @@ export class HankoAuth extends LitElement {
   @state() private osmLoading = false;
   @state() private loading = true;
   @state() private error: string | null = null;
+  @state() private hankoReady = false; // Tracks when Hanko registration is complete
   @state() private profileDisplayName: string = "";
   @state() private hasAppMapping = false; // True if user has mapping in the app
   @state() private userProfileLanguage: string | null = null; // Language from user profile
@@ -241,6 +282,8 @@ export class HankoAuth extends LitElement {
     if (this._hanko !== sharedAuth.hanko) this._hanko = sharedAuth.hanko;
     if (this.profileDisplayName !== sharedAuth.profileDisplayName)
       this.profileDisplayName = sharedAuth.profileDisplayName;
+    if (this.hankoReady !== sharedAuth.hankoReady)
+      this.hankoReady = sharedAuth.hankoReady;
   }
 
   // Update shared state and broadcast to all instances
@@ -250,6 +293,7 @@ export class HankoAuth extends LitElement {
     sharedAuth.osmData = this.osmData;
     sharedAuth.loading = this.loading;
     sharedAuth.profileDisplayName = this.profileDisplayName;
+    sharedAuth.hankoReady = this.hankoReady;
 
     // Sync to all other instances
     sharedAuth.instances.forEach((instance) => {
@@ -368,7 +412,7 @@ export class HankoAuth extends LitElement {
     const stylesheets = [
       {
         id: "hot-design-system",
-        href: "https://cdn.jsdelivr.net/npm/hotosm-ui-design@latest/dist/hot.css",
+        href: "https://cdn.jsdelivr.net/npm/@hotosm/ui-design@latest/dist/hot.css",
       },
       {
         id: "google-font-archivo",
@@ -395,10 +439,13 @@ export class HankoAuth extends LitElement {
     }
 
     try {
-      await register(this.hankoUrl, {
-        enablePasskeys: false,
-        hidePasskeyButtonOnLogin: true,
-      });
+      this.log(
+        "Ensuring Hanko is registered with translations for: en, es, fr, pt",
+      );
+      this.log("Current lang prop:", this.lang);
+      await ensureHankoRegistered(this.hankoUrl);
+      this.hankoReady = true;
+      this._broadcastState();
 
       // Create persistent Hanko instance and set up session event listeners
       const { Hanko } = await import("@teamhanko/hanko-elements");
@@ -726,9 +773,14 @@ export class HankoAuth extends LitElement {
       return true; // No check needed, proceed normally
     }
 
-    // Prevent redirect loops - if we already tried onboarding this session, don't redirect again
+    // If user already completed onboarding this session, skip the check
     const onboardingKey = getSessionOnboardingKey(window.location.hostname);
-    const alreadyTriedOnboarding = sessionStorage.getItem(onboardingKey);
+    const onboardingCompleted = sessionStorage.getItem(onboardingKey);
+    if (onboardingCompleted) {
+      this.log("✅ Onboarding already completed this session, skipping check");
+      this.hasAppMapping = true;
+      return true;
+    }
 
     this.log("🔍 Checking app mapping at:", this.mappingCheckUrl);
 
@@ -742,36 +794,23 @@ export class HankoAuth extends LitElement {
         this.log("📡 Mapping check response:", data);
 
         if (data.needs_onboarding) {
-          if (alreadyTriedOnboarding) {
-            this.log(
-              "⚠️ Already tried onboarding this session, skipping redirect",
-            );
-            return true; // Don't loop, let user continue
-          }
           // User has Hanko session but no app mapping - redirect to onboarding
+          // Don't set flag here - only set it when onboarding completes
           this.log("⚠️ User needs onboarding, redirecting...");
-          sessionStorage.setItem(onboardingKey, "true");
           const returnTo = encodeURIComponent(window.location.origin);
           const appParam = this.appId ? `onboarding=${this.appId}` : "";
           window.location.href = `${this.hankoUrl}/app?${appParam}&return_to=${returnTo}`;
           return false; // Redirect in progress, don't proceed
         }
 
-        // User has mapping - clear the onboarding flag
-        sessionStorage.removeItem(onboardingKey);
+        // User has mapping - mark onboarding as completed
+        sessionStorage.setItem(onboardingKey, "true");
         this.hasAppMapping = true;
-        this.log("✅ User has app mapping");
+        this.log("✅ User has app mapping, onboarding marked complete");
         return true;
       } else if (response.status === 401 || response.status === 403) {
-        if (alreadyTriedOnboarding) {
-          this.log(
-            "⚠️ Already tried onboarding this session, skipping redirect",
-          );
-          return true;
-        }
         // Needs onboarding
         this.log("⚠️ 401/403 - User needs onboarding, redirecting...");
-        sessionStorage.setItem(onboardingKey, "true");
         const returnTo = encodeURIComponent(window.location.origin);
         const appParam = this.appId ? `onboarding=${this.appId}` : "";
         window.location.href = `${this.hankoUrl}/app?${appParam}&return_to=${returnTo}`;
@@ -1310,10 +1349,15 @@ export class HankoAuth extends LitElement {
       !!this.user,
       "loading:",
       this.loading,
+      "lang:",
+      this.lang,
     );
 
     if (this.loading) {
-      return html`<div class="spinner-small"></div>`;
+      return html`<span class="loading-placeholder"
+        ><span class="loading-placeholder-text">${this.t("logIn")}</span
+        ><span class="spinner-small"></span
+      ></span>`;
     }
 
     if (this.error) {
@@ -1489,6 +1533,16 @@ export class HankoAuth extends LitElement {
       // Not logged in
       if (this.showProfile) {
         // On login page - show full Hanko auth form
+        // Don't render until Hanko is registered to prevent 404 errors
+        if (!this.hankoReady) {
+          this.log(
+            "⏳ Waiting for Hanko registration before rendering form...",
+          );
+          return html`<span class="loading-placeholder"
+            ><span class="loading-placeholder-text">${this.t("logIn")}</span
+            ><span class="spinner-small"></span
+          ></span>`;
+        }
         return html`
           <div
             class="container"
@@ -1514,7 +1568,10 @@ export class HankoAuth extends LitElement {
             --headline2-font-weight: var(--hot-font-weight-semibold);
           "
           >
-            <hanko-auth></hanko-auth>
+            ${keyed(
+              this.lang,
+              html`<hanko-auth lang="${this.lang}"></hanko-auth>`,
+            )}
           </div>
         `;
       } else {
@@ -1544,6 +1601,10 @@ export class HankoAuth extends LitElement {
         return html`<a
           class="login-link ${this.buttonVariant} ${this.buttonColor}"
           href="${loginUrl}"
+          @click=${(e: Event) => {
+            e.preventDefault();
+            window.location.href = loginUrl;
+          }}
           >${this.t("logIn")}</a
         > `;
       }
@@ -1556,3 +1617,6 @@ declare global {
     "hotosm-auth": HankoAuth;
   }
 }
+
+// Re-export Hanko translations for use by consuming apps
+export { en, es, fr, pt };

package/src/hanko-i18n-es.ts

@@ -0,0 +1,229 @@
+/**
+ * Spanish (es) translation for Hanko Elements
+ * Based on the English translation structure
+ */
+
+export const es = {
+  headlines: {
+    error: "Ha ocurrido un error",
+    loginEmail: "Iniciar sesión o crear cuenta",
+    loginEmailNoSignup: "Iniciar sesión",
+    loginFinished: "Inicio de sesión exitoso",
+    loginPasscode: "Ingrese el código de acceso",
+    loginPassword: "Ingrese la contraseña",
+    registerAuthenticator: "Crear una llave de acceso",
+    registerConfirm: "¿Crear cuenta?",
+    registerPassword: "Establecer nueva contraseña",
+    otpSetUp: "Configurar aplicación de autenticación",
+    profileEmails: "Correos electrónicos",
+    profilePassword: "Contraseña",
+    profilePasskeys: "Llaves de acceso",
+    isPrimaryEmail: "Dirección de correo principal",
+    setPrimaryEmail: "Establecer correo principal",
+    createEmail: "Ingrese un nuevo correo",
+    createUsername: "Ingrese un nuevo nombre de usuario",
+    emailVerified: "Verificado",
+    emailUnverified: "No verificado",
+    emailDelete: "Eliminar",
+    renamePasskey: "Renombrar llave de acceso",
+    deletePasskey: "Eliminar llave de acceso",
+    lastUsedAt: "Último uso",
+    createdAt: "Creado",
+    connectedAccounts: "Cuentas conectadas",
+    deleteAccount: "Eliminar cuenta",
+    accountNotFound: "Cuenta no encontrada",
+    signIn: "Iniciar sesión",
+    signUp: "Crear cuenta",
+    selectLoginMethod: "Seleccionar método de inicio de sesión",
+    setupLoginMethod: "Configurar método de inicio de sesión",
+    lastUsed: "Visto por última vez",
+    ipAddress: "Dirección IP",
+    revokeSession: "Revocar sesión",
+    profileSessions: "Sesiones",
+    mfaSetUp: "Configurar MFA",
+    securityKeySetUp: "Agregar clave de seguridad",
+    securityKeyLogin: "Clave de seguridad",
+    otpLogin: "Código de autenticación",
+    renameSecurityKey: "Renombrar clave de seguridad",
+    deleteSecurityKey: "Eliminar clave de seguridad",
+    securityKeys: "Claves de seguridad",
+    authenticatorApp: "Aplicación de autenticación",
+    authenticatorAppAlreadySetUp: "La aplicación de autenticación está configurada",
+    authenticatorAppNotSetUp: "Configurar aplicación de autenticación",
+    trustDevice: "¿Confiar en este navegador?",
+  },
+  texts: {
+    enterPasscode: 'Ingrese el código que se envió a "{emailAddress}".',
+    enterPasscodeNoEmail:
+      "Ingrese el código que se envió a su dirección de correo principal.",
+    setupPasskey:
+      "Inicie sesión en su cuenta fácil y seguramente con una llave de acceso. Nota: Sus datos biométricos solo se almacenan en sus dispositivos y nunca se compartirán con nadie.",
+    createAccount:
+      'No existe una cuenta para "{emailAddress}". ¿Desea crear una nueva cuenta?',
+    otpEnterVerificationCode:
+      "Ingrese la contraseña de un solo uso (OTP) obtenida de su aplicación de autenticación a continuación:",
+    otpScanQRCode:
+      "Escanee el código QR usando su aplicación de autenticación (como Google Authenticator o cualquier otra aplicación TOTP). Alternativamente, puede ingresar manualmente la clave secreta OTP en la aplicación.",
+    otpSecretKey: "Clave secreta OTP",
+    passwordFormatHint:
+      "Debe tener entre {minLength} y {maxLength} caracteres.",
+    securityKeySetUp:
+      "Use una clave de seguridad dedicada a través de USB, Bluetooth o NFC, o su teléfono móvil. Conecte o active su clave de seguridad, luego haga clic en el botón a continuación y siga las indicaciones para completar el registro.",
+    setPrimaryEmail:
+      "Establezca esta dirección de correo para ser usada para contactarlo.",
+    isPrimaryEmail:
+      "Esta dirección de correo se utilizará para contactarlo si es necesario.",
+    emailVerified: "Esta dirección de correo ha sido verificada.",
+    emailUnverified: "Esta dirección de correo no ha sido verificada.",
+    emailDelete:
+      "Si elimina esta dirección de correo, ya no podrá usarla para iniciar sesión.",
+    renamePasskey: "Establecer un nombre para la llave de acceso.",
+    deletePasskey: "Eliminar esta llave de acceso de su cuenta.",
+    deleteAccount:
+      "¿Está seguro de que desea eliminar esta cuenta? Todos los datos se eliminarán inmediatamente y no se podrán recuperar.",
+    noAccountExists: 'No existe una cuenta para "{emailAddress}".',
+    selectLoginMethodForFutureLogins:
+      "Seleccione uno de los siguientes métodos de inicio de sesión para usar en futuros inicios de sesión.",
+    howDoYouWantToLogin: "¿Cómo desea iniciar sesión?",
+    mfaSetUp:
+      "Proteja su cuenta con autenticación multifactor (MFA). MFA agrega un paso adicional a su proceso de inicio de sesión, asegurando que incluso si su contraseña o cuenta de correo está comprometida, su cuenta permanezca segura.",
+    securityKeyLogin:
+      "Conecte o active su clave de seguridad, luego haga clic en el botón a continuación. Una vez listo, úselo a través de USB, NFC o su teléfono móvil. Siga las indicaciones para completar el proceso de inicio de sesión.",
+    otpLogin:
+      "Abra su aplicación de autenticación para obtener la contraseña de un solo uso (OTP). Ingrese el código en el campo a continuación para completar su inicio de sesión.",
+    renameSecurityKey: "Establecer un nombre para la clave de seguridad.",
+    deleteSecurityKey: "Eliminar esta clave de seguridad de su cuenta.",
+    authenticatorAppAlreadySetUp:
+      "Su cuenta está protegida con una aplicación de autenticación que genera contraseñas de un solo uso basadas en tiempo (TOTP) para autenticación multifactor.",
+    authenticatorAppNotSetUp:
+      "Proteja su cuenta con una aplicación de autenticación que genera contraseñas de un solo uso basadas en tiempo (TOTP) para autenticación multifactor.",
+    trustDevice:
+      "Si confía en este navegador, no necesitará ingresar su OTP (contraseña de un solo uso) o usar su clave de seguridad para la autenticación multifactor (MFA) la próxima vez que inicie sesión.",
+  },
+  labels: {
+    or: "o",
+    no: "no",
+    yes: "sí",
+    email: "Correo electrónico",
+    continue: "Continuar",
+    copied: "copiado",
+    skip: "Omitir",
+    save: "Guardar",
+    password: "Contraseña",
+    passkey: "Llave de acceso",
+    passcode: "Código de acceso",
+    signInPassword: "Iniciar sesión con contraseña",
+    signInPasscode: "Iniciar sesión con código",
+    forgotYourPassword: "¿Olvidó su contraseña?",
+    back: "Atrás",
+    signInPasskey: "Iniciar sesión con llave de acceso",
+    registerAuthenticator: "Crear una llave de acceso",
+    signIn: "Iniciar sesión",
+    signUp: "Crear cuenta",
+    sendNewPasscode: "Enviar nuevo código",
+    passwordRetryAfter: "Reintentar en {passwordRetryAfter}",
+    passcodeResendAfter: "Solicitar nuevo código en {passcodeResendAfter}",
+    unverifiedEmail: "no verificado",
+    primaryEmail: "principal",
+    setAsPrimaryEmail: "Establecer como principal",
+    verify: "Verificar",
+    delete: "Eliminar",
+    newEmailAddress: "Nueva dirección de correo",
+    newPassword: "Nueva contraseña",
+    rename: "Renombrar",
+    newPasskeyName: "Nuevo nombre de llave de acceso",
+    addEmail: "Agregar correo",
+    createPasskey: "Crear una llave de acceso",
+    webauthnUnsupported:
+      "Las llaves de acceso no son compatibles con su navegador",
+    signInWith: "Iniciar sesión con {provider}",
+    deleteAccount: "Sí, eliminar esta cuenta.",
+    emailOrUsername: "Correo o nombre de usuario",
+    username: "Nombre de usuario",
+    optional: "opcional",
+    dontHaveAnAccount: "¿No tiene una cuenta?",
+    alreadyHaveAnAccount: "¿Ya tiene una cuenta?",
+    changeUsername: "Cambiar nombre de usuario",
+    setUsername: "Establecer nombre de usuario",
+    changePassword: "Cambiar contraseña",
+    setPassword: "Establecer contraseña",
+    revoke: "Revocar",
+    currentSession: "Sesión actual",
+    authenticatorApp: "Aplicación de autenticación",
+    securityKey: "Clave de seguridad",
+    securityKeyUse: "Usar clave de seguridad",
+    newSecurityKeyName: "Nuevo nombre de clave de seguridad",
+    createSecurityKey: "Agregar una clave de seguridad",
+    authenticatorAppManage: "Administrar aplicación de autenticación",
+    authenticatorAppAdd: "Configurar",
+    configured: "configurado",
+    useAnotherMethod: "Usar otro método",
+    lastUsed: "Último uso",
+    trustDevice: "Confiar en este navegador",
+    staySignedIn: "Mantener sesión iniciada",
+  },
+  errors: {
+    somethingWentWrong:
+      "Ha ocurrido un error técnico. Por favor, inténtelo de nuevo más tarde.",
+    requestTimeout: "La solicitud ha expirado.",
+    invalidPassword: "Correo o contraseña incorrectos.",
+    invalidPasscode: "El código proporcionado no es correcto.",
+    passcodeAttemptsReached:
+      "El código se ha ingresado incorrectamente demasiadas veces. Por favor, solicite un nuevo código.",
+    tooManyRequests:
+      "Se han realizado demasiadas solicitudes. Por favor, espere para repetir la operación solicitada.",
+    unauthorized:
+      "Su sesión ha expirado. Por favor, inicie sesión nuevamente.",
+    invalidWebauthnCredential: "Esta llave de acceso ya no se puede usar.",
+    passcodeExpired: "El código ha expirado. Por favor, solicite uno nuevo.",
+    userVerification:
+      "Se requiere verificación de usuario. Asegúrese de que su dispositivo de autenticación esté protegido con un PIN o biometría.",
+    emailAddressAlreadyExistsError: "La dirección de correo ya existe.",
+    maxNumOfEmailAddressesReached:
+      "No se pueden agregar más direcciones de correo.",
+    thirdPartyAccessDenied:
+      "Acceso denegado. La solicitud fue cancelada por el usuario o el proveedor ha denegado el acceso por otras razones.",
+    thirdPartyMultipleAccounts:
+      "No se puede identificar la cuenta. La dirección de correo es usada por múltiples cuentas.",
+    thirdPartyUnverifiedEmail:
+      "Se requiere verificación de correo. Por favor, verifique la dirección de correo usada con su proveedor.",
+    signupDisabled: "El registro de cuentas está deshabilitado.",
+    handlerNotFoundError:
+      "El paso actual en su proceso no es compatible con esta versión de la aplicación. Inténtelo de nuevo más tarde o contacte al soporte si el problema persiste.",
+  },
+  flowErrors: {
+    technical_error:
+      "Ha ocurrido un error técnico. Por favor, inténtelo de nuevo más tarde.",
+    flow_expired_error:
+      "La sesión ha expirado, haga clic en el botón para reiniciar.",
+    value_invalid_error: "El valor ingresado no es válido.",
+    passcode_invalid: "El código proporcionado no es correcto.",
+    passkey_invalid: "Esta llave de acceso ya no se puede usar.",
+    passcode_max_attempts_reached:
+      "El código se ha ingresado incorrectamente demasiadas veces. Por favor, solicite un nuevo código.",
+    rate_limit_exceeded:
+      "Se han realizado demasiadas solicitudes. Por favor, espere para repetir la operación solicitada.",
+    unknown_username_error: "El nombre de usuario es desconocido.",
+    unknown_email_error: "La dirección de correo es desconocida.",
+    username_already_exists: "El nombre de usuario ya está en uso.",
+    invalid_username_error:
+      "El nombre de usuario solo debe contener letras, números y guiones bajos.",
+    email_already_exists: "El correo ya está en uso.",
+    not_found: "No se encontró el recurso solicitado.",
+    operation_not_permitted_error: "La operación no está permitida.",
+    flow_discontinuity_error:
+      "El proceso no se puede continuar debido a la configuración del usuario o del proveedor.",
+    form_data_invalid_error:
+      "Los datos del formulario enviados contienen errores.",
+    unauthorized: "Su sesión ha expirado. Por favor, inicie sesión nuevamente.",
+    value_missing_error: "Falta el valor.",
+    value_too_long_error: "El valor es demasiado largo.",
+    value_too_short_error: "El valor es demasiado corto.",
+    webauthn_credential_invalid_mfa_only:
+      "Esta credencial solo se puede usar como clave de seguridad de segundo factor.",
+    webauthn_credential_already_exists:
+      "La solicitud expiró, se canceló o el dispositivo ya está registrado. Inténtelo de nuevo o intente usar otro dispositivo.",
+    platform_authenticator_required:
+      "Su cuenta está configurada para usar autenticadores de plataforma, pero su dispositivo o navegador actual no admite esta función. Inténtelo de nuevo con un dispositivo o navegador compatible.",
+  },
+};