Merged v1.2.0

Author: mkalioby

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.2
+
+* Add support for Conditional UI.
+
 ## v1.1
 
 * `FIDO_SERVER_ID` and `FIDO_SERVER_NAME` call be callable now to multi tenants application

README.md

@@ -41,7 +41,7 @@ Currently, it support Django 2.0+, Python 3.7+
     FIDO_SERVER_ID="localhost"      # Server rp id for FIDO2, it the full domain of your project
     FIDO_SERVER_NAME="TestApp"
     import passkeys
-    KEY_ATTACHMENT = NONE | passkeys.Attachment.CROSS_PLATFORM | passkeys.Attachment.PLATFORM
+    KEY_ATTACHMENT = None | passkeys.Attachment.CROSS_PLATFORM | passkeys.Attachment.PLATFORM
    ```
    **Note**: Starting v1.1, `FIDO_SERVER_ID` and/or `FIDO_SERVER_NAME` can be a callable to support multi-tenants web applications, the `request` is passed to the called function.
 5. Add passkeys to urls.py
@@ -88,6 +88,7 @@ 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 authenticator
 
 If you want to check if the user can be enrolled to use a platform authenticator, you can do the following in your main page.
@@ -109,6 +110,25 @@ check_passkey function paramters are as follows
 * `fail_func`: function to call if no platform authenticator is found (optional).
 
 
+## Using Conditional UI
+
+Conditional UI is a way for the browser to prompt the user to use the passkey to login to the system as shown in 
+
+![conditionalUI.png](imgs%2FconditionalUI.png)
+
+Starting version v1.2. you can use Conditional UI by adding the following to your login page
+
+1. Add `webauthn` to autocomplete of the username field as shown below.
+```html
+<input name="username" placeholder="username" autocomplete="username webauthn">
+```
+add the following to the page js.
+
+```js
+window.onload = checkConditionalUI('loginForm');
+```
+where `loginForm` is name of your login form.
+
 ## Security contact information
 
 To report a security vulnerability, please use the

example/example/templates/login.html

@@ -33,7 +33,7 @@
             {% csrf_token %}
           <div class="form-group">
             <div class="form-label-group">
-              <input type="text" id="inputUsername" name="username" class="form-control" placeholder="username"  autofocus="autofocus">
+              <input type="text" id="inputUsername" name="username" class="form-control" placeholder="username" autocomplete="username webauthn"  autofocus="autofocus">
               <label for="inputUsername">Username</label>
             </div>
           </div>
@@ -58,6 +58,9 @@
 
   <!-- Core plugin JavaScript-->
   <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'%}"></script>
+<script type="application/javascript">
+  window.onload = checkConditionalUI('loginForm');
+</script>
 
 </body>
 

imgs/conditionalUI.png

@@ -2,6 +2,19 @@
 <script type="application/javascript" src="{% static 'passkeys/js/base64url.js' %}"></script>
 <script type="application/javascript" src="{% static 'passkeys/js/helpers.js' %}"></script>
 <script type="text/javascript">
+    window.conditionalUI=false;
+    function checkConditionalUI(form) {
+    if (window.PublicKeyCredential && PublicKeyCredential.isConditionalMediationAvailable) {
+    // Check if conditional mediation is available.
+    PublicKeyCredential.isConditionalMediationAvailable().then((result) => {
+    window.conditionalUI = result;
+    if (window.conditionalUI) {
+    authn(form)
+}
+});
+}
+}
+
 var GetAssertReq = (getAssert) => {
            getAssert.publicKey.challenge = base64url.decode(getAssert.publicKey.challenge);
 
@@ -24,6 +37,9 @@ var GetAssertReq = (getAssert) => {
       }
       throw new Error('No credential available to authenticate!');
     }).then(function(options) {
+        if (window.conditionalUI) {
+            options.mediation= 'conditional';
+        }
         console.log(options)
       return navigator.credentials.get(options);
     }).then(function(assertion) {

passkeys/templates/passkeys.js

@@ -4,7 +4,7 @@
 
 setup(
     name='django-passkeys',
-    version='1.1.1',
+    version='1.2.0',
     description='A Django Authentication Backend for Passkeys',
     long_description=open("README.md").read(),
     long_description_content_type="text/markdown",