diff --git a/frontend-reactive/app/components/passkey.hbs b/frontend-reactive/app/components/passkey.hbs
new file mode 100644
index 0000000..e69de29
diff --git a/frontend-reactive/app/components/passkey.ts b/frontend-reactive/app/components/passkey.ts
new file mode 100644
index 0000000..d275a4c
--- /dev/null
+++ b/frontend-reactive/app/components/passkey.ts
@@ -0,0 +1,119 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import '@simplewebauthn/browser';
+import {
+  startAuthentication,
+  startRegistration,
+} from '@simplewebauthn/browser';
+
+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 Passkey extends Component<PasskeySignature> {
+  @tracked username: string = '';
+  @tracked error: string | undefined;
+
+  @action async startLogin() {
+    try {
+      // Get login options from your server. Here, we also receive the challenge.
+      const response = await fetch('/webauthn/passkey/loginBegin', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: this.username }),
+      });
+      // Check if the login options are ok.
+      if (!response.ok) {
+        const msg = await response.json();
+        throw new Error('Failed to get login options from server: ' + msg);
+      }
+      // Convert the login options to JSON.
+      const options = await response.json();
+
+      // This triggers the browser to display the passkey / WebAuthn modal (e.g. Face ID, Touch ID, Windows Hello).
+      // A new assertionResponse is created. This also means that the challenge has been signed.
+      const assertionResponse = await startAuthentication(options.publicKey);
+
+      // Send assertionResponse back to server for verification.
+      const verificationResponse = await fetch(
+        '/webauthn/passkey/loginFinish',
+        {
+          method: 'POST',
+          credentials: 'same-origin',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(assertionResponse),
+        },
+      );
+
+      const msg = await verificationResponse.json();
+      if (verificationResponse.ok) {
+        this.error = undefined;
+      } else {
+        this.error = msg;
+      }
+    } catch (error: any) {
+      this.error = 'Error: ' + error.message;
+    }
+  }
+
+  @action async startRegistration() {
+    try {
+      // Get registration options from your server. Here, we also receive the challenge.
+      const response = await fetch('/webauthn/passkey/registerBegin', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: this.username }),
+      });
+
+      // Check if the registration options are ok.
+      if (!response.ok) {
+        const msg = await response.json();
+        throw new Error(
+          'User already exists or failed to get registration options from server: ' +
+            msg,
+        );
+      }
+
+      // Convert the registration options to JSON.
+      const options = await response.json();
+      console.log('registration start', options);
+
+      // This triggers the browser to display the passkey / WebAuthn modal (e.g. Face ID, Touch ID, Windows Hello).
+      // A new attestation is created. This also means a new public-private-key pair is created.
+      const attestationResponse = await startRegistration(options.publicKey);
+
+      console.log('Attempting to complete registration', attestationResponse);
+      // Send attestationResponse back to server for verification and storage.
+      const verificationResponse = await fetch(
+        '/webauthn/passkey/registerFinish',
+        {
+          method: 'POST',
+          credentials: 'same-origin',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(attestationResponse),
+        },
+      );
+
+      const msg = await verificationResponse.json();
+      if (verificationResponse.ok) {
+        this.error = undefined;
+      } else {
+        this.error = msg;
+      }
+    } catch (error: any) {
+      this.error = 'Error: ' + error.message;
+    }
+  }
+}
diff --git a/frontend-reactive/app/services/authentication.ts b/frontend-reactive/app/services/authentication.ts
new file mode 100644
index 0000000..27fb3ee
--- /dev/null
+++ b/frontend-reactive/app/services/authentication.ts
@@ -0,0 +1,13 @@
+import Service from '@ember/service'
+
+export default class AuthenticationService extends Service {}
+
+// Don't remove this declaration: this is what enables TypeScript to resolve
+// this service using `Owner.lookup('service:authentication')`, as well
+// as to check when you pass the service name as an argument to the decorator,
+// like `@service('authentication') declare altName: AuthenticationService;`.
+declare module '@ember/service' {
+  interface Registry {
+    authentication: AuthenticationService
+  }
+}
diff --git a/frontend-reactive/app/styles/util.css b/frontend-reactive/app/styles/util.css
index 77e5b68..b35bccb 100644
--- a/frontend-reactive/app/styles/util.css
+++ b/frontend-reactive/app/styles/util.css
@@ -4,11 +4,7 @@
 
 /* Copied from: https://stackoverflow.com/a/4407335 */
 .noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  user-select: none; /* Safari */
