Package: django-passkeys
django-passkeysAn extension to DjangoModelBackendbackend to support passkeys.Passkeys is an extension to Web Authentication API that will allow the user to login to a service using another device.This app is a slim-down version ofdjango-mfa2Passkeys are now supported onApple Ecosystem (iPhone 16.0+, iPadOS 16.1, Mac OS X Ventura)Chromium based browsers (on PC and Laptop) allows picking up credentials from Android and iPhone/iPadOS.Android Credentials creation for ResidentKeys is currently in live now.On May 3, 2023, Google allowed the use of Passkeys for the users to login, killing the password for enrolled users.Installationpip install django-passkeysCurrently, it support Django 2.0+, Python 3.7+Usagein your settings.py add the application to your installed appsINSTALLED_APPS=('......','passkeys','......')Collect Static Filespython manage.py collectstaticRun migratepython manage.py migrateAdd the following settings to your fileAUTHENTICATION_BACKENDS=['passkeys.backend.PasskeyModelBackend']# Change your authentication backendFIDO_SERVER_ID="localhost"# Server rp id for FIDO2, it the full domain of your projectFIDO_SERVER_NAME="TestApp"importpasskeysKEY_ATTACHMENT=None|passkeys.Attachment.CROSS_PLATFORM|passkeys.Attachment.PLATFORMNote: Starting v1.1,FIDO_SERVER_IDand/orFIDO_SERVER_NAMEcan be a callable to support multi-tenants web applications, therequestis passed to the called function.Add passkeys to urls.pyurls_patterns=['...',url(r'^passkeys/',include('passkeys.urls')),'....',]To match the look and feel of your project, Passkeys includesbase.htmlbut it needs blocks namedhead&contentto added its content to it.Notes:You can overridePassKeys_base.htmlwhich is used byPasskeys.htmlso you can control the styling better and currentPasskeys_base.htmlextendsbase.htmlCurrently,PassKeys_base.htmlneeds JQuery and bootstrap.Somewhere in your app, add a link to 'passkeys:home'<li><a href="{% url 'passkeys:home' %}">Passkeys</a> </li>In your login view, change the authenticate call to include the request as followsuser=authenticate(request,username=request.POST["username"],password=request.POST["password"])Finally, In yourlogin.htmlGive an id to your login form e.g 'loginForm', the id should be provided when callingauthnfunctionInside the form, add<inputtype="hidden"name="passkeys"id="passkeys"/><buttonclass="btn btn-block btn-dark"type="button"onclick="authn('loginForm')"><imgsrc="{% static 'passkeys/imgs/FIDO-Passkey_Icon-White.png' %}"style="width: 24px"></button>{%include 'passkeys.js' %}For Example, See 'example' app and look at EXAMPLE.md to see how to set it up.Detect if user is using passkeysOnce the backend is used, there will be apasskeykey in request.session.
If the user used a passkey thenrequest.session['passkey']['passkey']will be True and the key information will be there like this{'passkey':True,'name':'Chrome','id':2,'platform':'Chrome on Apple','cross_platform':False}cross_platform: means that the user used a key from another platform so there is no key local to the device used to login e.g used an Android phone on Mac OS X or iPad.
If the user didn't use a passkey then it will be set to False{'passkey':False}Check if the user can be enrolled for a platform authenticatorIf you want to check if the user can be enrolled to use a platform authenticator, you can do the following in your main page.<divid="pk"class="alert alert-info"style="display: none">Your device supports passkeys,<ahref="{%url 'passkeys:enroll'%}">Enroll</a></div><scripttype="text/javascript">functionregister_pk(){$('#pk').show();}{%include'check_passkeys.js'%}$(document).ready(check_passkey(true,register_pk))</script>check_passkey function paramters are as followsplatform_authenticator: if the service requires only a platform authenticator (e.g TouchID, Windows Hello or Android SafetyNet)success_func: function to call if a platform authenticator is found or if the user didn't login by a passkeyfail_func: function to call if no platform authenticator is found (optional).Using Conditional UIConditional UI is a way for the browser to prompt the user to use the passkey to login to the system as shown inStarting version v1.2. you can use Conditional UI by adding the following to your login pageAddwebauthnto autocomplete of the username field as shown below.<inputname="username"placeholder="username"autocomplete="username webauthn">add the following to the page js.window.onload=checkConditionalUI('loginForm');whereloginFormis name of your login form.Security contact informationTo report a security vulnerability, please use theTidelift security contact.
Tidelift will coordinate the fix and disclosure.Contributorsmahmoodnasrjacopsdgasparbrogueirapulse-mind