DEV Community

Mohamed M El-Kalioby
Mohamed M El-Kalioby

Posted on

Web Authencation API and Django

Web Authentication (Webauthn) API is a new way to authenticate users without use of passwords. The innovative part of this API that the authenticators are context-aware so this will eliminate phishing as the authenticator won't entertain the phishing site as it isn't registered on the authenticator.

How Webauthn work?

There are 2 phases when dealing with Webauthn, registration phase and authentication phase.

Registration Phase

In this phase, the client will handshake with the server on the credential to use in seven steps

  1. The client (browser) requests registration.
  2. The server will send a challenge (random numbers), user info and the server info (domain and name) to the client (browser)
  3. The client will call createCredential in an external authenticator (e.g security key, fingerprint or face recognition) to create new credentials for the site.
  4. The authenticator will check with the user by requesting fingerprint confirmation, PIN or press of a button.
  5. Once the user acknowledges the new credential request, the authenticator replies to the browser with the public key and challenge encrypted by the private key.
  6. The browser prepares the final data and sends it to the server
  7. The server validates the response and save the data and finishes

Authentication Phase

The authentication is close to login as

  1. The browser requests authentication,
  2. The server send a challenge
  3. The browser calls getCredential in the authenticator, passing the user info, server info and challenge.
  4. The authenticator validates the parameters checks the user using PIN, fingerprint or a button press.
  5. If the user acknowledges the request successfully, the authenticator will sign the challenge with the private key and send it to the browser.
  6. Browser will prepare the final data and sent it to the server.
  7. Finally the server will check the received data against the stored keys and authenticate the user if successful.

To Understand more about about Webauthn, read the fantastic MDN article (https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)

django-mfa2

Django-mfa2 (https://github.com/mkalioby/django-mfa2/) is a django app that provides MFA using TOTP (Time based One Time Password), U2F (Universal 2nd Factor), FIDO2 U2F (Webauthn) and Trusted devices (special mode to allow access from devices that doesn't support security keys e.g iOS or common Android phones/tables that don't have NFC or Fingerprint sensors). The app is production ready and in fact is already used in multiple projects in my work and open source projects like AutoDeploy (https://github.com/mkalioby/autoDeploy)
So if you want to secure your Django App using this amazing technology that is supported by MS Edge, Firefox, and Chrome, please give it a try and contact the developer in case of an issue.

Discussion (2)

Collapse
sirneij profile image
John Idogun

Hello, this is a very good project. However, I tried incorporating it into my django app but nothing like fingerprint showed up. In my app, I need to register users using fingerprint. I only need the user's username and display name, no password. On clicking on the register button, a fingerprint prompt should show up and subsequently authenticated. Having registered, users should be able to login using their username and fingerprint. Your app doesn't include this functionality?

Collapse
mkalioby profile image
Mohamed M El-Kalioby Author

This is can be done as follow:
After the user fill the registration form, then login him in, then take him to the same page as fido2 registration to follow the procedure, you can save the base_usernmae cookie to make him login quickly next time.

We are doing something similar by using google login form idea, where the user enters the username and if there is a 2FA, get directly to it without entering password.