Segundo factor.

<form class="ui-sample ui-auth-fragment" data-auth-source="cis-auth-authentik" data-mfa-challenge="true"><h3>Verificación en dos pasos</h3><p>Ingresa el código de seis dígitos de tu aplicación.</p><label for="mfa-challenge-0">Código de verificación</label><input class="input ui-one-time-code" id="mfa-challenge-0" inputMode="numeric" autoComplete="one-time-code" pattern="[0-9]{6}" required="" value=""/><button class="btn btn--primary" type="submit">Verificar</button><a class="btn btn--quiet" href="#backup">Usar un código de recuperación</a></form>

<form class="ui-sample ui-auth-fragment border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-auth-source="cis-auth-authentik" data-mfa-challenge="true"><h3>Verificación en dos pasos</h3><p>Ingresa el código de seis dígitos de tu aplicación.</p><label for="mfa-challenge-0">Código de verificación</label><input class="input ui-one-time-code border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="mfa-challenge-0" inputMode="numeric" autoComplete="one-time-code" pattern="[0-9]{6}" required="" value=""/><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Verificar</button><a class="btn btn--quiet underline underline-offset-4" href="#backup">Usar un código de recuperación</a></form>

import type { ChangeEventHandler, FormEventHandler } from "react";

export interface MfaChallengeProps {
  title?: string;
  /** Indicación sobre dónde obtener el código. */
  description?: string;
  /** Ruta que recibe el formulario; sin ella, el navegador envía a la URL actual. */
  action?: string;
  /** Pasa `post`: sin `method`, el navegador envía por GET y el código queda en la URL y en el historial. */
  method?: "post" | "get";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  /** Etiqueta visible del campo del código. */
  label?: string;
  /** Id del campo del código. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Expresión que valida el código; por defecto, seis dígitos. */
  pattern?: string;
  /** Valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  /** Se llama en cada cambio, con o sin `value`. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** Texto del enlace al código de recuperación; se muestra como acción terciaria (`btn--quiet`). */
  backupLabel?: string;
  backupHref?: string;
  className?: string;
}

/**
 * Formulario de verificación en dos pasos, para pedir el código de la aplicación autenticadora después de la contraseña.
 *
 * El campo usa `autoComplete="one-time-code"` y teclado numérico, y ofrece un enlace al código de recuperación.
 * Para enviar sin JavaScript, pasa `action` y `method="post"`; así el código no queda en la URL.
 *
 * @example <MfaChallenge id="codigo" name="code" action="/auth/mfa" method="post" />
 * @example <MfaChallenge id="codigo" value={codigo} onChange={cambiar} onSubmit={verificar} />
 */
export function MfaChallenge({
  title = "Verificación en dos pasos",
  description = "Ingresa el código de seis dígitos de tu aplicación.",
  action,
  method,
  onSubmit,
  label = "Código de verificación",
  id = "mfa-challenge-0",
  name,
  pattern = "[0-9]{6}",
  defaultValue = "",
  value,
  onChange,
  submitLabel = "Verificar",
  backupLabel = "Usar un código de recuperación",
  backupHref = "#backup",
  className,
}: MfaChallengeProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form
      className={["ui-auth-fragment", className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-mfa-challenge
      action={action}
      method={method}
      onSubmit={onSubmit}
    >
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      <label htmlFor={id}>{label}</label>
      <input
        className="input ui-one-time-code"
        id={id}
        name={name}
        inputMode="numeric"
        autoComplete="one-time-code"
        pattern={pattern}
        required
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue, onChange })}
      />
      <button className="btn btn--primary" type="submit">{submitLabel}</button>
      {backupLabel ? <a className="btn btn--quiet" href={backupHref}>{backupLabel}</a> : null}
    </form>
  );
}