Finished Conditional UI

README.md

@@ -194,6 +194,25 @@ function some_func() {
 
 ````
 
+# Using ConditionalUI
+
+![ConditionalUI](img/conditionalUI.png)
+
+ConditionalUI is a cutting-edge feature that allows the user to use the browser autofill feature available in the browser to login using the FIDO2.
+
+Currently available on Safari on iOS 16+, Safari on Ventura, Chrome on Android (Using Play Services Beta), Chrome Canary on Both Mac OS X and Windows.
+
+To Use this feature
+1. set `MFA_FIDO2_RESIDENT_KEY` to  `mfa.ResidentKey.REQUIRED`
+2. set the autocomplete of username field to `username webauth` as follows
+   ```html
+   <input type="text" name="username" autocomplete="username webauthn" ...>
+   ```
+3. Finally, Include `FIDO2/FormFill.html` in your login form
+   ```html
+    {% include 'FIDO2/FormFill.html' %}
+   ```
+
 # Contributors
 * [mahmoodnasr](https://github.com/mahmoodnasr)
 * [d3cline](https://github.com/d3cline)

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" required="required" autofocus="autofocus">
+                  <input type="text" id="inputUsername" name="username" class="form-control" placeholder="username" required="required" autofocus="autofocus" autocomplete="username webauthn">
               <label for="inputUsername">Username</label>
             </div>
           </div>
@@ -45,8 +45,6 @@
           </div>
 
           <button class="btn btn-primary btn-block" type="submit">Login</button><br/>
-
-            <button class="btn btn-primary btn-block" type="button" onclick="authen()">Login By Security Key</button>
         </form>
       </div>
     </div>
@@ -58,7 +56,9 @@
 
   <!-- Core plugin JavaScript-->
   <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'%}"></script>
-    {% include 'FIDO2/Auth_JS.html'%}
+
+    {% include 'FIDO2/FormFill.html' %}
+{#    {% include 'FIDO2/Auth_JS.html' %}#}
 </body>
 
 </html>

mfa/templates/FIDO2/Auth_JS.html

@@ -2,16 +2,19 @@
 <script type="application/javascript" src="{% static 'mfa/js/cbor.js' %}"></script>
 <script type="application/javascript" src="{% static 'mfa/js/ua-parser.min.js' %}"></script>
 <script type="text/javascript">
-        function authen()
+    function authen()
         {
                          fetch('{% url 'fido2_begin_auth' %}', {
       method: 'GET',
     }).then(function(response) {
       if(response.ok) return response.arrayBuffer();
       throw new Error('No credential available to authenticate!');
-    }).then(CBOR.decode).then(function(options) {
+    }).then(CBOR.decode).then(async function(options) {
         console.log(options)
-      return navigator.credentials.get(options);
+         {% if conditionalUI %}
+         options["mediation"] =  'conditional';
+         {% endif %}
+       return navigator.credentials.get(options);
     }).then(function(assertion) {
         res=CBOR.encode({
           "credentialId": new Uint8Array(assertion.rawId),

mfa/templates/FIDO2/FormFill.html

@@ -0,0 +1,15 @@
+<script type="application/javascript">
+    $(document).ready(async function () {
+        if (window.PublicKeyCredential &&
+            PublicKeyCredential.isConditionalMediationAvailable
+    )
+        {
+            // Check if conditional mediation is available.
+            const isCMA = await PublicKeyCredential.isConditionalMediationAvailable()
+            if (isCMA) {
+                authen();
+            }
+        }
+    })
+</script>
+{% include 'FIDO2/Auth_JS.html' with conditionalUI=True %}