-  user-select: none; /* Konqueror HTML */
-  user-select: none; /* Old versions of Firefox */
-  user-select: none; /* Internet Explorer/Edge */
+  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }
diff --git a/frontend-reactive/biome.json b/frontend-reactive/biome.json
new file mode 100644
index 0000000..eb817cf
--- /dev/null
+++ b/frontend-reactive/biome.json
@@ -0,0 +1,156 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+	"vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
+	"files": { "ignoreUnknown": false, "ignore": [] },
+	"formatter": {
+		"enabled": true,
+		"useEditorconfig": true,
+		"formatWithErrors": false,
+		"indentStyle": "space",
+		"indentWidth": 2,
+		"lineEnding": "lf",
+		"lineWidth": 80,
+		"attributePosition": "auto",
+		"bracketSpacing": true,
+		"ignore": [
+			"./blueprints/*/files/",
+			"./dist/",
+			"./coverage/",
+			"**/.*/",
+			"./.node_modules.ember-try/"
+		]
+	},
+	"organizeImports": { "enabled": true },
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": false,
+			"complexity": {
+				"noExtraBooleanCast": "error",
+				"noMultipleSpacesInRegularExpressionLiterals": "error",
+				"noUselessCatch": "error",
+				"noWith": "error",
+				"useArrowFunction": "off"
+			},
+			"correctness": {
+				"noConstAssign": "error",
+				"noConstantCondition": "error",
+				"noEmptyCharacterClassInRegex": "error",
+				"noEmptyPattern": "error",
+				"noGlobalObjectCalls": "error",
+				"noInnerDeclarations": "error",
+				"noInvalidConstructorSuper": "error",
+				"noNewSymbol": "error",
+				"noNonoctalDecimalEscape": "error",
+				"noPrecisionLoss": "error",
+				"noSelfAssign": "error",
+				"noSetterReturn": "error",
+				"noSwitchDeclarations": "error",
+				"noUndeclaredVariables": "error",
+				"noUnreachable": "error",
+				"noUnreachableSuper": "error",
+				"noUnsafeFinally": "error",
+				"noUnsafeOptionalChaining": "error",
+				"noUnusedLabels": "error",
+				"noUnusedVariables": "error",
+				"useIsNan": "error",
+				"useValidForDirection": "error",
+				"useYield": "error"
+			},
+			"style": { "useBlockStatements": "off" },
+			"suspicious": {
+				"noAssignInExpressions": "error",
+				"noAsyncPromiseExecutor": "error",
+				"noCatchAssign": "error",
+				"noClassAssign": "error",
+				"noCompareNegZero": "error",
+				"noControlCharactersInRegex": "error",
+				"noDebugger": "error",
+				"noDuplicateCase": "error",
+				"noDuplicateClassMembers": "error",
+				"noDuplicateObjectKeys": "error",
+				"noDuplicateParameters": "error",
+				"noEmptyBlockStatements": "error",
+				"noFallthroughSwitchClause": "error",
+				"noFunctionAssign": "error",
+				"noGlobalAssign": "error",
+				"noImportAssign": "error",
+				"noMisleadingCharacterClass": "error",
+				"noPrototypeBuiltins": "error",
+				"noRedeclare": "error",
+				"noShadowRestrictedNames": "error",
+				"noSparseArray": "error",
+				"noUnsafeNegation": "error",
+				"useGetterReturn": "error",
+				"useValidTypeof": "error"
+			}
+		},
+		"ignore": [
+			"./blueprints/*/files/",
+			"./declarations/",
+			"./dist/",
+			"./coverage/",
+			"**/.*/",
+			"./.node_modules.ember-try/"
+		]
+	},
+	"javascript": {
+		"formatter": {
+			"jsxQuoteStyle": "double",
+			"quoteProperties": "asNeeded",
+			"trailingCommas": "all",
+			"semicolons": "asNeeded",
+			"arrowParentheses": "always",
+			"bracketSameLine": false,
+			"quoteStyle": "single",
+			"attributePosition": "auto",
+			"bracketSpacing": true
+		}
+	},
+	"overrides": [
+		{ "include": ["**/*.ts"] },
+		{
+			"include": [
+				"./.eslintrc.js",
+				"./.prettierrc.js",
+				"./.stylelintrc.js",
+				"./.template-lintrc.js",
+				"./ember-cli-build.js",
+				"./testem.js",
+				"./blueprints/*/index.js",
+				"./config/**/*.js",
+				"./lib/*/index.js",
+				"./server/**/*.js"
+			]
+		},
+		{ "include": ["tests/**/*-test.{js,ts}"] },
+		{
+			"include": ["**/*.gjs", "**/*.gts"],
+			"javascript": { "globals": ["__GLIMMER_TEMPLATE"] }
+		},
+		{ "include": ["**/*.ts"] },
+		{
+			"include": [
+				"./.eslintrc.js",
+				"./.prettierrc.js",
+				"./.stylelintrc.js",
+				"./.template-lintrc.js",
+				"./ember-cli-build.js",
+				"./testem.js",
+				"./blueprints/*/index.js",
+				"./config/**/*.js",
+				"./lib/*/index.js",
+				"./server/**/*.js"
+			]
+		},
+		{ "include": ["tests/**/*-test.{js,ts}"] },
+		{
+			"include": ["**/*.gjs", "**/*.gts"],
+			"javascript": { "globals": ["__GLIMMER_TEMPLATE"] }
+		},
+		{
+			"include": ["*.{js,ts}"],
+			"javascript": { "formatter": { "quoteStyle": "single" } }
+		}
+	]
+}
diff --git a/frontend-reactive/bun.lockb b/frontend-reactive/bun.lockb
index c45ea74..ba06749 100755
Binary files a/frontend-reactive/bun.lockb and b/frontend-reactive/bun.lockb differ
diff --git a/frontend-reactive/package.json b/frontend-reactive/package.json
index 295722e..669d7cc 100644
--- a/frontend-reactive/package.json
+++ b/frontend-reactive/package.json
@@ -116,6 +116,7 @@
 		"edition": "octane"
 	},
 	"dependencies": {
+		"@simplewebauthn/browser": "^11.0.0",
 		"moment": "^2.30.1"
 	}
 }
