I FUCKING DID IT

Added a helper component for managing a list of strings.
This component could, in theory, also be turned into a generic one
for any type of data

frontend-reactive/app/components/auth.ts

@@ -0,0 +1,43 @@
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import '@simplewebauthn/browser';
+import {
+  startAuthentication,
+  startRegistration,
+} from '@simplewebauthn/browser';
+import type AuthService from 'frontend-reactive/services/auth';
+
+export interface PasskeySignature {
+  // The arguments accepted by the component
+  Args: {};
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class Auth extends Component<PasskeySignature> {
+  @tracked username: string = '';
+  @tracked error: string | undefined;
+  @service declare auth: AuthService;
+
+  @action async startLogin() {
+    try {
+      this.auth.startLogin(this.username);
+    } catch (error: any) {
+      this.error = 'Error: ' + error.message;
+    }
+  }
+
+  @action async startRegistration() {
+    try {
+      this.auth.startRegistration(this.username);
+    } catch (error: any) {
+      this.error = 'Error: ' + error.message;
+    }
+  }
+}