SECURITY

Multi-Factor Authentication

Implement TOTP and WebAuthn MFA for enhanced security.

No SMS Authentication

Zalt does not support SMS-based MFA due to SS7 vulnerabilities. We only support TOTP (authenticator apps) and WebAuthn (passkeys/security keys).

Supported MFA Types

TOTP (Authenticator Apps)

Time-based one-time passwords. Works with Google Authenticator, Authy, 1Password, etc.

6-digit codes
30-second validity
Offline capable

WebAuthn (Passkeys)

Phishing-proof authentication using biometrics or security keys.

Phishing resistant
Biometric support
Hardware keys (YubiKey)

TOTP Setup Flow

typescript

import { useZalt } from '@zalt/react';

function EnableTOTP() {
  const { setupTOTP, verifyTOTP } = useZalt();
  const [secret, setSecret] = useState<string | null>(null);
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [code, setCode] = useState('');

  // Step 1: Generate TOTP secret
  const handleSetup = async () => {
    const result = await setupTOTP();
    setSecret(result.secret);
    setQrCode(result.qrCodeUrl);
  };

  // Step 2: Verify and enable
  const handleVerify = async () => {
    const result = await verifyTOTP({
      code,
      secret: secret!,
    });
    
    if (result.success) {
      // TOTP is now enabled
      // Store backup codes securely
      console.log('Backup codes:', result.backupCodes);
    }
  };

  return (
    <div>
      {!qrCode ? (
        <button onClick={handleSetup}>Enable TOTP</button>
      ) : (
        <>
          <img src={qrCode} alt="Scan with authenticator app" />
          <p>Manual entry: {secret}</p>
          <input
            type="text"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            placeholder="Enter 6-digit code"
            maxLength={6}
          />
          <button onClick={handleVerify}>Verify & Enable</button>
        </>
      )}
    </div>
  );
}

MFA Verification During Login

typescript

import { useZalt } from '@zalt/react';

function MFAVerification({ mfaToken }: { mfaToken: string }) {
  const { verifyMfa } = useZalt();
  const [code, setCode] = useState('');

  const handleVerify = async () => {
    const result = await verifyMfa({
      mfaToken,
      code,
      type: 'totp', // or 'webauthn'
    });

    if (result.success) {
      // User is now fully authenticated
      router.push('/dashboard');
    }
  };

  return (
    <div>
      <h2>Enter your authentication code</h2>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="000000"
        maxLength={6}
        autoFocus
      />
      <button onClick={handleVerify}>Verify</button>
    </div>
  );
}

Realm MFA Policy

Configure MFA requirements at the realm level in your dashboard settings.

Optional

Users can enable MFA

Required

All users must enable MFA

WebAuthn Only

Healthcare compliance mode