diff --git a/frontend-reactive/public/humans.txt b/frontend-reactive/public/humans.txt
new file mode 100644
index 0000000..1ca189d
--- /dev/null
+++ b/frontend-reactive/public/humans.txt
@@ -0,0 +1 @@
+Linstrom, made my Melody/m*
diff --git a/frontend-reactive/tests/integration/components/global/general-sidebar-test.ts b/frontend-reactive/tests/integration/components/global/general-sidebar-test.ts
index 22bee9f..984ae70 100644
--- a/frontend-reactive/tests/integration/components/global/general-sidebar-test.ts
+++ b/frontend-reactive/tests/integration/components/global/general-sidebar-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | global/general-sidebar", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | global/general-sidebar', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Global::GeneralSidebar />`);
+    await render(hbs`<Global::GeneralSidebar />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests once design exists
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests once design exists
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/note-test.ts b/frontend-reactive/tests/integration/components/note-test.ts
index c81c97b..6a35529 100644
--- a/frontend-reactive/tests/integration/components/note-test.ts
+++ b/frontend-reactive/tests/integration/components/note-test.ts
@@ -1,29 +1,29 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | note", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | note', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
-		this.set("note", {
-			displayname: "bob",
-			username: "alice",
-			server: "example.com",
-			content: "some content",
-			createdAt: Date.now(),
-		});
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.set('note', {
+      displayname: 'bob',
+      username: 'alice',
+      server: 'example.com',
+      content: 'some content',
+      createdAt: Date.now(),
+    });
 
-		await render(hbs`
+    await render(hbs`
       <Note @note={{this.note}}/>
     `);
 
-		assert.dom("p.note-user-displayname").hasText("bob");
-		assert.dom("p.note-user-handle").hasText("@alice@example.com");
-		assert.dom("p.note-content-text").hasText("some content");
-		// TODO: Fix tests
-	});
+    assert.dom('p.note-user-displayname').hasText('bob');
+    assert.dom('p.note-user-handle').hasText('@alice@example.com');
+    assert.dom('p.note-content-text').hasText('some content');
+    // TODO: Fix tests
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/note/content-test.ts b/frontend-reactive/tests/integration/components/note/content-test.ts
index b60377d..24d46bb 100644
--- a/frontend-reactive/tests/integration/components/note/content-test.ts
+++ b/frontend-reactive/tests/integration/components/note/content-test.ts
@@ -1,41 +1,41 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render, click } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
-import { setupIntl } from "ember-intl/test-support";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
 
