WebAuthn Authentication

# Enable WebAuthn
MFA_SUPPORTED_TYPES = ["totp", "webauthn", "recovery_codes"]

# Optional: Enable passkey login (passwordless)
MFA_PASSKEY_LOGIN_ENABLED = True

# Optional: Enable passkey signup
MFA_PASSKEY_SIGNUP_ENABLED = True

# Required for default templates
INSTALLED_APPS = [
    # ...
    "django.contrib.humanize",  # For displaying dates nicely
]

# Only use in development - never in production!
MFA_WEBAUTHN_ALLOW_INSECURE_ORIGIN = True

{% extends "account/base.html" %}

{% block content %}
  <h1>Add Security Key</h1>
  
  <form method="post" id="webauthn-form">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="button" id="register-button">
      Register Security Key
    </button>
  </form>
  
  <script>
    const creationOptions = {{ js_data.creation_options|safe }};
    
    document.getElementById('register-button').addEventListener('click', async () => {
      try {
        // Create credential
        const credential = await navigator.credentials.create({
          publicKey: creationOptions
        });
        
        // Set form field and submit
        document.getElementById('id_credential').value = JSON.stringify(credential);
        document.getElementById('webauthn-form').submit();
      } catch (error) {
        console.error('WebAuthn registration failed:', error);
        alert('Failed to register security key: ' + error.message);
      }
    });
  </script>
{% endblock %}

MFA_SUPPORTED_TYPES = ["totp", "webauthn", "recovery_codes"]
MFA_PASSKEY_LOGIN_ENABLED = True

<button type="button" id="passkey-login">
  Sign in with a passkey
</button>

<script>
async function passkeyLogin() {
  try {
    // Get authentication options from server
    const response = await fetch('/accounts/mfa/webauthn/login/', {
      headers: {'X-Requested-With': 'XMLHttpRequest'}
    });
    const { request_options } = await response.json();
    
    // Prompt for passkey
    const credential = await navigator.credentials.get({
      publicKey: request_options
    });
    
    // Submit credential
    const formData = new FormData();
    formData.append('credential', JSON.stringify(credential));
    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    
    await fetch('/accounts/mfa/webauthn/login/', {
      method: 'POST',
      body: formData
    });
    
    window.location.href = '/';  // Redirect after login
  } catch (error) {
    console.error('Passkey login failed:', error);
  }
}

document.getElementById('passkey-login').addEventListener('click', passkeyLogin);
</script>

# Enable passkey signup
MFA_PASSKEY_SIGNUP_ENABLED = True
MFA_SUPPORTED_TYPES = ["webauthn", "recovery_codes"]

# Require email verification with code
ACCOUNT_EMAIL_VERIFICATION = "mandatory"
ACCOUNT_EMAIL_VERIFICATION_BY_CODE_ENABLED = True

from allauth.mfa.adapter import DefaultMFAAdapter

class CustomMFAAdapter(DefaultMFAAdapter):
    def get_public_key_credential_rp_entity(self):
        """Customize Relying Party information."""
        return {
            "id": "example.com",  # Must match your domain
            "name": "Example Corp",
        }
    
    def get_public_key_credential_user_entity(self, user):
        """Customize user information in credentials."""
        return {
            "id": str(user.pk).encode('utf8'),
            "display_name": user.get_full_name(),
            "name": user.email,
        }
    
    def generate_authenticator_name(self, user, type):
        """Customize default authenticator names."""
        count = Authenticator.objects.filter(
            user=user, 
            type=type
        ).count()
        return f"Security Key #{count + 1}"

MFA_ADAPTER = 'myapp.adapter.CustomMFAAdapter'

MFA_FORMS = {
    'add_webauthn': 'myapp.forms.CustomAddWebAuthnForm',
    'edit_webauthn': 'myapp.forms.CustomEditWebAuthnForm',
}

from allauth.mfa.webauthn.forms import AddWebAuthnForm

class CustomAddWebAuthnForm(AddWebAuthnForm):
    def clean_name(self):
        name = self.cleaned_data['name']
        # Add custom validation
        if len(name) < 3:
            raise forms.ValidationError("Name must be at least 3 characters")
        return name