WIP: Passwordless

2021-05-28 21:23:13 +03:00
32 changed files with 193 additions and 262 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,26 +1,7 @@
 # Change Log
-## 2.5.0

-   * Fixed: issue in the 'Authorize' button don't show on Firefox and Chrome on iOS.
-     Note: It seems Firefox doesn't support WebAuthn on iOS
-   * Fixed: Support for bootstrap5
-Thanks to @ezrajrice
-
-## 2.4.0
-
-   * Fixed: issue in the 'Authorize' button don't show on Safari Mobile.
-   * Upgrade to FIDO2 0.9.2, to fix issue with Windows 11.
-   * Fixed: Minor Typos.
-
-
-## 2.3.0
-   * Fixed: A missing import Thanks @AndreasDickow
-   * Fixed: `MFA.html` now call `{{block.super}}` for head and content blocks, thanks @mnelson4
-   * Added: #55 introduced `mfa_base.html` which will be extended by `MFA.html` for better styling 
-
-## 2.2.0
-   * Added: MFA_REDIRECT_AFTER_REGISTRATION settings parameter
-   * Fixed: Deprecation error for NULBooleanField
+## 2.2.0 (Not released)
+   * Added: MFA_REDIRECT_AFTER_REGISTRATION settings parameter 

 ## 2.1.2
  * Fixed: Getting timestamp on Python 3.7 as ("%s") is raising an exception
@@ -28,7 +9,7 @@ Thanks to @ezrajrice


 ## 2.1.1
-  * Fixed: FIDO2 version in requirements.txt file.
+  * Fixed: FIDO2 version in requirments.txt file.
  
 ## 2.1.0
   * Added Support for Touch ID for Mac OSx and iOS 14 on Safari
--- a/README.md
+++ b/README.md
@@ -20,8 +20,6 @@ For FIDO2, the following are supported
 * **Apple's Touch ID/Face ID** (Chrome 70+ on Mac OS X, Safari on macOS Big Sur, Safari on iOS 14.0+ ),
 * **android-safetynet** (Chrome 70+, Firefox 68+)
 * **NFC devices using PCSC** (Not Tested, but as supported in fido2)
- * **Soft Tokens** 
-    * [krypt.co](https://krypt.co/): Login by a notification on your phone.

 In English :), It allows you to verify the user by security keys on PC, Laptops or Mobiles, Windows Hello (Fingerprint, PIN) on Windows 10 Build 1903+ (May 2019 Update) Touch/Face ID on Macbooks (Chrome, Safari), Touch/Face ID on iPhone and iPad and Fingerprint/Face/Iris/PIN on Android Phones.

@@ -62,9 +60,9 @@ Depends on
   'mfa',
   '......')
   ```
-2. Collect Static Files
+1. Collect Static Files
 `python manage.py collectstatic`
-3. Add the following settings to your file
+1. Add the following settings to your file

   ```python 
   MFA_UNALLOWED_METHODS=()   # Methods that shouldn't be allowed for the user
@@ -97,7 +95,7 @@ Depends on
    * Starting version 1.7.0, Key owners can be specified.
    * Starting version 2.2.0
        * Added: `MFA_SUCCESS_REGISTRATION_MSG` & `MFA_REDIRECT_AFTER_REGISTRATION`
-4. Break your login function
+1. Break your login function

   Usually your login function will check for username and password, log the user in if the username and password are correct and create the user session, to support mfa, this has to change
   
@@ -117,7 +115,7 @@ Depends on
            return log_user_in(request,username=user.username) 
            #log_user_in is a function that handles creatung user session, it should be in the setting file as MFA_CALLBACK
     ```
-5. Add mfa to urls.py
+1. Add mfa to urls.py
   ```python 
   import mfa
   import mfa.TrustedDevice
