Merge pull request #157 from duo-labs/fix/156-profile-page

fix/156-profile-page

Author: MasterKale

_app/homepage/helpers.py

@@ -1,7 +1,9 @@
 from typing import List
 
+from webauthn.helpers.structs import AuthenticatorTransport
 
-def transports_to_ui_string(transports: List[str]) -> str:
+
+def transports_to_ui_string(transports: List[AuthenticatorTransport]) -> str:
     """
     Generate a human-readable string of transports
 

_app/homepage/services/__init__.py

@@ -1,6 +1,15 @@
-from .redis import RedisService  # noqa: F401
-from .registration import RegistrationService  # noqa: F401
-from .credential import CredentialService  # noqa: F401
-from .authentication import AuthenticationService  # noqa: F401
-from .session import SessionService  # noqa: F401
-from .metadata import MetadataService  # noqa: F401
+from .redis import RedisService
+from .registration import RegistrationService
+from .credential import CredentialService
+from .authentication import AuthenticationService
+from .session import SessionService
+from .metadata import MetadataService
+
+__all__ = [
+    "RedisService",
+    "RegistrationService",
+    "CredentialService",
+    "AuthenticationService",
+    "SessionService",
+    "MetadataService",
+]

_app/homepage/services/credential.py

@@ -55,7 +55,7 @@ def store_credential(
 
         self._temporarily_store_in_redis(new_credential)
 
-        transports_str = transports_to_ui_string(transports or [])
+        transports_str = transports_to_ui_string(mapped_transports or [])
         cred_type = "discoverable credential" if is_discoverable_credential else "credential"
 
         logger.info(f'User "{username}" registered a {cred_type} with transports {transports_str}')

_app/homepage/services/registration.py

@@ -1,5 +1,4 @@
 from typing import Union, List, Optional
-import secrets
 
 from django.conf import settings
 from webauthn import (
@@ -96,8 +95,7 @@ def generate_registration_options(
             rp_id=settings.RP_ID,
             rp_name=settings.RP_NAME,
             user_name=username,
-            # TODO: Remove when https://github.com/MasterKale/SimpleWebAuthn/issues/530 gets fixed
-            user_id=secrets.token_bytes(32),
+            user_id=f"webauthnio-{username}".encode(),
             attestation=_attestation,
             authenticator_selection=authenticator_selection,
             supported_pub_key_algs=supported_pub_key_algs,

_app/homepage/templates/homepage/profile.html

@@ -85,14 +85,40 @@ <h4>{{ cred.id }}</h4>
             <strong>AAGUID:</strong> {{ cred.aaguid }}
           </li>
           <li class="credential-delete">
-            <form action="{% url 'credential-delete' cred.raw_id %}" method="post">
-              {% csrf_token %}
-              <button type="submit" class="btn btn-outline-danger">Delete</button>
-            </form>
+            <button type="button" class="btn btn-outline-danger" onclick="deleteCredential('{{cred.raw_id}}')">Delete</button>
           </li>
         </ul>
       </div>
       {% endfor %}
+      {% csrf_token %}
+      <script>
+        /**
+         * Delete the credential then reload the page so we don't pollute the browser history stack
+         *
+         * @param {string} id
+         */
+        async function deleteCredential(id) {
+          // Normalize the ID a bit
+          const _id = id.trim();
+
+          // Get CSRF token
+          const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+
+          try {
+            await fetch(
+              `credential/${_id}/delete`,
+              {
+                method: 'post',
+                headers: {'X-CSRFToken': csrftoken},
+                mode: 'same-origin',
+              },
+            );
+            window.location.reload();
+          } catch (err) {
+            console.error('Error deleting credential', err);
+          }
+        }
+      </script>
     </div>
   </div>
 </section>

_app/homepage/templates/homepage/sections/webauthn_form.html

@@ -551,6 +551,8 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
       },
       // Internal Methods
       async _startRegistration() {
+        this._syncUsernameInputState();
+
         // Submit options
         const {
           regUserVerification,
@@ -631,6 +633,8 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
         }
       },
       async _startAuthentication(startConditionalUI = false) {
+        this._syncUsernameInputState();
+
         const {
           authUserVerification,
         } = this.options;
@@ -682,7 +686,7 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
 
         if (verificationJSON.verified === true) {
           // Reload page to display profile
-          window.location.href = '{% url "index" %}';
+          window.location.href = '{% url "profile" %}';
         } else {
           this.showErrorAlert(`Authentication failed: ${verificationJSON.error}`);
         }
@@ -732,7 +736,17 @@ <h2>WebAuthn isn't supported. Please consider switching to a modern browser.</h2
         formattedHints = formattedHints.replace(/,/g, ", ");
 
         this._regHints.formatted = formattedHints;
-      }
+      },
+      /**
+       * If the user hits the browser back button from the profile page then the input can still
+       * be populated, but Alpine won't know this. This helps sync form state a bit.
+       */
+      _syncUsernameInputState() {
+        const elemUsername = document.getElementById('input-email');
+        if (elemUsername.value && !this.username) {
+          this.username = elemUsername.value;
+        }
+      },
     }));
   });
 </script>

_app/homepage/urls.py

@@ -4,6 +4,7 @@
 
 urlpatterns = [
     path("", views.index, name="index"),
+    path("profile", views.profile, name="profile"),
     path("logout", views.logout, name="logout"),
     path("registration/options", views.registration_options, name="registration-options"),
     path(

_app/homepage/views/__init__.py

@@ -1,8 +1,21 @@
-from .index import index  # noqa: F401
-from .registration_options import registration_options  # noqa: F401
-from .registration_verification import registration_verification  # noqa: F401
-from .authentication_options import authentication_options  # noqa: F401
-from .authentication_verification import authentication_verification  # noqa: F401
-from .logout import logout  # noqa: F401
-from .credential_delete import credential_delete  # noqa: F401
-from .well_known import apple_app_site_association  # noqa: F401
+from .index import index
+from .registration_options import registration_options
+from .registration_verification import registration_verification
+from .authentication_options import authentication_options
+from .authentication_verification import authentication_verification
+from .logout import logout
+from .credential_delete import credential_delete
+from .well_known import apple_app_site_association
+from .profile import profile
+
+__all__ = [
+    "index",
+    "registration_options",
+    "registration_verification",
+    "authentication_options",
+    "authentication_verification",
+    "logout",
+    "credential_delete",
+    "apple_app_site_association",
+    "profile",
+]

_app/homepage/views/credential_delete.py

@@ -1,4 +1,4 @@
-from django.shortcuts import redirect
+from django.http import JsonResponse
 from django.views.decorators.http import require_http_methods
 
 from homepage.services import CredentialService
@@ -8,4 +8,4 @@
 def credential_delete(request, credential_id):
     credential_service = CredentialService()
     credential_service.delete_credential_by_id(credential_id=credential_id)
-    return redirect("index")
+    return JsonResponse({"deleted": True})

_app/homepage/views/index.py

@@ -1,77 +1,24 @@
+from django.http import HttpRequest
 from django.shortcuts import render
-from webauthn.helpers.structs import CredentialDeviceType
+from django.views.decorators.cache import never_cache
 
 from homepage.const import libraries, demos
-from homepage.services import SessionService, CredentialService, MetadataService
-from homepage.helpers import (
-    transports_to_ui_string,
-    truncate_credential_id_to_ui_string,
-)
+from homepage.services import SessionService
 
 
-def index(request):
+@never_cache
+def index(request: HttpRequest):
     """
     Render the homepage
     """
-    context = {
-        "libraries": libraries,
-        "demos": demos,
-    }
 
     session_service = SessionService()
     session_service.start_session(request=request)
 
     template = "homepage/index.html"
-    if session_service.user_is_logged_in(request=request):
-        template = "homepage/profile.html"
-
-        username = request.session["username"]
-        credential_service = CredentialService()
-        metadata_service = MetadataService()
-
-        user_credentials = credential_service.retrieve_credentials_by_username(username=username)
-
-        parsed_credentials = []
-
-        for cred in user_credentials:
-            description = ""
-
-            if cred.device_type == CredentialDeviceType.SINGLE_DEVICE:
-                description += "device-bound "
-            else:
-                description += "synced "
-
-            if cred.is_discoverable_credential is None:
-                # We can't really describe it if we didn't get a signal back
-                description += "credential of unknown discoverability"
-            elif cred.is_discoverable_credential:
-                description += "passkey"
-            else:
-                description += "non-discoverable credential"
-
-            aaguid = str(cred.aaguid)
-            provider_name = metadata_service.get_provider_name(
-                aaguid=aaguid,
-                device_type=cred.device_type,
-            )
-
-            if not provider_name:
-                provider_name = "(Unavailable)"
-
-            if not aaguid:
-                aaguid = "(Unavailable)"
-
-            parsed_credentials.append(
-                {
-                    "id": truncate_credential_id_to_ui_string(cred.id),
-                    "raw_id": cred.id,
-                    "transports": transports_to_ui_string(cred.transports or []),
-                    "description": description,
-                    "provider_name": provider_name,
-                    "aaguid": aaguid,
-                }
-            )
-
-        context["credentials"] = parsed_credentials
+    context = {
+        "libraries": libraries,
+        "demos": demos,
+    }
 
     return render(request, template, context)