Offline 2FA/MFA: Is it Possible?

TL;DR

Implementing truly secure Two-Factor Authentication (2FA) or Multi-Factor Authentication (MFA) in a completely offline Progressive Web App (PWA) is extremely difficult and generally not recommended. The core principle of 2FA/MFA relies on something the user *has* (like a phone generating codes), which requires an out-of-band communication channel. However, you can create solutions that offer increased security compared to password-only authentication while still functioning offline, but these are compromises and have limitations.

Understanding the Challenge

2FA/MFA works by requiring a second verification factor *in addition* to your password. Common factors include:

• Something you know: Your password
• Something you have: A code from an authenticator app, a security key, or a one-time passcode sent via SMS/email.
• Something you are: Biometrics (fingerprint, face scan).

Offline PWAs don’t inherently have access to ‘something you have’ factors without prior setup and storage of information locally.

Possible Approaches & Limitations

1. Pre-Shared Recovery Codes:
   • How it works: Generate a set of recovery codes when the user first sets up 2FA. These codes are stored locally in the PWA’s storage (e.g., IndexedDB). If the user loses access to their primary factor, they can use one of these codes.
   • Security Considerations: If a device is compromised *before* recovery codes are used, an attacker could gain access. The more codes generated, the lower the risk of reuse if one is compromised, but also the greater inconvenience for the user.
   • Implementation Snippet (generating codes):

     function generateRecoveryCodes(numCodes) {
       const codes = [];
       for (let i = 0; i < numCodes; i++) {
         const code = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
         codes.push(code);
       }
       return codes;
     }
     

   • Storage: Store these securely in the PWA’s IndexedDB database.
2. Local TOTP (Time-Based One-Time Password):
   • How it works: Implement a TOTP algorithm directly within the PWA. The secret key is generated and stored locally when 2FA is enabled. The PWA calculates the current code based on the time and the secret.
   • Security Considerations: This is risky! If an attacker gains access to the local storage, they can extract the secret key and generate valid codes indefinitely. Requires careful consideration of how the secret key is protected (e.g., encryption).
   • Implementation Snippet (using a library – example):

     import { TOTP } from 'totp-generator';
     const totp = new TOTP('YOUR_SECRET_KEY');
     const currentCode = totp.generate();
     

3. Biometric Authentication (with limitations):
   • How it works: Use the Web Authentication API (WebAuthn) if supported by the browser and device. This allows biometric authentication (fingerprint, face scan).
   • Security Considerations: Relies on the security of the device’s biometric hardware and software. Not universally available across all devices. Requires a secure enclave or trusted execution environment on the device.
4. PIN/Passcode (Local Only):
   • How it works: Require the user to enter a PIN or passcode stored locally in the PWA’s storage.
   • Security Considerations: This is *not* true 2FA/MFA. It only adds an extra layer of protection against someone gaining access to the device itself, not against remote attacks. Easily bypassed if the device is compromised.

Important Considerations

• Encryption: Always encrypt any sensitive data stored locally (secret keys, recovery codes) using a strong encryption algorithm.
• Secure Storage: Use the most secure storage options available in the browser (IndexedDB is generally preferred over localStorage).
• Regular Audits: Regularly audit your code and security practices to identify and address potential vulnerabilities.
• User Education: Clearly explain the limitations of offline 2FA/MFA to users.

Conclusion

While achieving fully secure, functional 2FA/MFA in a purely offline PWA is extremely challenging, you can implement solutions that offer improved security compared to password-only authentication. However, these approaches come with significant limitations and require careful consideration of the trade-offs between security, usability, and complexity. For maximum security, it’s best to design your application so that 2FA/MFA is performed online whenever possible.