@@ -128,15 +126,14 @@ Depends on
   '....',
    ]
    ```
-6. Provide `mfa_auth_base.html` in your templates with block called 'head' and 'content', The template will be included during the user login, the template shall be close to the login template.
+1. Provide `mfa_auth_base.html` in your templaes with block called 'head' and 'content'
+    The template will be included during the user login.
    If you will use Email Token method, then you have to provide template named `mfa_email_token_template.html` that will content the format of the email with parameter named `user` and `otp`.
-7. To match the look and feel of your project, MFA includes `base.html` but it needs blocks named `head` & `content` to added its content to it.
-   **Note:** Starting v2.3.0, a new template `mfa_base.html` is introduced, this template is used by `MFA.html` so you can control the styling better and current `mfa_base.html` extends `base.html`
-8. Somewhere in your app, add a link to 'mfa_home'
+1. To match the look and feel of your project, MFA includes `base.html` but it needs blocks named `head` & `content` to added its content to it.
+1. Somewhere in your app, add a link to 'mfa_home'
 ```<li><a href="{% url 'mfa_home' %}">Security</a> </li>```

-
-For Example, See 'example' app
+For Example, See https://github.com/mkalioby/AutoDeploy/commit/5f1d94b1804e0aa33c79e9e8530ce849d9eb78cc in AutDeploy Project

 # Going Passwordless

@@ -185,9 +182,6 @@ function some_func() {
 * [swainn](https://github.com/swainn)
 * [unramk](https://github.com/unramk)
 * [willingham](https://github.com/willingham)
-* [AndreasDickow](https://github.com/AndreasDickow)
-* [mnelson4](https://github.com/mnelson4)
-* [ezrajrice](https://github.com/ezrajrice)


 # Security contact information
--- a/example/example/auth.py
+++ b/example/example/auth.py
@@ -27,4 +27,8 @@ def create_session(request,username):

 def logoutView(request):
    logout(request)
-    return  render(request,"logout.html",{})
+    return  render(request,"logout.html",{})
+
+def register(request):
+    if request.method == "GET":
+        return
--- a/example/example/settings.py
+++ b/example/example/settings.py
@@ -25,7 +25,7 @@ SECRET_KEY = '#9)q!_i3@pr-^3oda(e^3$x!kq3b4f33#5l@+=+&vuz+p6gb3g'
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True

-ALLOWED_HOSTS = ['*']
+ALLOWED_HOSTS = []


 # Application definition
@@ -146,5 +146,5 @@ MFA_SUCCESS_REGISTRATION_MSG="Go to Home"
 TOKEN_ISSUER_NAME="PROJECT_NAME"      #TOTP Issuer name

 U2F_APPID="https://localhost"    #URL For U2F
-FIDO_SERVER_ID="localhost"      # Server rp id for FIDO2, it the full domain of your project
-FIDO_SERVER_NAME="TestApp"
+FIDO_SERVER_ID=u"localhost"      # Server rp id for FIDO2, it the full domain of your project
+FIDO_SERVER_NAME=u"PROJECT_NAME"
--- a/example/example/templates/base.html
+++ b/example/example/templates/base.html
@@ -36,7 +36,7 @@

    <!-- Navbar Search -->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
-      <div class="input-group mb-3">
+      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button">
--- a/example/example/templates/blank.html
+++ b/example/example/templates/blank.html
@@ -34,7 +34,7 @@

    <!-- Navbar Search -->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
-      <div class="input-group mb-3">
+      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-primary" type="button">
--- a/example/example/templates/login.html
+++ b/example/example/templates/login.html
@@ -17,7 +17,6 @@

  <!-- Custom styles for this template-->
  <link href="{% static 'css/sb-admin.css'%}" rel="stylesheet">
-
 </head>

 <body class="bg-dark">
@@ -29,7 +28,6 @@
          {% if invalid %}
              <div class="alert alert-danger">Invalid Username or password</div>
          {% endif %}
-        <form action="{% url 'login' %}" method="post">
            {% csrf_token %}
          <div class="form-group">
            <div class="form-label-group">
@@ -37,14 +35,9 @@
              <label for="inputUsername">Username</label>
            </div>
          </div>
-          <div class="form-group">
-            <div class="form-label-group">
-              <input type="password" id="inputPassword"  name="password" class="form-control" placeholder="Password" required="required">
-              <label for="inputPassword">Password</label>
-            </div>
-          </div>

-          <button class="btn btn-primary btn-block" type="submit">Login</button>
+
+          <button class="btn btn-primary btn-block" type="button" onclick="authen()">Login</button>
        </form>
      </div>
    </div>
@@ -56,7 +49,7 @@

  <!-- Core plugin JavaScript-->
  <script src="{% static 'vendor/jquery-easing/jquery.easing.min.js'%}"></script>
-
+{% include 'FIDO2/login.html' %}
 </body>

 </html>
--- a/example/example/templates/mfa_auth_base.html
+++ b/example/example/templates/mfa_auth_base.html
@@ -28,7 +28,6 @@
      <div class="card-header">Login</div>
      <div class="card-body">
    {% block content %}
-
  {% endblock %}
  </div>
   </div>
--- a/mfa/FIDO2.py
+++ b/mfa/FIDO2.py
@@ -1,6 +1,6 @@
-from fido2.client import Fido2Client
+from fido2.client import ClientData
 from fido2.server import Fido2Server, PublicKeyCredentialRpEntity
-from fido2.webauthn import AttestationObject, AuthenticatorData, CollectedClientData
+from fido2.ctap2 import AttestationObject, AuthenticatorData
 from django.template.context_processors import csrf
 from django.views.decorators.csrf import csrf_exempt
 from django.shortcuts import render
@@ -11,7 +11,7 @@ from django.http import HttpResponse
 from django.conf import settings
 from .models import *
 from fido2.utils import websafe_decode, websafe_encode
-from fido2.webauthn import AttestedCredentialData
+from fido2.ctap2 import AttestedCredentialData
 from .views import login, reset_cookie
 import datetime
 from .Common import get_redirect_url
@@ -28,7 +28,7 @@ def recheck(request):

 def getServer():
    """Get Server Info from settings and returns a Fido2Server"""
-    rp = PublicKeyCredentialRpEntity(id=settings.FIDO_SERVER_ID, name=settings.FIDO_SERVER_NAME)
+    rp = PublicKeyCredentialRpEntity(settings.FIDO_SERVER_ID, settings.FIDO_SERVER_NAME)
    return Fido2Server(rp)


@@ -51,7 +51,7 @@ def complete_reg(request):
    try:
        data = cbor.decode(request.body)

-        client_data = CollectedClientData(data['clientDataJSON'])
+        client_data = ClientData(data['clientDataJSON'])
        att_obj = AttestationObject((data['attestationObject']))
        server = getServer()
        auth_data = server.register_complete(
@@ -68,8 +68,6 @@ def complete_reg(request):
        uk.save()
        return HttpResponse(simplejson.dumps({'status': 'OK'}))
    except Exception as exp:
-        import traceback
-        print(traceback.format_exc())
        try:
            from raven.contrib.django.raven_compat.models import client
            client.captureException()
@@ -82,6 +80,7 @@ def start(request):
    """Start Registeration a new FIDO Token"""
    context = csrf(request)
    context.update(get_redirect_url())
+    context["mfa_invoke"] = True
    return render(request, "FIDO2/Add.html", context)


@@ -99,8 +98,8 @@ def auth(request):

 def authenticate_begin(request):
    server = getServer()
-    credentials = getUserCredentials(request.session.get("base_username", request.user.username))
-    auth_data, state = server.authenticate_begin(credentials)
+    #credentials = getUserCredentials(request.session.get("base_username", request.user.username))
+    auth_data, state = server.authenticate_begin()
    request.session['fido_state'] = state
    return HttpResponse(cbor.encode(auth_data), content_type = "application/octet-stream")

@@ -109,12 +108,12 @@ def authenticate_begin(request):
 def authenticate_complete(request):
    try:
        credentials = []
-        username = request.session.get("base_username", request.user.username)
+        username = request.session.get("base_username", request.POST.get("username",request.user.username))
        server = getServer()
        credentials = getUserCredentials(username)
        data = cbor.decode(request.body)
        credential_id = data['credentialId']
-        client_data = CollectedClientData(data['clientDataJSON'])
+        client_data = ClientData(data['clientDataJSON'])
        auth_data = AuthenticatorData(data['authenticatorData'])
        signature = data['signature']
        try:
--- a/mfa/U2F.py
+++ b/mfa/U2F.py
@@ -12,7 +12,6 @@ from django.conf import settings
 from django.http import HttpResponse
 from .models import *
 from .views import login
-from .Common import get_redirect_url
 import datetime
 from django.utils import timezone

--- a/mfa/init.py
+++ b/mfa/init.py
@@ -1 +1 @@
-__version__="2.2.0"
+__version__="2.2.0b1"
--- a/mfa/migrations/0011_auto_20210530_0622.py
+++ b/mfa/migrations/0011_auto_20210530_0622.py
@@ -1,18 +0,0 @@
-# Generated by Django 2.2 on 2021-05-30 06:22
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('mfa', '0010_auto_20201110_0557'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='user_keys',
-            name='owned_by_enterprise',
-            field=models.BooleanField(blank=True, default=None, null=True),
-        ),
-    ]
--- a/mfa/models.py
+++ b/mfa/models.py
@@ -15,7 +15,7 @@ class User_Keys(models.Model):
    enabled=models.BooleanField(default=True)
    expires=models.DateTimeField(null=True,default=None,blank=True)
    last_used=models.DateTimeField(null=True,default=None,blank=True)
-    owned_by_enterprise=models.BooleanField(default=None,null=True,blank=True)
+    owned_by_enterprise=models.NullBooleanField(default=None,null=True,blank=True)

    def save(self, force_insert=False, force_update=False, using=None, update_fields=None):
        if self.key_type == "Trusted Device" and self.properties.get("signature","") == "":
--- a/mfa/templates/Email/Add.html
+++ b/mfa/templates/Email/Add.html
@@ -4,12 +4,12 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container d-flex justify-content-center">
-  <div class="panel panel-default card">
-    <div class="panel-heading card-header">
+<div class="container">
+  <div class="panel panel-default">
+    <div class="panel-heading">
      <strong> Activate Token by email</strong>
    </div>
-    <div class="panel-body card-body">
+    <div class="panel-body">
      <FORM METHOD="POST" ACTION="{% url 'start_email' %}" Id="formLogin"  onSubmit="" name="FrontPage_Form1">
        {% csrf_token %}
        {%  if invalid %}
@@ -31,14 +31,14 @@
          <div class="row">
            <div class="col-sm-12 col-md-12">
              <div class="form-group">
-                <div class="input-group mb-3">
-                  <span class="input-group-addon input-group-text">
-                  <i class="glyphicon glyphicon-lock bi bi-lock"></i>
+                <div class="input-group">
+                  <span class="input-group-addon">
+                  <i class="glyphicon glyphicon-lock"></i>
                  </span>
                  <input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
                </div>
              </div>
-              <div class="form-group d-grid gap-2">
+              <div class="form-group">
                <input type="submit" class="btn btn-lg btn-success btn-block" value="Verify">
              </div>
            </div>
@@ -48,4 +48,4 @@
    </div>
  </div>
 </div>
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/Email/recheck.html
+++ b/mfa/templates/Email/recheck.html
@@ -13,15 +13,14 @@

    }
 </script>
-<div class='container'>
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> Email One Time Password </strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">

      <FORM METHOD="POST" ACTION="{% url 'email_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">

@@ -47,16 +46,16 @@
      <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-lock bi bi-lock"></i>
+	      <div class="input-group">
+		<span class="input-group-addon">
+		<i class="glyphicon glyphicon-lock"></i>
 		</span>
 		<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>

 	      </div>
 	    </div>

-          <div class="form-group d-grid gap-2">
+          <div class="form-group">

 	      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
 	      </div>
@@ -65,7 +64,7 @@
      </FORM>
      </div>
        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
+        <div class="col-md-6" style="padding-left: 25px">
            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
            {% endif %}
@@ -75,4 +74,3 @@
              </div>
 	      </div>
 	      </div>
-</div>
--- a/mfa/templates/FIDO2/Add.html
+++ b/mfa/templates/FIDO2/Add.html
@@ -34,16 +34,16 @@
      if (res["status"] =='OK')
            $("#res").html("<div class='alert alert-success'>Registered Successfully, <a href='{{redirect_html}}'> {{reg_success_msg}}</a></div>")
        else
-            $("#res").html("<div class='alert alert-danger'>Registration Failed as " + res["message"] + ", <a href='javascript:void(0)' onclick='begin_reg()'> try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
+            $("#res").html("<div class='alert alert-danger'>Registeration Failed as " + res["message"] + ", <a href='javascript:void(0)' onclick='begin_reg()'> try again or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")


    }, function(reason) {
-       $("#res").html("<div class='alert alert-danger'>Registration Failed as " +reason +", <a href='javascript:void(0)' onclick='begin_reg()'> try again </a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
+       $("#res").html("<div class='alert alert-danger'>Registeration Failed as " +reason +", <a href='javascript:void(0)' onclick='begin_reg()'> try again </a> or <a href='{% url 'mfa_home' %}'> Go to Security Home</a></div>")
    })
    }
    $(document).ready(function (){
        ua=new UAParser().getResult()
-        if (ua.browser.name == "Safari" || ua.browser.name == "Mobile Safari" )
+        if (ua.browser.name == "Safari")
        {
                $("#res").html("<button class='btn btn-success' onclick='begin_reg()'>Start...</button>")
        }
@@ -59,11 +59,11 @@
      <br/>
    <br/>
     <div class="container">
-     <div class="panel panel-default card">
-      <div class="panel-heading card-header">
+     <div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> FIDO2 Security Key</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">


    <div class="row alert alert-pr" id="res" align="center">
@@ -73,4 +73,4 @@
        </div>
    </div>
    {% include "modal.html" %}
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/FIDO2/fido2_auth.html
+++ b/mfa/templates/FIDO2/fido2_auth.html
@@ -0,0 +1,71 @@
+{%  load static %}
+<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()
+        {
+                         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) {
+        console.log(options)
+      return navigator.credentials.get(options);
+    }).then(function(assertion) {
+        res=CBOR.encode({
+          "credentialId": new Uint8Array(assertion.rawId),
+          "authenticatorData": new Uint8Array(assertion.response.authenticatorData),
+          "clientDataJSON": new Uint8Array(assertion.response.clientDataJSON),
+          "signature": new Uint8Array(assertion.response.signature)
+        });
+
+      return fetch('{% url 'fido2_complete_auth' %}', {
+
+        method: 'POST',
+        headers: {'Content-Type': 'application/cbor'},
+        body:res,
+
+      }).then(function (response) {if (response.ok) return res = response.json()}).then(function (res) {
+          if (res.status=="OK")
+          {
+              $("#msgdiv").addClass("alert alert-success").removeClass("alert-danger")
+             $("#msgdiv").html("Verified....please wait")
+          {%  if mode == "auth" %}
+          window.location.href=res.redirect;
+          {% elif mode == "recheck" %}
+              mfa_success_function();
+          {% endif %}
+          }
+          else {
+              $("#msgdiv").addClass("alert alert-danger").removeClass("alert-success")
+                $("#msgdiv").html("Verification Failed as " + res.message + ", <a href='javascript:void(0)' onclick='authen())'> try again</a> or <a href='javascript:void(0)' onclick='history.back()'> Go Back</a>")
+
+              {%  if mode == "auth" %}
+
+              {% elif mode == "recheck" %}
+
+                mfa_failed_function();
+              {% endif %}
+          }
+      })
+
+                 })
+
+        }
+    $(document).ready(function () {
+        if (location.protocol != 'https:') {
+            $("#main_paragraph").addClass("alert alert-danger")
+            $("#main_paragraph").html("FIDO2 must work under secure context")
+        } else {
+            {% if mfa_invoke %}
+            ua=new UAParser().getResult()
+            if (ua.browser.name == "Safari")
+                $("#res").html("<button class='btn btn-success' onclick='authen()'>Authenticate...</button>")
+            else
+                authen()
+            {% endif %}
+        }
+    });
+</script>
--- a/mfa/templates/FIDO2/login.html
+++ b/mfa/templates/FIDO2/login.html
@@ -0,0 +1 @@
+{% include 'FIDO2/fido2_auth.html' %}
--- a/mfa/templates/FIDO2/recheck.html
+++ b/mfa/templates/FIDO2/recheck.html
@@ -1,14 +1,12 @@
-{%  load static %}
-<script type="application/javascript" src="{% static 'mfa/js/cbor.js' %}"></script>
-<script type="application/javascript" src="{% static 'mfa/js/ua-parser.min.js' %}"></script>
+
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> Security Key</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">

              <div class="row">
            <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
@@ -35,7 +33,7 @@
          </div>

          <div class="row">
-          <div class="col-md-12 mb-3" style="padding-left: 15px">
+          <div style="padding-left: 15px">

            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
@@ -47,71 +45,4 @@
 </div>
 </div>

-    <script type="text/javascript">
-        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) {
-        console.log(options)
-      return navigator.credentials.get(options);
-    }).then(function(assertion) {
-        res=CBOR.encode({
-          "credentialId": new Uint8Array(assertion.rawId),
-          "authenticatorData": new Uint8Array(assertion.response.authenticatorData),
-          "clientDataJSON": new Uint8Array(assertion.response.clientDataJSON),
-          "signature": new Uint8Array(assertion.response.signature)
-        });
-
-      return fetch('{% url 'fido2_complete_auth' %}', {
-
-        method: 'POST',
-        headers: {'Content-Type': 'application/cbor'},
-        body:res,
-
-      }).then(function (response) {if (response.ok) return res = response.json()}).then(function (res) {
-          if (res.status=="OK")
-          {
-              $("#msgdiv").addClass("alert alert-success").removeClass("alert-danger")
-             $("#msgdiv").html("Verified....please wait")
-          {%  if mode == "auth" %}
-          window.location.href=res.redirect;
-          {% elif mode == "recheck" %}
-              mfa_success_function();
-          {% endif %}
-          }
-          else {
-              $("#msgdiv").addClass("alert alert-danger").removeClass("alert-success")
-                $("#msgdiv").html("Verification Failed as " + res.message + ", <a href='javascript:void(0)' onclick='authen())'> try again</a> or <a href='javascript:void(0)' onclick='history.back()'> Go Back</a>")
-
-              {%  if mode == "auth" %}
-
-              {% elif mode == "recheck" %}
-
-                mfa_failed_function();
-              {% endif %}
-          }
-      })
-
-                 })
-
-        }
-    $(document).ready(function () {
-        if (location.protocol != 'https:') {
-            $("#main_paragraph").addClass("alert alert-danger")
-            $("#main_paragraph").html("FIDO2 must work under secure context")
-        } else {
-            ua=new UAParser().getResult()
-            if (ua.browser.name == "Safari" || ua.browser.name == "Mobile Safari" || ua.os.name == "iOS" || ua.os.name == "iPadOS")
-                $("#res").html("<button class='btn btn-success' onclick='authen()'>Authenticate...</button>")
-            else
-                authen()
-        }
-    });
-
-
-
-    </script>
+{% include 'FIDO2/fido2_auth.html' %}
--- a/mfa/templates/MFA.html
+++ b/mfa/templates/MFA.html
@@ -1,7 +1,6 @@
-{% extends "mfa_base.html" %}
+{% extends "base.html" %}
 {% load static %}
 {% block head %}
-{{block.super}}
    <script type="text/javascript">
    function confirmDel(id) {
        $.ajax({
@@ -19,7 +18,7 @@
        $("#modal-body").html("Are you sure you want to delete '"+name+"'? you may lose access to your system if this your only 2FA.");
        $("#actionBtn").remove()
        $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-danger' onclick='confirmDel("+id+")'>Confirm Deletion</button>")
-        $("#popUpModal").modal('show')
+        $("#popUpModal").modal()
    }

    function toggleKey(id) {
@@ -40,31 +39,30 @@
    <script src="{% static 'mfa/js/bootstrap-toggle.min.js'%}"></script>
 {% endblock %}
 {% block content %}
-{{block.super}}
    <br/>
    <br/>
    <div class="container">
    <div class="row">
        <div align="center">
            <div class="btn-group">
-            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
+            <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                Add Method&nbsp;<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                {% if not 'TOTP' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_new_otop' %}">Authenticator app</a></li>
+                    <li><a href="{% url 'start_new_otop' %}">Authenticator app</a></li>
                {% endif %}
                {% if not 'Email' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_email' %}">Email Token</a></li>
+                    <li><a href="{% url 'start_email' %}">Email Token</a></li>
                {% endif %}
                {% if not 'U2F' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_u2f' %}">Security Key</a></li>
+                    <li><a href="{% url 'start_u2f' %}">Security Key</a></li>
                {% endif %}
            {% if not 'FIDO2' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
+                    <li><a href="{% url 'start_fido2' %}">FIDO2 Security Key</a></li>
                {% endif %}
            {% if not 'Trusted_Devices' in UNALLOWED_AUTHEN_METHODS %}
-                    <li><a class="dropdown-item" href="{% url 'start_td' %}">Trusted Device</a></li>
+                    <li><a href="{% url 'start_td' %}">Trusted Device</a></li>
                {% endif %}
            </ul>
            </div>
@@ -98,7 +96,7 @@
               <td>{% if key.key_type in HIDE_DISABLE %}
                   ----
                   {% else %}
-                    <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash fa-solid fa-trash-can bi bi-trash-fill"></span></a></td>
+                    <a href="javascript:void(0)" onclick="deleteKey({{ key.id }},'{{ key.key_type }}')"> <span class="fa fa-trash"></span></a></td>
                    {% endif %}
           </tr>
       {% empty %}
@@ -108,4 +106,4 @@
    </div>
    </div>
    {% include "modal.html" %}
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/TOTP/Add.html
+++ b/mfa/templates/TOTP/Add.html
@@ -63,7 +63,7 @@
 {% block content %}
 <br/>
 <br/>
-<div class="container d-flex justify-content-center">
+<div class="container">
    <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
        <div class="row" align="center">
            <h4>Adding Authenticator</h4>
@@ -98,7 +98,7 @@
                    <button class="btn btn-success" onclick="verify()">Enable</button>
                </div>
                <div class="col-md-6" align="right" style="padding-right: 30px">
-                    <a href="{% url 'mfa_home' %}" class="btn btn-default btn-secondary" role="button">Cancel</a>
+                    <a href="{% url 'mfa_home' %}"><button class="btn btn-default">Cancel</button></a>
                </div>
            </div>
        </div>
@@ -106,4 +106,4 @@
    </div>
 </div>
 {% include "modal.html" %}
-{% endblock %}
+{% endblock %}
--- a/mfa/templates/TOTP/recheck.html
+++ b/mfa/templates/TOTP/recheck.html
@@ -13,15 +13,14 @@

    }
 </script>
-<div class='container'>
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> One Time Password</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">

      <FORM METHOD="POST" ACTION="{% url 'totp_auth' %}" Id="formLogin" onSubmit="" name="FrontPage_Form1">

@@ -47,16 +46,16 @@
      <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-lock bi bi-lock"></i>
+	      <div class="input-group">
+		<span class="input-group-addon">
+		<i class="glyphicon glyphicon-lock"></i>
 		</span>
 		<input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>

 	      </div>
 	    </div>

-          <div class="form-group d-grid gap-2">
+          <div class="form-group">

 	      <input type="{% if mode == "auth" %}submit{% elif mode == 'recheck'  %}button{% endif %}" {% if mode == "recheck" %}onclick="send_totp()" {% endif %} class="btn btn-lg btn-success btn-block" value="Sign in">
 	      </div>
@@ -65,7 +64,7 @@
      </FORM>
      </div>
        <div class="row">
-        <div class="col-md-12 mb-3" style="padding-left: 25px">
+        <div class="col-md-6" style="padding-left: 25px">
            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
            {% endif %}
@@ -75,4 +74,3 @@
              </div>
 	      </div>
 	      </div>
-</div>
--- a/mfa/templates/TrustedDevices/Add.html
+++ b/mfa/templates/TrustedDevices/Add.html
@@ -31,11 +31,11 @@
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> Add Trusted Device</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">
        {%  if success %}
            <div class="alert alert-warning">
                Please check your PC window, to continue the process.
@@ -67,31 +67,31 @@
      <div class="row">
 	  <div class="col-sm-12 col-md-12">
 	    <div class="form-group">
-	      <div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
-		<i class="glyphicon glyphicon-user bi bi-person"></i>
+	      <div class="input-group">
+		<span class="input-group-addon">
+		<i class="glyphicon glyphicon-user"></i>
 		</span>
 		<input class="form-control" id="username" size="30" MaxLength="30" placeholder="Username" name="username" value="{{ username }}" type="text" autofocus autocomplete="on">

 	      </div>
 	    </div>
 	    <div class="form-group">
-		<div class="input-group mb-3">
-		<span class="input-group-addon input-group-text">
+		<div class="input-group">
+		<span class="input-group-addon">
 		<i class="fa fa-key"></i>
 		</span>
 		<input class="form-control" placeholder="e.g GAK-Y2M" id='key' style="text-transform: uppercase" name="key" type="text" size="9" MaxLength="9" value="{{ key }}">
 		</div>
 	    </div>
           <div class="form-group">
-		<span class="input-group mb-3">
+		<span class="input-group">
            <input id='agree' name="agree" type="checkbox"><span style="color: red"> I confirm that this device is mine and it is only used by me.</span>

 	    </div>
      {% comment %}
 	    <div class="form-group">
-	      <div class="input-group mb-3">
-	      <span class="input-group-addon input-group-text">
+	      <div class="input-group">
+	      <span class="input-group-addon">


 	      <select size="1" name="Institution_Code" style="font-size: 10pt; font-family: Calibri; height: 34px;width: 230px">
@@ -104,7 +104,7 @@
 	      </div>
 	      </div>
 	      {% endcomment %}
-	      <div class="form-group d-grid gap-2">
+	      <div class="form-group">
 	      <input type="submit" class="btn btn-lg btn-success btn-block" value="Trust Device">
 	      </div>
 	      </div>
@@ -113,7 +113,7 @@
 	      </form>
      {% endif %}
 	      </div>
-	      <div class="panel-footer card-footer">
+	      <div class="panel-footer ">


 	      </div>
--- a/mfa/templates/TrustedDevices/Done.html
+++ b/mfa/templates/TrustedDevices/Done.html
@@ -7,17 +7,17 @@
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> Add Trusted Device</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">
            <div class="alert alert-success">
                Your device is now trusted, please try to <a href="{{ HOST }}{{ BASE_URL }}accounts/login/"> login</a>
            </div>

 	      </div>
-	      <div class="panel-footer card-footer">
+	      <div class="panel-footer ">


 	      </div>
--- a/mfa/templates/TrustedDevices/start.html
+++ b/mfa/templates/TrustedDevices/start.html
@@ -15,7 +15,7 @@
    function sendEmail() {
        $("#modal-title").html("Send Link")
        $("#modal-body").html("Sending Email, Please wait....");
-        $("#popUpModal").modal('show');
+        $("#popUpModal").modal();
        $.ajax({
            "url":"{% url 'td_sendemail' %}",
            success:function (data) {
@@ -60,7 +60,7 @@
                    $("#actionBtn").remove();
                    $("#modal-footer").prepend("<button id='actionBtn' class='btn btn-success' onclick='checkMFA()'>Trust Device</button>")
                    $("#modal-body").html(data)
-                    $("#popUpModal").modal('show');
+                    $("#popUpModal").modal()
                }
            }
        })
--- a/mfa/templates/U2F/recheck.html
+++ b/mfa/templates/U2F/recheck.html
@@ -2,11 +2,11 @@
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> Security Key</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">

              <div class="row">
            <div style="padding-left: 15px" class="col-md-10 col-md-offset-1" id="main_paragraph" align="center">
@@ -24,7 +24,7 @@
          </div>

          <div class="row">
-          <div class="col-md-12 mb-3" style="padding-left: 15px">
+          <div style="padding-left: 15px">

            {% if request.session.mfa_methods|length > 1 %}
                <a href="{%  url 'mfa_methods_list' %}">Select Another Method</a>
@@ -95,4 +95,4 @@
        })


-    </script>
+    </script>
--- a/mfa/templates/mfa_base.html
+++ b/mfa/templates/mfa_base.html
@@ -1,7 +0,0 @@
-{% extends 'base.html' %}
-{% block head %}
-{{ block.super }}
-{% endblock %}
-{% block content %}
-{{ block.super }}
-{% endblock %}
--- a/mfa/templates/mfa_check.html
+++ b/mfa/templates/mfa_check.html
@@ -24,7 +24,7 @@
                {
                    $("#modal-title").html("Recheck Indentity")
                    $("#modal-body").html(data["html"])
-                    $("#popUpModal").modal('show')
+                    $("#popUpModal").modal()
                }


--- a/mfa/templates/modal.html
+++ b/mfa/templates/modal.html
@@ -2,15 +2,15 @@
  <div class="modal-dialog" style="height: 80%;width: 80%;">
    <div class="modal-content" >
      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modal-title"></h4>
-          <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="modal-body" >


          </div>
      <div class="modal-footer" id="modal-footer">
-        <button type="button" class="btn btn-default btn-secondary" id='btnModalClose' data-dismiss="modal" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-default" id='btnModalClose' data-dismiss="modal">Close</button>
      </div>

    </div><!-- /.modal-content -->
--- a/mfa/templates/select_mfa_method.html
+++ b/mfa/templates/select_mfa_method.html
@@ -2,15 +2,14 @@
 {% block content %}
    <br/>
 <br/>
-<div class='container'>
 <div class="row">

 <div class="col-sm-10 col-sm-offset-1 col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-<div class="panel panel-default card">
-      <div class="panel-heading card-header">
+<div class="panel panel-default">
+      <div class="panel-heading">
 	      <strong> Select Second Verification Method</strong>
      </div>
-      <div class="panel-body card-body">
+      <div class="panel-body">
          <ul>
              {% for method in request.session.mfa_methods %}

@@ -26,7 +25,5 @@
      </div>
 </div>
 </div>
-
 </div>
-</div>
-{% endblock %}
+{% endblock %}
--- a/mfa/totp.py
+++ b/mfa/totp.py
@@ -1,7 +1,6 @@
 from django.shortcuts import render
 from django.views.decorators.cache import never_cache
 from django.http import HttpResponse
-from .Common import get_redirect_url
 from .models import *
 from django.template.context_processors import csrf
 import simplejson
--- a/setup.py
+++ b/setup.py
@@ -4,7 +4,7 @@ from setuptools import find_packages, setup

 setup(
    name='django-mfa2',
-    version='2.5.0b2',
+    version='2.2.0b2    ',
    description='Allows user to add 2FA to their accounts',
    long_description=open("README.md").read(),
    long_description_content_type="text/markdown",
@@ -24,7 +24,7 @@ setup(
        'ua-parser',
        'user-agents',
        'python-jose',
-        'fido2 == 1.0.0',
+        'fido2 == 0.9.1',
        'jsonLookup'
      ],
    python_requires=">=3.5",
@@ -37,10 +37,6 @@ setup(
        "Framework :: Django :: 2.0",
        "Framework :: Django :: 2.1",
        "Framework :: Django :: 2.2",
-        "Framework :: Django :: 3.0",
-        "Framework :: Django :: 3.1",
-        "Framework :: Django :: 3.2",
-        "Framework :: Django :: 4.0",
        "Intended Audience :: Developers",
        "Operating System :: OS Independent",
        "Programming Language :: Python",
@@ -49,8 +45,6 @@ setup(
        "Programming Language :: Python :: 3.6",
        "Programming Language :: Python :: 3.7",
        "Programming Language :: Python :: 3.8",
-        "Programming Language :: Python :: 3.9",
-        "Programming Language :: Python :: 3.10",
        "Topic :: Software Development :: Libraries :: Python Modules",
 ]
 )