-module("Integration | Component | note/content", function (hooks) {
-	setupRenderingTest(hooks);
-	setupIntl(hooks, "en-us");
+module('Integration | Component | note/content', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
 
-	test("keep short content as is", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('keep short content as is', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		const shortContent = "Lorem ipsum odor amet, consectetuer adipiscing elit.";
-		this.set("shortContent", shortContent);
+    const shortContent = 'Lorem ipsum odor amet, consectetuer adipiscing elit.';
+    this.set('shortContent', shortContent);
 
-		await render(hbs`<Note::Content @content="{{this.shortContent}}"/>`);
+    await render(hbs`<Note::Content @content="{{this.shortContent}}"/>`);
 
-		assert.dom(".note-content-text").hasText(shortContent);
-	});
+    assert.dom('.note-content-text').hasText(shortContent);
+  });
 
-	test("long content cutoff and correct expansion", async function (assert) {
-		const longContent =
-			"Grapple keel reef fathom haul wind bilge rat swing the lead belay line pink. Man-of-war mizzenmast killick lookout yo-ho-ho Sail ho gabion careen sutler stern. Draught wherry lookout schooner prow hail-shot spanker Letter of Marque lateen sail strike colors.\n\nLad heave to topgallant scallywag scuppers Spanish Main poop deck spike hulk broadside. Snow take a caulk hornswaggle gaff swab quarter lugger spanker bilge provost. Man-of-war measured fer yer chains lugger cable loaded to the gunwalls prow piracy snow doubloon furl.\n\nDead men tell no tales jib chase guns gunwalls Gold Road smartly nipperkin topsail bilge water Pirate Round. Gaff gunwalls bilged on her anchor bilge water scourge of the seven seas parley ho sheet chase guns squiffy. Scuppers fathom ho quarter gally heave to yardarm coxswain red ensign pink.";
-		this.set("longContent", longContent);
+  test('long content cutoff and correct expansion', async function (assert) {
+    const longContent =
+      'Grapple keel reef fathom haul wind bilge rat swing the lead belay line pink. Man-of-war mizzenmast killick lookout yo-ho-ho Sail ho gabion careen sutler stern. Draught wherry lookout schooner prow hail-shot spanker Letter of Marque lateen sail strike colors.\n\nLad heave to topgallant scallywag scuppers Spanish Main poop deck spike hulk broadside. Snow take a caulk hornswaggle gaff swab quarter lugger spanker bilge provost. Man-of-war measured fer yer chains lugger cable loaded to the gunwalls prow piracy snow doubloon furl.\n\nDead men tell no tales jib chase guns gunwalls Gold Road smartly nipperkin topsail bilge water Pirate Round. Gaff gunwalls bilged on her anchor bilge water scourge of the seven seas parley ho sheet chase guns squiffy. Scuppers fathom ho quarter gally heave to yardarm coxswain red ensign pink.';
+    this.set('longContent', longContent);
 
-		await render(hbs`<Note::Content @content="{{this.longContent}}"/>`);
+    await render(hbs`<Note::Content @content="{{this.longContent}}"/>`);
 
-		assert
-			.dom(".note-content-text")
-			.hasText(
-				"Grapple keel reef fathom haul wind bilge rat swing the lead belay line pink. Man-of-war mizzenmast killick lookout yo-ho-ho Sail ho gabion careen sutler stern. Draught wherry lookout schooner prow hail-shot ...",
-			);
-		assert.dom(".note-content-toggle").hasText("Expand");
+    assert
+      .dom('.note-content-text')
+      .hasText(
+        'Grapple keel reef fathom haul wind bilge rat swing the lead belay line pink. Man-of-war mizzenmast killick lookout yo-ho-ho Sail ho gabion careen sutler stern. Draught wherry lookout schooner prow hail-shot ...',
+      );
+    assert.dom('.note-content-toggle').hasText('Expand');
 
-		await click(".note-content-toggle");
-		assert.dom(".note-content-toggle").hasText("Collapse");
-		assert.dom(".note-content-text").hasText(longContent);
-	});
+    await click('.note-content-toggle');
+    assert.dom('.note-content-toggle').hasText('Collapse');
+    assert.dom('.note-content-text').hasText(longContent);
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/note/interactions-test.ts b/frontend-reactive/tests/integration/components/note/interactions-test.ts
index 902bdd0..4846537 100644
--- a/frontend-reactive/tests/integration/components/note/interactions-test.ts
+++ b/frontend-reactive/tests/integration/components/note/interactions-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | note/interactions", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | note/interactions', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Note::Interactions />`);
+    await render(hbs`<Note::Interactions />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/note/user-header-test.ts b/frontend-reactive/tests/integration/components/note/user-header-test.ts
index 828e601..66f6ccf 100644
--- a/frontend-reactive/tests/integration/components/note/user-header-test.ts
+++ b/frontend-reactive/tests/integration/components/note/user-header-test.ts
@@ -1,21 +1,21 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | note/user-header", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | note/user-header', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(
-			hbs`<Note::UserHeader @displayname="bob" @handle="@alice@example.com"/>`,
-		);
+    await render(
+      hbs`<Note::UserHeader @displayname="bob" @handle="@alice@example.com"/>`,
+    );
 
-		assert.dom("p.note-user-displayname").hasText("bob");
-		assert.dom("p.note-user-handle").hasText("@alice@example.com");
-		// TODO: Expand tests to include profile picture
-	});
+    assert.dom('p.note-user-displayname').hasText('bob');
+    assert.dom('p.note-user-handle').hasText('@alice@example.com');
+    // TODO: Expand tests to include profile picture
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/page-test.ts b/frontend-reactive/tests/integration/components/page-test.ts
index 4ad183d..8f4a0d4 100644
--- a/frontend-reactive/tests/integration/components/page-test.ts
+++ b/frontend-reactive/tests/integration/components/page-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | page", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | page', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Page />`);
+    await render(hbs`<Page />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/page/header-test.ts b/frontend-reactive/tests/integration/components/page/header-test.ts
index 89dfff4..178a4b8 100644
--- a/frontend-reactive/tests/integration/components/page/header-test.ts
+++ b/frontend-reactive/tests/integration/components/page/header-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | page/header", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | page/header', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Page::Header />`);
+    await render(hbs`<Page::Header />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts b/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts
index fe2de5e..516c1ee 100644
--- a/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts
+++ b/frontend-reactive/tests/integration/components/page/left-sidebar-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | page/left-sidebar", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | page/left-sidebar', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Page::LeftSidebar />`);
+    await render(hbs`<Page::LeftSidebar />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/passkey-test.ts b/frontend-reactive/tests/integration/components/passkey-test.ts
new file mode 100644
index 0000000..e9aa12b
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/passkey-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | passkey', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Passkey />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Passkey>
+        template block text
+      </Passkey>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});
diff --git a/frontend-reactive/tests/integration/components/timeline-test.ts b/frontend-reactive/tests/integration/components/timeline-test.ts
index d7606ea..8b1936a 100644
--- a/frontend-reactive/tests/integration/components/timeline-test.ts
+++ b/frontend-reactive/tests/integration/components/timeline-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | timeline", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | timeline', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Timeline />`);
+    await render(hbs`<Timeline />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests
+  });
 });
diff --git a/frontend-reactive/tests/integration/components/timeline/header-test.ts b/frontend-reactive/tests/integration/components/timeline/header-test.ts
index 4101385..efc4b23 100644
--- a/frontend-reactive/tests/integration/components/timeline/header-test.ts
+++ b/frontend-reactive/tests/integration/components/timeline/header-test.ts
@@ -1,18 +1,18 @@
-import { module, test } from "qunit";
-import { setupRenderingTest } from "frontend-reactive/tests/helpers";
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
-module("Integration | Component | timeline/header", function (hooks) {
-	setupRenderingTest(hooks);
+module('Integration | Component | timeline/header', function (hooks) {
+  setupRenderingTest(hooks);
 
-	test("it renders", async function (assert) {
-		// Set any properties with this.set('myProperty', 'value');
-		// Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
 
-		await render(hbs`<Timeline::Header />`);
+    await render(hbs`<Timeline::Header />`);
 
-		assert.dom().hasText("");
-		// TODO: Add tests
-	});
+    assert.dom().hasText('');
+    // TODO: Add tests
+  });
 });
diff --git a/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts b/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts
index 432cc60..8f99054 100644
--- a/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts
+++ b/frontend-reactive/tests/unit/routes/notes/:note-id-test.ts
@@ -1,13 +1,13 @@
-import { module, test } from "qunit";
-import { setupTest } from "frontend-reactive/tests/helpers";
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend-reactive/tests/helpers';
 
-module("Unit | Route | notes/:note_id", function (hooks) {
-	setupTest(hooks);
+module('Unit | Route | notes/:note_id', function (hooks) {
+  setupTest(hooks);
 
-	test("it exists", function (assert) {
-		assert.ok(true);
-		// const route = this.owner.lookup("route:notes/:note-id");
-		// assert.ok(route);
-		// TODO: Fix and extend tests once dynamic note path exists
-	});
+  test('it exists', function (assert) {
+    assert.ok(true);
+    // const route = this.owner.lookup("route:notes/:note-id");
+    // assert.ok(route);
+    // TODO: Fix and extend tests once dynamic note path exists
+  });
 });
diff --git a/frontend-reactive/tests/unit/services/authentication-test.ts b/frontend-reactive/tests/unit/services/authentication-test.ts
new file mode 100644
index 0000000..035ce0d
--- /dev/null
+++ b/frontend-reactive/tests/unit/services/authentication-test.ts
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend-reactive/tests/helpers';
+
+module('Unit | Service | authentication', function (hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function (assert) {
+    const service = this.owner.lookup('service:authentication');
+    assert.ok(service);
+  });
+});
diff --git a/pk-auth/script.js b/pk-auth/script.js
index d570a57..bc1b23e 100644
--- a/pk-auth/script.js
+++ b/pk-auth/script.js
@@ -2,6 +2,7 @@ document.getElementById("registerButton").addEventListener("click", register);
 document.getElementById("loginButton").addEventListener("click", login);
 
 function showMessage(message, isError = false) {
+  console.log("got message", message);
   const messageElement = document.getElementById("message");
   messageElement.textContent = message;
   messageElement.style.color = isError ? "red" : "green";
@@ -52,13 +53,18 @@ async function register() {
       },
     );
 
+    console.log("Registration finish");
+
     const msg = await verificationResponse.json();
+    console.log("register full response", verificationResponse);
+    console.log("register body", msg);
     if (verificationResponse.ok) {
       showMessage(msg, false);
     } else {
       showMessage(msg, true);
     }
   } catch (error) {
+    console.log("Received error", error);
     showMessage("Error: " + error.message, true);
   }
 }
@@ -98,13 +104,17 @@ async function login() {
       body: JSON.stringify(assertionResponse),
     });
 
+    console.log("login done");
     const msg = await verificationResponse.json();
+    console.log("login-response", verificationResponse);
+    console.log("login-body", msg);
     if (verificationResponse.ok) {
       showMessage(msg, false);
     } else {
       showMessage(msg, true);
     }
   } catch (error) {
+    console.log("received error", error);
     showMessage("Error: " + error.message, true);
   }
 }