diff --git a/.gitignore b/.gitignore
index b02d500994..a2958f7454 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,3 +65,5 @@ app-playground-data/*
 
 .astro
 .claude
+
+container_data/
diff --git a/Cargo.lock b/Cargo.lock
index 10b4e70c11..4f2e95a2d6 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -514,6 +514,45 @@ dependencies = [
  "zbus",
 ]
 
+[[package]]
+name = "asn1-rs"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5493c3bedbacf7fd7382c6346bbd66687d12bbaad3a89a2d2c303ee6cf20b048"
+dependencies = [
+ "asn1-rs-derive",
+ "asn1-rs-impl",
+ "displaydoc",
+ "nom 7.1.3",
+ "num-traits",
+ "rusticata-macros",
+ "thiserror 1.0.69",
+ "time",
+]
+
+[[package]]
+name = "asn1-rs-derive"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "965c2d33e53cb6b267e148a4cb0760bc01f4904c1cd4bb4002a085bb016d1490"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+ "synstructure",
+]
+
+[[package]]
+name = "asn1-rs-impl"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7b18050c2cd6fe86c3a76584ef5e0baf286d038cda203eb6223df2cc413565f7"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "async-broadcast"
 version = "0.7.2"
@@ -1005,6 +1044,17 @@ version = "1.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "55248b47b0caf0546f7988906588779981c43bb1bc9d0c44087278f80cdb44ba"
 
+[[package]]
+name = "base64urlsafedata"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e5913e643e4dfb43d5908e9e6f1386f8e0dfde086ecef124a6450c6195d89160"
+dependencies = [
+ "base64 0.21.7",
+ "pastey",
+ "serde",
+]
+
 [[package]]
 name = "bindgen"
 version = "0.72.1"
@@ -1871,7 +1921,7 @@ dependencies = [
  "bitflags 2.9.4",
  "core-foundation 0.10.1",
  "core-graphics-types",
- "foreign-types",
+ "foreign-types 0.5.0",
  "libc",
 ]
 
@@ -2245,6 +2295,20 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "der-parser"
+version = "9.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5cd0a5c643689626bec213c4d8bd4d96acc8ffdb4ad4bb6bc16abf27d5f4b553"
+dependencies = [
+ "asn1-rs",
+ "displaydoc",
+ "nom 7.1.3",
+ "num-bigint",
+ "num-traits",
+ "rusticata-macros",
+]
+
 [[package]]
 name = "deranged"
 version = "0.5.4"
@@ -2962,6 +3026,15 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
 
+[[package]]
+name = "foreign-types"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
+dependencies = [
+ "foreign-types-shared 0.1.1",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -2969,7 +3042,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
 dependencies = [
  "foreign-types-macros",
- "foreign-types-shared",
+ "foreign-types-shared 0.3.1",
 ]
 
 [[package]]
@@ -2983,6 +3056,12 @@ dependencies = [
  "syn 2.0.106",
 ]
 
+[[package]]
+name = "foreign-types-shared"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
+
 [[package]]
 name = "foreign-types-shared"
 version = "0.3.1"
@@ -4673,6 +4752,7 @@ dependencies = [
  "urlencoding",
  "uuid 1.18.1",
  "validator",
+ "webauthn-rs",
  "webp",
  "woothee",
  "yaserde",
@@ -5816,6 +5896,15 @@ dependencies = [
  "memchr",
 ]
 
+[[package]]
+name = "oid-registry"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8d8034d9489cdaf79228eb9f6a3b8d7bb32ba00d6645ebd48eef4077ceb5bd9"
+dependencies = [
+ "asn1-rs",
+]
+
 [[package]]
 name = "once_cell"
 version = "1.21.3"
@@ -5844,12 +5933,50 @@ dependencies = [
  "pathdiff",
 ]
 
+[[package]]
+name = "openssl"
+version = "0.10.74"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24ad14dd45412269e1a30f52ad8f0664f0f4f4a89ee8fe28c3b3527021ebb654"
+dependencies = [
+ "bitflags 2.9.4",
+ "cfg-if",
+ "foreign-types 0.3.2",
+ "libc",
+ "once_cell",
+ "openssl-macros",
+ "openssl-sys",
+]
+
+[[package]]
+name = "openssl-macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "openssl-probe"
 version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d05e27ee213611ffe7d6348b942e8f942b37114c00cc03cec254295a4a17852e"
 
+[[package]]
+name = "openssl-sys"
+version = "0.9.110"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0a9f0075ba3c21b09f8e8b2026584b1d18d49388648f2fbbf3c97ea8deced8e2"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "option-ext"
 version = "0.2.0"
@@ -5997,6 +6124,12 @@ version = "1.0.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "57c0d7b74b563b49d38dae00a0c37d4d6de9b432382b2892f0574ddcae73fd0a"
 
+[[package]]
+name = "pastey"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "35fb2e5f958ec131621fdd531e9fc186ed768cbe395337403ae56c17a74c68ec"
+
 [[package]]
 name = "path-util"
 version = "0.0.0"
@@ -7403,6 +7536,15 @@ dependencies = [
  "semver",
 ]
 
+[[package]]
+name = "rusticata-macros"
+version = "4.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "faf0c4a6ece9950b9abdb62b1cfcf2a68b3b67a10ba445b3bb85be2a293d0632"
+dependencies = [
+ "nom 7.1.3",
+]
+
 [[package]]
 name = "rustix"
 version = "0.38.44"
@@ -7941,6 +8083,16 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde_cbor_2"
+version = "0.12.0-dev"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b46d75f449e01f1eddbe9b00f432d616fbbd899b809c837d0fbc380496a0dd55"
+dependencies = [
+ "half 1.8.3",
+ "serde",
+]
+
 [[package]]
 name = "serde_core"
 version = "1.0.228"
@@ -8313,7 +8465,7 @@ dependencies = [
  "bytemuck",
  "cfg_aliases",
  "core-graphics",
- "foreign-types",
+ "foreign-types 0.5.0",
  "js-sys",
  "log",
  "objc2 0.5.2",
@@ -10628,6 +10780,74 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "webauthn-attestation-ca"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "384e43534efe4e8f56c4eb1615a27e24d2ff29281385c843cf9f16ac1077dbdc"
+dependencies = [
+ "base64urlsafedata",
+ "openssl",
+ "openssl-sys",
+ "serde",
+ "tracing",
+ "uuid 1.18.1",
+]
+
+[[package]]
+name = "webauthn-rs"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed1f861a94557baeb0cf711e3e55d623c46b68f4aab7aa932562f785b8b5f1ab"
+dependencies = [
+ "base64urlsafedata",
+ "serde",
+ "tracing",
+ "url",
+ "uuid 1.18.1",
+ "webauthn-rs-core",
+]
+
+[[package]]
+name = "webauthn-rs-core"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "269c210cd5f183aaca860bb5733187d1dd110ebed54640f8fc1aca31a04aa4dc"
+dependencies = [
+ "base64 0.21.7",
+ "base64urlsafedata",
+ "der-parser",
+ "hex",
+ "nom 7.1.3",
+ "openssl",
+ "openssl-sys",
+ "rand 0.8.5",
+ "rand_chacha 0.3.1",
+ "serde",
+ "serde_cbor_2",
+ "serde_json",
+ "thiserror 1.0.69",
+ "tracing",
+ "url",
+ "uuid 1.18.1",
+ "webauthn-attestation-ca",
+ "webauthn-rs-proto",
+ "x509-parser",
+]
+
+[[package]]
+name = "webauthn-rs-proto"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "144dbee9abb4bfad78fd283a2613f0312a0ed5955051b7864cfc98679112ae60"
+dependencies = [
+ "base64 0.21.7",
+ "base64urlsafedata",
+ "serde",
+ "serde_json",
+ "url",
+]
+
 [[package]]
 name = "webkit2gtk"
 version = "2.0.1"
@@ -11432,6 +11652,23 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "x509-parser"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fcbc162f30700d6f3f82a24bf7cc62ffe7caea42c0b2cba8bf7f3ae50cf51f69"
+dependencies = [
+ "asn1-rs",
+ "data-encoding",
+ "der-parser",
+ "lazy_static",
+ "nom 7.1.3",
+ "oid-registry",
+ "rusticata-macros",
+ "thiserror 1.0.69",
+ "time",
+]
+
 [[package]]
 name = "xattr"
 version = "1.6.1"
diff --git a/Cargo.toml b/Cargo.toml
index 11de214419..d0d22a63f3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -187,6 +187,7 @@ url = "2.5.7"
 urlencoding = "2.1.3"
 uuid = "1.18.1"
 validator = "0.20.0"
+webauthn-rs = { version = "0.5.2", features = ["danger-allow-state-serialisation"] }
 webp = { version = "0.3.1", default-features = false }
 webview2-com = "0.38.0"  # Should be updated in lockstep with wry
 whoami = "1.6.1"
diff --git a/apps/docs/public/openapi.yaml b/apps/docs/public/openapi.yaml
index 3a4376f15c..86dc704698 100644
--- a/apps/docs/public/openapi.yaml
+++ b/apps/docs/public/openapi.yaml
@@ -1290,6 +1290,10 @@ components:
               type: boolean
               description: Whether you have TOTP two-factor authentication connected to your account (only displayed if requesting your own account)
               nullable: true
+            has_webauthn:
+              type: boolean
+              description: Whether you have Webauthn authentication connected to your account (only displayed if requesting your own account)
+              nullable: true
             github_id:
               deprecated: true
               type: integer
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index e33d5c3807..bdca0e63ca 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -1,425 +1,524 @@
 <template>
-	<div>
-		<ConfirmModal
-			ref="modal_confirm"
-			title="Are you sure you want to delete your account?"
-			description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.modrinth.com)."
-			proceed-label="Delete this account"
-			:confirmation-text="auth.user.username"
-			:has-to-type="true"
-			@proceed="deleteAccount"
-		/>
-		<Modal ref="changeEmailModal" :header="`${auth.user.email ? 'Change' : 'Add'} email`">
-			<div class="universal-modal">
-				<p>Your account information is not displayed publicly.</p>
-				<label for="email-input"><span class="label__title">Email address</span> </label>
-				<input
-					id="email-input"
-					v-model="email"
-					maxlength="2048"
-					type="email"
-					:placeholder="`Enter your email address...`"
-					@keyup.enter="saveEmail()"
-				/>
-				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.changeEmailModal.hide()">
-						<XIcon />
-						Cancel
-					</button>
-					<button
-						type="button"
-						class="iconified-button brand-button"
-						:disabled="!email"
-						@click="saveEmail()"
-					>
-						<SaveIcon />
-						Save email
-					</button>
-				</div>
-			</div>
-		</Modal>
-		<Modal
-			ref="managePasswordModal"
-			:header="`${
-				removePasswordMode ? 'Remove' : auth.user.has_password ? 'Change' : 'Add'
-			} password`"
-		>
-			<div class="universal-modal">
-				<ul
-					v-if="newPassword !== confirmNewPassword && confirmNewPassword.length > 0"
-					class="known-errors"
-				>
-					<li>Input passwords do not match!</li>
-				</ul>
-				<label v-if="removePasswordMode" for="old-password">
-					<span class="label__title">Confirm password</span>
-					<span class="label__description">Please enter your password to proceed.</span>
-				</label>
-				<label v-else-if="auth.user.has_password" for="old-password">
-					<span class="label__title">Old password</span>
-				</label>
-				<input
-					v-if="auth.user.has_password"
-					id="old-password"
-					v-model="oldPassword"
-					maxlength="2048"
-					type="password"
-					autocomplete="current-password"
-					:placeholder="`${removePasswordMode ? 'Confirm' : 'Old'} password`"
-				/>
-				<template v-if="!removePasswordMode">
-					<label for="new-password"><span class="label__title">New password</span></label>
-					<input
-						id="new-password"
-						v-model="newPassword"
-						maxlength="2048"
-						type="password"
-						autocomplete="new-password"
-						placeholder="New password"
-					/>
-					<label for="confirm-new-password"
-						><span class="label__title">Confirm new password</span></label
-					>
-					<input
-						id="confirm-new-password"
-						v-model="confirmNewPassword"
-						maxlength="2048"
-						type="password"
-						autocomplete="new-password"
-						placeholder="Confirm new password"
-					/>
-				</template>
-				<p></p>
-				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.managePasswordModal.hide()">
-						<XIcon />
-						Cancel
-					</button>
-					<template v-if="removePasswordMode">
-						<button
-							type="button"
-							class="iconified-button danger-button"
-							:disabled="!oldPassword"
-							@click="savePassword"
-						>
-							<TrashIcon />
-							Remove password
-						</button>
-					</template>
-					<template v-else>
-						<button
-							v-if="auth.user.has_password && auth.user.auth_providers.length > 0"
-							type="button"
-							class="iconified-button danger-button"
-							@click="removePasswordMode = true"
-						>
-							<TrashIcon />
-							Remove password
-						</button>
-						<button
-							type="button"
-							class="iconified-button brand-button"
-							:disabled="
-								newPassword.length == 0 ||
-								(auth.user.has_password && oldPassword.length == 0) ||
-								newPassword !== confirmNewPassword
-							"
-							@click="savePassword"
-						>
-							<SaveIcon />
-							Save password
-						</button>
-					</template>
-				</div>
-			</div>
-		</Modal>
-		<Modal
-			ref="manageTwoFactorModal"
-			:header="`${
-				auth.user.has_totp && twoFactorStep === 0 ? 'Remove' : 'Setup'
-			} two-factor authentication`"
-		>
-			<div class="universal-modal">
-				<template v-if="auth.user.has_totp && twoFactorStep === 0">
-					<label for="two-factor-code">
-						<span class="label__title">Enter two-factor code</span>
-						<span class="label__description">Please enter a two-factor code to proceed.</span>
-					</label>
-					<input
-						id="two-factor-code"
-						v-model="twoFactorCode"
-						maxlength="11"
-						type="text"
-						placeholder="Enter code..."
-						@keyup.enter="removeTwoFactor()"
-					/>
-					<p v-if="twoFactorIncorrect" class="known-errors">The code entered is incorrect!</p>
-					<div class="input-group push-right">
-						<button class="iconified-button" @click="$refs.manageTwoFactorModal.hide()">
-							<XIcon />
-							Cancel
-						</button>
-						<button class="iconified-button danger-button" @click="removeTwoFactor">
-							<TrashIcon />
-							Remove 2FA
-						</button>
-					</div>
-				</template>
-				<template v-else>
-					<template v-if="twoFactorStep === 0">
-						<p>
-							Two-factor authentication keeps your account secure by requiring access to a second
-							device in order to sign in.
-							<br /><br />
-							Scan the QR code with <a href="https://authy.com/">Authy</a>,
-							<a href="https://www.microsoft.com/en-us/security/mobile-authenticator-app">
-								Microsoft Authenticator</a
-							>, or any other 2FA app to begin.
-						</p>
-						<qrcode-vue
-							v-if="twoFactorSecret"
-							:value="`otpauth://totp/${encodeURIComponent(
-								auth.user.email,
-							)}?secret=${twoFactorSecret}&issuer=Modrinth`"
-							:size="250"
-							:margin="2"
-							level="H"
-						/>
-						<p>
-							If the QR code does not scan, you can manually enter the secret:
-							<strong>{{ twoFactorSecret }}</strong>
-						</p>
-					</template>
-					<template v-if="twoFactorStep === 1">
-						<label for="verify-code">
-							<span class="label__title">Verify code</span>
-							<span class="label__description"
-								>Enter the one-time code from authenticator to verify access.
-							</span>
-						</label>
-						<input
-							id="verify-code"
-							v-model="twoFactorCode"
-							maxlength="6"
-							type="text"
-							autocomplete="one-time-code"
-							placeholder="Enter code..."
-							@keyup.enter="verifyTwoFactorCode()"
-						/>
-						<p v-if="twoFactorIncorrect" class="known-errors">The code entered is incorrect!</p>
-					</template>
-					<template v-if="twoFactorStep === 2">
-						<p>
-							Download and save these back-up codes in a safe place. You can use these in-place of a
-							2FA code if you ever lose access to your device! You should protect these codes like
-							your password.
-						</p>
-						<p>Backup codes can only be used once.</p>
-						<ul>
-							<li v-for="code in backupCodes" :key="code">{{ code }}</li>
-						</ul>
-					</template>
-					<div class="input-group push-right">
-						<button v-if="twoFactorStep === 1" class="iconified-button" @click="twoFactorStep = 0">
-							<LeftArrowIcon />
-							Back
-						</button>
-						<button
-							v-if="twoFactorStep !== 2"
-							class="iconified-button"
-							@click="$refs.manageTwoFactorModal.hide()"
-						>
-							<XIcon />
-							Cancel
-						</button>
-						<button
-							v-if="twoFactorStep <= 1"
-							class="iconified-button brand-button"
-							@click="twoFactorStep === 1 ? verifyTwoFactorCode() : (twoFactorStep = 1)"
-						>
-							<RightArrowIcon />
-							Continue
-						</button>
-						<button
-							v-if="twoFactorStep === 2"
-							class="iconified-button brand-button"
-							@click="$refs.manageTwoFactorModal.hide()"
-						>
-							<CheckIcon />
-							Complete setup
-						</button>
-					</div>
-				</template>
-			</div>
-		</Modal>
-		<Modal ref="manageProvidersModal" header="Authentication providers">
-			<div class="universal-modal">
-				<div class="table">
-					<div class="table-head table-row">
-						<div class="table-text table-cell">Provider</div>
-						<div class="table-text table-cell">Actions</div>
-					</div>
-					<div v-for="provider in authProviders" :key="provider.id" class="table-row">
-						<div class="table-text table-cell">
-							<span><component :is="provider.icon" /> {{ provider.display }}</span>
-						</div>
-						<div class="table-text manage table-cell">
-							<button
-								v-if="auth.user.auth_providers.includes(provider.id)"
-								class="btn"
-								@click="handleRemoveAuthProvider(provider.id)"
-							>
-								<TrashIcon /> Remove
-							</button>
-							<a
-								v-else
-								class="btn"
-								:href="`${getAuthUrl(provider.id, '/settings/account')}&token=${auth.token}`"
-							>
-								<ExternalIcon /> Add
-							</a>
-						</div>
-					</div>
-				</div>
-				<p></p>
-				<div class="input-group push-right">
-					<button class="iconified-button" @click="$refs.manageProvidersModal.hide()">
-						<XIcon />
-						Close
-					</button>
-				</div>
-			</div>
-		</Modal>
-		<section class="universal-card">
-			<h2 class="text-2xl">Account security</h2>
-
-			<div class="adjacent-input">
-				<label for="theme-selector">
-					<span class="label__title">Email</span>
-					<span class="label__description">Changes the email associated with your account.</span>
-				</label>
-				<div>
-					<button class="iconified-button" @click="$refs.changeEmailModal.show()">
-						<template v-if="auth.user.email">
-							<EditIcon />
-							Change email
-						</template>
-						<template v-else>
-							<PlusIcon />
-							Add email
-						</template>
-					</button>
-				</div>
-			</div>
-			<div class="adjacent-input">
-				<label for="theme-selector">
-					<span class="label__title">Password</span>
-					<span v-if="auth.user.has_password" class="label__description">
-						Change
-						<template v-if="auth.user.auth_providers.length > 0">or remove</template>
-						the password used to login to your account.
-					</span>
-					<span v-else class="label__description">
-						Set a permanent password to login to your account.
-					</span>
-				</label>
-				<div>
-					<button
-						class="iconified-button"
-						@click="
-							() => {
-								oldPassword = ''
-								newPassword = ''
-								confirmNewPassword = ''
-								removePasswordMode = false
-								$refs.managePasswordModal.show()
-							}
-						"
-					>
-						<KeyIcon />
-						<template v-if="auth.user.has_password"> Change password </template>
-						<template v-else> Add password </template>
-					</button>
-				</div>
-			</div>
-			<div class="adjacent-input">
-				<label for="theme-selector">
-					<span class="label__title">Two-factor authentication</span>
-					<span class="label__description">
-						Add an additional layer of security to your account during login.
-					</span>
-				</label>
-				<div>
-					<button class="iconified-button" @click="showTwoFactorModal">
-						<template v-if="auth.user.has_totp"> <TrashIcon /> Remove 2FA </template>
-						<template v-else> <PlusIcon /> Setup 2FA </template>
-					</button>
-				</div>
-			</div>
-			<div class="adjacent-input">
-				<label for="theme-selector">
-					<span class="label__title">Manage authentication providers</span>
-					<span class="label__description">
-						Add or remove sign-on methods from your account, including GitHub, GitLab, Microsoft,
-						Discord, Steam, and Google.
-					</span>
-				</label>
-				<div>
-					<button class="iconified-button" @click="$refs.manageProvidersModal.show()">
-						<SettingsIcon /> Manage providers
-					</button>
-				</div>
-			</div>
-		</section>
-
-		<section id="data-export" class="universal-card">
-			<h2>Data export</h2>
-			<p>
-				Request a copy of all your personal data you have uploaded to Modrinth. This may take
-				several minutes to complete.
-			</p>
-			<a v-if="generated" class="iconified-button" :href="generated" download="export.json">
-				<DownloadIcon />
-				Download export
-			</a>
-			<button v-else class="iconified-button" :disabled="generatingExport" @click="exportData">
-				<template v-if="generatingExport"> <UpdatedIcon /> Generating export... </template>
-				<template v-else> <UpdatedIcon /> Generate export </template>
-			</button>
-		</section>
-
-		<section id="delete-account" class="universal-card">
-			<h2>Delete account</h2>
-			<p>
-				Once you delete your account, there is no going back. Deleting your account will remove all
-				attached data, excluding projects, from our servers.
-			</p>
-			<button
-				type="button"
-				class="iconified-button danger-button"
-				@click="$refs.modal_confirm.show()"
-			>
-				<TrashIcon />
-				Delete account
-			</button>
-		</section>
-	</div>
+  <div>
+    <ConfirmModal
+      ref="modal_confirm"
+      title="Are you sure you want to delete your account?"
+      description="This will **immediately delete all of your user data and follows**. This will not delete your projects. Deleting your account cannot be reversed.<br><br>If you need help with your account, get support on the [Modrinth Discord](https://discord.modrinth.com)."
+      proceed-label="Delete this account"
+      :confirmation-text="auth.user.username"
+      :has-to-type="true"
+      @proceed="deleteAccount"
+    />
+    <Modal
+      ref="changeEmailModal"
+      :header="`${auth.user.email ? 'Change' : 'Add'} email`"
+    >
+      <div class="universal-modal">
+        <p>Your account information is not displayed publicly.</p>
+        <label for="email-input"
+          ><span class="label__title">Email address</span>
+        </label>
+        <input
+          id="email-input"
+          v-model="email"
+          maxlength="2048"
+          type="email"
+          :placeholder="`Enter your email address...`"
+          @keyup.enter="saveEmail()"
+        />
+        <div class="input-group push-right">
+          <button
+            class="iconified-button"
+            @click="$refs.changeEmailModal.hide()"
+          >
+            <XIcon />
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="iconified-button brand-button"
+            :disabled="!email"
+            @click="saveEmail()"
+          >
+            <SaveIcon />
+            Save email
+          </button>
+        </div>
+      </div>
+    </Modal>
+    <Modal
+      ref="managePasswordModal"
+      :header="`${
+        removePasswordMode
+          ? 'Remove'
+          : auth.user.has_password
+            ? 'Change'
+            : 'Add'
+      } password`"
+    >
+      <div class="universal-modal">
+        <ul
+          v-if="
+            newPassword !== confirmNewPassword && confirmNewPassword.length > 0
+          "
+          class="known-errors"
+        >
+          <li>Input passwords do not match!</li>
+        </ul>
+        <label v-if="removePasswordMode" for="old-password">
+          <span class="label__title">Confirm password</span>
+          <span class="label__description"
+            >Please enter your password to proceed.</span
+          >
+        </label>
+        <label v-else-if="auth.user.has_password" for="old-password">
+          <span class="label__title">Old password</span>
+        </label>
+        <input
+          v-if="auth.user.has_password"
+          id="old-password"
+          v-model="oldPassword"
+          maxlength="2048"
+          type="password"
+          autocomplete="current-password"
+          :placeholder="`${removePasswordMode ? 'Confirm' : 'Old'} password`"
+        />
+        <template v-if="!removePasswordMode">
+          <label for="new-password"
+            ><span class="label__title">New password</span></label
+          >
+          <input
+            id="new-password"
+            v-model="newPassword"
+            maxlength="2048"
+            type="password"
+            autocomplete="new-password"
+            placeholder="New password"
+          />
+          <label for="confirm-new-password"
+            ><span class="label__title">Confirm new password</span></label
+          >
+          <input
+            id="confirm-new-password"
+            v-model="confirmNewPassword"
+            maxlength="2048"
+            type="password"
+            autocomplete="new-password"
+            placeholder="Confirm new password"
+          />
+        </template>
+        <p></p>
+        <div class="input-group push-right">
+          <button
+            class="iconified-button"
+            @click="$refs.managePasswordModal.hide()"
+          >
+            <XIcon />
+            Cancel
+          </button>
+          <template v-if="removePasswordMode">
+            <button
+              type="button"
+              class="iconified-button danger-button"
+              :disabled="!oldPassword"
+              @click="savePassword"
+            >
+              <TrashIcon />
+              Remove password
+            </button>
+          </template>
+          <template v-else>
+            <button
+              v-if="
+                auth.user.has_password && auth.user.auth_providers.length > 0
+              "
+              type="button"
+              class="iconified-button danger-button"
+              @click="removePasswordMode = true"
+            >
+              <TrashIcon />
+              Remove password
+            </button>
+            <button
+              type="button"
+              class="iconified-button brand-button"
+              :disabled="
+                newPassword.length == 0 ||
+                (auth.user.has_password && oldPassword.length == 0) ||
+                newPassword !== confirmNewPassword
+              "
+              @click="savePassword"
+            >
+              <SaveIcon />
+              Save password
+            </button>
+          </template>
+        </div>
+      </div>
+    </Modal>
+    <Modal
+      ref="manageTwoFactorModal"
+      :header="`${
+        auth.user.has_totp && twoFactorStep === 0 ? 'Remove' : 'Setup'
+      } two-factor authentication`"
+    >
+      <div class="universal-modal">
+        <template v-if="auth.user.has_totp && twoFactorStep === 0">
+          <label for="two-factor-code">
+            <span class="label__title">Enter two-factor code</span>
+            <span class="label__description"
+              >Please enter a two-factor code to proceed.</span
+            >
+          </label>
+          <input
+            id="two-factor-code"
+            v-model="twoFactorCode"
+            maxlength="11"
+            type="text"
+            placeholder="Enter code..."
+            @keyup.enter="removeTwoFactor()"
+          />
+          <p v-if="twoFactorIncorrect" class="known-errors">
+            The code entered is incorrect!
+          </p>
+          <div class="input-group push-right">
+            <button
+              class="iconified-button"
+              @click="$refs.manageTwoFactorModal.hide()"
+            >
+              <XIcon />
+              Cancel
+            </button>
+            <button
+              class="iconified-button danger-button"
+              @click="removeTwoFactor"
+            >
+              <TrashIcon />
+              Remove 2FA
+            </button>
+          </div>
+        </template>
+        <template v-else>
+          <template v-if="twoFactorStep === 0">
+            <p>
+              Two-factor authentication keeps your account secure by requiring
+              access to a second device in order to sign in.
+              <br /><br />
+              Scan the QR code with <a href="https://authy.com/">Authy</a>,
+              <a
+                href="https://www.microsoft.com/en-us/security/mobile-authenticator-app"
+              >
+                Microsoft Authenticator</a
+              >, or any other 2FA app to begin.
+            </p>
+            <qrcode-vue
+              v-if="twoFactorSecret"
+              :value="`otpauth://totp/${encodeURIComponent(
+                auth.user.email,
+              )}?secret=${twoFactorSecret}&issuer=Modrinth`"
+              :size="250"
+              :margin="2"
+              level="H"
+            />
+            <p>
+              If the QR code does not scan, you can manually enter the secret:
+              <strong>{{ twoFactorSecret }}</strong>
+            </p>
+          </template>
+          <template v-if="twoFactorStep === 1">
+            <label for="verify-code">
+              <span class="label__title">Verify code</span>
+              <span class="label__description"
+                >Enter the one-time code from authenticator to verify access.
+              </span>
+            </label>
+            <input
+              id="verify-code"
+              v-model="twoFactorCode"
+              maxlength="6"
+              type="text"
+              autocomplete="one-time-code"
+              placeholder="Enter code..."
+              @keyup.enter="verifyTwoFactorCode()"
+            />
+            <p v-if="twoFactorIncorrect" class="known-errors">
+              The code entered is incorrect!
+            </p>
+          </template>
+          <template v-if="twoFactorStep === 2">
+            <p>
+              Download and save these back-up codes in a safe place. You can use
+              these in-place of a 2FA code if you ever lose access to your
+              device! You should protect these codes like your password.
+            </p>
+            <p>Backup codes can only be used once.</p>
+            <ul>
+              <li v-for="code in backupCodes" :key="code">{{ code }}</li>
+            </ul>
+          </template>
+          <div class="input-group push-right">
+            <button
+              v-if="twoFactorStep === 1"
+              class="iconified-button"
+              @click="twoFactorStep = 0"
+            >
+              <LeftArrowIcon />
+              Back
+            </button>
+            <button
+              v-if="twoFactorStep !== 2"
+              class="iconified-button"
+              @click="$refs.manageTwoFactorModal.hide()"
+            >
+              <XIcon />
+              Cancel
+            </button>
+            <button
+              v-if="twoFactorStep <= 1"
+              class="iconified-button brand-button"
+              @click="
+                twoFactorStep === 1
+                  ? verifyTwoFactorCode()
+                  : (twoFactorStep = 1)
+              "
+            >
+              <RightArrowIcon />
+              Continue
+            </button>
+            <button
+              v-if="twoFactorStep === 2"
+              class="iconified-button brand-button"
+              @click="$refs.manageTwoFactorModal.hide()"
+            >
+              <CheckIcon />
+              Complete setup
+            </button>
+          </div>
+        </template>
+      </div>
+    </Modal>
+    <Modal ref="manageProvidersModal" header="Authentication providers">
+      <div class="universal-modal">
+        <div class="table">
+          <div class="table-head table-row">
+            <div class="table-text table-cell">Provider</div>
+            <div class="table-text table-cell">Actions</div>
+          </div>
+          <div
+            v-for="provider in authProviders"
+            :key="provider.id"
+            class="table-row"
+          >
+            <div class="table-text table-cell">
+              <span
+                ><component :is="provider.icon" /> {{ provider.display }}</span
+              >
+            </div>
+            <div class="table-text manage table-cell">
+              <button
+                v-if="auth.user.auth_providers.includes(provider.id)"
+                class="btn"
+                @click="handleRemoveAuthProvider(provider.id)"
+              >
+                <TrashIcon /> Remove
+              </button>
+              <a
+                v-else
+                class="btn"
+                :href="`${getAuthUrl(provider.id, '/settings/account')}&token=${auth.token}`"
+              >
+                <ExternalIcon /> Add
+              </a>
+            </div>
+          </div>
+        </div>
+        <p></p>
+        <div class="input-group push-right">
+          <button
+            class="iconified-button"
+            @click="$refs.manageProvidersModal.hide()"
+          >
+            <XIcon />
+            Close
+          </button>
+        </div>
+      </div>
+    </Modal>
+    <section class="universal-card">
+      <h2 class="text-2xl">Account security</h2>
+
+      <div class="adjacent-input">
+        <label for="theme-selector">
+          <span class="label__title">Email</span>
+          <span class="label__description"
+            >Changes the email associated with your account.</span
+          >
+        </label>
+        <div>
+          <button
+            class="iconified-button"
+            @click="$refs.changeEmailModal.show()"
+          >
+            <template v-if="auth.user.email">
+              <EditIcon />
+              Change email
+            </template>
+            <template v-else>
+              <PlusIcon />
+              Add email
+            </template>
+          </button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <label for="theme-selector">
+          <span class="label__title">Password</span>
+          <span v-if="auth.user.has_password" class="label__description">
+            Change
+            <template v-if="auth.user.auth_providers.length > 0"
+              >or remove</template
+            >
+            the password used to login to your account.
+          </span>
+          <span v-else class="label__description">
+            Set a permanent password to login to your account.
+          </span>
+        </label>
+        <div>
+          <button
+            class="iconified-button"
+            @click="
+              () => {
+                oldPassword = ''
+                newPassword = ''
+                confirmNewPassword = ''
+                removePasswordMode = false
+                $refs.managePasswordModal.show()
+              }
+            "
+          >
+            <KeyIcon />
+            <template v-if="auth.user.has_password"> Change password </template>
+            <template v-else> Add password </template>
+          </button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <label for="theme-selector">
+          <span class="label__title">Two-factor authentication</span>
+          <span class="label__description">
+            Add an additional layer of security to your account during login.
+          </span>
+        </label>
+        <div>
+          <button class="iconified-button" @click="showTwoFactorModal">
+            <template v-if="auth.user.has_totp">
+              <TrashIcon /> Remove 2FA
+            </template>
+            <template v-else> <PlusIcon /> Setup 2FA </template>
+          </button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <label for="theme-selector">
+          <span class="label__title">Hardware security key</span>
+          <span class="label__description">
+            Add an additional and more secure method of security to your account
+            during login.
+          </span>
+        </label>
+        <div>
+          <button class="iconified-button" @click="showWebauthnModal">
+            <template v-if="auth.user.has_webauthn">
+              <TrashIcon /> Remove Hardware Security Key
+            </template>
+            <template v-else>
+              <SecurityKeyIcon /> Setup Hardware Security Key
+            </template>
+          </button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <label for="theme-selector">
+          <span class="label__title">Manage authentication providers</span>
+          <span class="label__description">
+            Add or remove sign-on methods from your account, including GitHub,
+            GitLab, Microsoft, Discord, Steam, and Google.
+          </span>
+        </label>
+        <div>
+          <button
+            class="iconified-button"
+            @click="$refs.manageProvidersModal.show()"
+          >
+            <SettingsIcon /> Manage providers
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <section id="data-export" class="universal-card">
+      <h2>Data export</h2>
+      <p>
+        Request a copy of all your personal data you have uploaded to Modrinth.
+        This may take several minutes to complete.
+      </p>
+      <a
+        v-if="generated"
+        class="iconified-button"
+        :href="generated"
+        download="export.json"
+      >
+        <DownloadIcon />
+        Download export
+      </a>
+      <button
+        v-else
+        class="iconified-button"
+        :disabled="generatingExport"
+        @click="exportData"
+      >
+        <template v-if="generatingExport">
+          <UpdatedIcon /> Generating export...
+        </template>
+        <template v-else> <UpdatedIcon /> Generate export </template>
+      </button>
+    </section>
+
+    <section id="delete-account" class="universal-card">
+      <h2>Delete account</h2>
+      <p>
+        Once you delete your account, there is no going back. Deleting your
+        account will remove all attached data, excluding projects, from our
+        servers.
+      </p>
+      <button
+        type="button"
+        class="iconified-button danger-button"
+        @click="$refs.modal_confirm.show()"
+      >
+        <TrashIcon />
+        Delete account
+      </button>
+    </section>
+  </div>
 </template>
 
 <script setup>
 import {
-	CheckIcon,
-	DownloadIcon,
-	EditIcon,
-	ExternalIcon,
-	LeftArrowIcon,
-	PlusIcon,
-	RightArrowIcon,
-	SaveIcon,
-	SettingsIcon,
-	TrashIcon,
-	UpdatedIcon,
-	XIcon,
+  CheckIcon,
+  DownloadIcon,
+  EditIcon,
+  ExternalIcon,
+  LeftArrowIcon,
+  PlusIcon,
+  RightArrowIcon,
+  SaveIcon,
+  SecurityKeyIcon,
+  SettingsIcon,
+  TrashIcon,
+  UpdatedIcon,
+  XIcon,
 } from '@modrinth/assets'
 import { ConfirmModal, injectNotificationManager } from '@modrinth/ui'
 import KeyIcon from 'assets/icons/auth/key.svg'
@@ -435,11 +534,11 @@ import Modal from '~/components/ui/Modal.vue'
 import { getAuthUrl, removeAuthProvider } from '~/composables/auth.js'
 
 useHead({
-	title: 'Account settings - Modrinth',
+  title: 'Account settings - Modrinth',
 })
 
 definePageMeta({
-	middleware: 'auth',
+  middleware: 'auth',
 })
 
 const { addNotification } = injectNotificationManager()
@@ -448,36 +547,36 @@ const auth = await useAuth()
 const changeEmailModal = ref()
 const email = ref(auth.value.user.email)
 async function saveEmail() {
-	if (!email.value) {
-		return
-	}
-
-	startLoading()
-	try {
-		await useBaseFetch(`auth/email`, {
-			method: 'PATCH',
-			body: {
-				email: email.value,
-			},
-		})
-		changeEmailModal.value.hide()
-		await useAuth(auth.value.token)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
+  if (!email.value) {
+    return
+  }
+
+  startLoading()
+  try {
+    await useBaseFetch(`auth/email`, {
+      method: 'PATCH',
+      body: {
+        email: email.value,
+      },
+    })
+    changeEmailModal.value.hide()
+    await useAuth(auth.value.token)
+  } catch (err) {
+    addNotification({
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+  stopLoading()
 }
 
 async function handleRemoveAuthProvider(provider) {
-	try {
-		await removeAuthProvider(provider)
-	} catch (error) {
-		handleError(error)
-	}
+  try {
+    await removeAuthProvider(provider)
+  } catch (error) {
+    handleError(error)
+  }
 }
 
 const managePasswordModal = ref()
@@ -486,29 +585,29 @@ const oldPassword = ref('')
 const newPassword = ref('')
 const confirmNewPassword = ref('')
 async function savePassword() {
-	if (newPassword.value !== confirmNewPassword.value) {
-		return
-	}
-
-	startLoading()
-	try {
-		await useBaseFetch(`auth/password`, {
-			method: 'PATCH',
-			body: {
-				old_password: auth.value.user.has_password ? oldPassword.value : null,
-				new_password: removePasswordMode.value ? null : newPassword.value,
-			},
-		})
-		managePasswordModal.value.hide()
-		await useAuth(auth.value.token)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
+  if (newPassword.value !== confirmNewPassword.value) {
+    return
+  }
+
+  startLoading()
+  try {
+    await useBaseFetch(`auth/password`, {
+      method: 'PATCH',
+      body: {
+        old_password: auth.value.user.has_password ? oldPassword.value : null,
+        new_password: removePasswordMode.value ? null : newPassword.value,
+      },
+    })
+    managePasswordModal.value.hide()
+    await useAuth(auth.value.token)
+  } catch (err) {
+    addNotification({
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+  stopLoading()
 }
 
 const manageTwoFactorModal = ref()
@@ -516,176 +615,255 @@ const twoFactorSecret = ref(null)
 const twoFactorFlow = ref(null)
 const twoFactorStep = ref(0)
 async function showTwoFactorModal() {
-	twoFactorStep.value = 0
-	twoFactorCode.value = null
-	twoFactorIncorrect.value = false
-	if (auth.value.user.has_totp) {
-		manageTwoFactorModal.value.show()
-		return
-	}
-
-	twoFactorSecret.value = null
-	twoFactorFlow.value = null
-	backupCodes.value = []
-	manageTwoFactorModal.value.show()
-
-	startLoading()
-	try {
-		const res = await useBaseFetch('auth/2fa/get_secret', {
-			method: 'POST',
-		})
-
-		twoFactorSecret.value = res.secret
-		twoFactorFlow.value = res.flow
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-	stopLoading()
+  twoFactorStep.value = 0
+  twoFactorCode.value = null
+  twoFactorIncorrect.value = false
+  if (auth.value.user.has_totp) {
+    manageTwoFactorModal.value.show()
+    return
+  }
+
+  twoFactorSecret.value = null
+  twoFactorFlow.value = null
+  backupCodes.value = []
+  manageTwoFactorModal.value.show()
+
+  startLoading()
+  try {
+    const res = await useBaseFetch('auth/2fa/get_secret', {
+      method: 'POST',
+    })
+
+    twoFactorSecret.value = res.secret
+    twoFactorFlow.value = res.flow
+  } catch (err) {
+    addNotification({
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+  stopLoading()
 }
 
 const twoFactorIncorrect = ref(false)
 const twoFactorCode = ref(null)
 const backupCodes = ref([])
 async function verifyTwoFactorCode() {
-	startLoading()
-	try {
-		const res = await useBaseFetch('auth/2fa', {
-			method: 'POST',
-			body: {
-				code: twoFactorCode.value ? twoFactorCode.value : '',
-				flow: twoFactorFlow.value,
-			},
-		})
-
-		backupCodes.value = res.backup_codes
-		twoFactorStep.value = 2
-		await useAuth(auth.value.token)
-	} catch {
-		twoFactorIncorrect.value = true
-	}
-	stopLoading()
+  startLoading()
+  try {
+    const res = await useBaseFetch('auth/2fa', {
+      method: 'POST',
+      body: {
+        code: twoFactorCode.value ? twoFactorCode.value : '',
+        flow: twoFactorFlow.value,
+      },
+    })
+
+    backupCodes.value = res.backup_codes
+    twoFactorStep.value = 2
+    await useAuth(auth.value.token)
+  } catch {
+    twoFactorIncorrect.value = true
+  }
+  stopLoading()
 }
 
 async function removeTwoFactor() {
-	startLoading()
-	try {
-		await useBaseFetch('auth/2fa', {
-			method: 'DELETE',
-			body: {
-				code: twoFactorCode.value ? twoFactorCode.value.toString() : '',
-			},
-		})
-		manageTwoFactorModal.value.hide()
-		await useAuth(auth.value.token)
-	} catch {
-		twoFactorIncorrect.value = true
-	}
-	stopLoading()
+  startLoading()
+  try {
+    await useBaseFetch('auth/2fa', {
+      method: 'DELETE',
+      body: {
+        code: twoFactorCode.value ? twoFactorCode.value.toString() : '',
+      },
+    })
+    manageTwoFactorModal.value.hide()
+    await useAuth(auth.value.token)
+  } catch {
+    twoFactorIncorrect.value = true
+  }
+  stopLoading()
+}
+
+const mangeWebauthnModal = ref()
+async function showWebauthnModal() {
+  console.log(auth.value.user) // TODO
+
+  if (auth.value.user.has_webauthn) { // TODO - This is never true for some reason
+    mangeWebauthnModal.value.show()
+    return
+  }
+
+  startLoading()
+  try {
+    const res = await useBaseFetch(
+      `auth/webauthn/register/start/${auth.value.user.username}`,
+      {
+        method: 'POST',
+        internal: true,
+      },
+    )
+
+    const publicKey = res.challenge.publicKey
+    publicKey.challenge = b64urlToUint8Array(publicKey.challenge)
+    publicKey.user.id = b64urlToUint8Array(publicKey.user.id)
+
+    const credential = await navigator.credentials.create({ publicKey })
+
+    console.log('Created webauthn credential', credential) // TODO
+
+    const jsonCredential = {
+      id: credential.id,
+      rawId: uint8ArrayToB64url(credential.rawId),
+      type: credential.type,
+      response: {
+        clientDataJSON: uint8ArrayToB64url(credential.response.clientDataJSON),
+        attestationObject: uint8ArrayToB64url(
+          credential.response.attestationObject,
+        ),
+      },
+    }
+
+    let res2 = await useBaseFetch('auth/webauthn/register/finish', {
+      method: 'POST',
+      internal: true,
+      body: {
+        name: 'My Key', // TODO
+        cred: jsonCredential,
+        flow: res.flow,
+      },
+    })
+
+    mangeWebauthnModal.value.show()
+  } catch (err) {
+    addNotification({
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+  stopLoading()
+}
+
+function b64urlToUint8Array(b64url) {
+  const base64 = b64url
+    .replace(/-/g, '+')
+    .replace(/_/g, '/')
+    .padEnd(b64url.length + ((4 - (b64url.length % 4)) % 4), '=')
+  const binary = atob(base64)
+  return Uint8Array.from(binary, (c) => c.charCodeAt(0))
+}
+
+function uint8ArrayToB64url(buf) {
+  let binary = ''
+  const bytes = new Uint8Array(buf)
+  for (let i = 0; i < bytes.byteLength; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  const base64 = btoa(binary)
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
 }
 
 const authProviders = [
-	{
-		id: 'github',
-		display: 'GitHub',
-		icon: GithubIcon,
-	},
-	{
-		id: 'gitlab',
-		display: 'GitLab',
-		icon: GitLabIcon,
-	},
-	{
-		id: 'steam',
-		display: 'Steam',
-		icon: SteamIcon,
-	},
-	{
-		id: 'discord',
-		display: 'Discord',
-		icon: DiscordIcon,
-	},
-	{
-		id: 'microsoft',
-		display: 'Microsoft',
-		icon: MicrosoftIcon,
-	},
-	{
-		id: 'google',
-		display: 'Google',
-		icon: GoogleIcon,
-	},
+  {
+    id: 'github',
+    display: 'GitHub',
+    icon: GithubIcon,
+  },
+  {
+    id: 'gitlab',
+    display: 'GitLab',
+    icon: GitLabIcon,
+  },
+  {
+    id: 'steam',
+    display: 'Steam',
+    icon: SteamIcon,
+  },
+  {
+    id: 'discord',
+    display: 'Discord',
+    icon: DiscordIcon,
+  },
+  {
+    id: 'microsoft',
+    display: 'Microsoft',
+    icon: MicrosoftIcon,
+  },
+  {
+    id: 'google',
+    display: 'Google',
+    icon: GoogleIcon,
+  },
 ]
 
 async function deleteAccount() {
-	startLoading()
-	try {
-		await useBaseFetch(`user/${auth.value.user.id}`, {
-			method: 'DELETE',
-		})
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-
-	useCookie('auth-token').value = null
-	window.location.href = '/'
-
-	stopLoading()
+  startLoading()
+  try {
+    await useBaseFetch(`user/${auth.value.user.id}`, {
+      method: 'DELETE',
+    })
+  } catch (err) {
+    addNotification({
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+
+  useCookie('auth-token').value = null
+  window.location.href = '/'
+
+  stopLoading()
 }
 
 const generatingExport = ref(false)
 const generated = ref()
 async function exportData() {
-	startLoading()
-	generatingExport.value = true
-	try {
-		const res = await useBaseFetch('gdpr/export', {
-			method: 'POST',
-			internal: true,
-		})
-
-		const jsonString = JSON.stringify(res, null, 2)
-
-		const blob = new Blob([jsonString], { type: 'application/json' })
-		generated.value = URL.createObjectURL(blob)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err.data ? err.data.description : err,
-			type: 'error',
-		})
-	}
-
-	generatingExport.value = false
-	stopLoading()
+  startLoading()
+  generatingExport.value = true
+  try {
+    const res = await useBaseFetch('gdpr/export', {
+      method: 'POST',
+      internal: true,
+    })
+
+    const jsonString = JSON.stringify(res, null, 2)
+
+    const blob = new Blob([jsonString], { type: 'application/json' })
+    generated.value = URL.createObjectURL(blob)
+  } catch (err) {
+    addNotification({
+      title: 'An error occurred',
+      text: err.data ? err.data.description : err,
+      type: 'error',
+    })
+  }
+
+  generatingExport.value = false
+  stopLoading()
 }
 </script>
 <style lang="scss" scoped>
 canvas {
-	margin: 0 auto;
-	border-radius: var(--size-rounded-card);
+  margin: 0 auto;
+  border-radius: var(--size-rounded-card);
 }
 
 .table-row {
-	grid-template-columns: 1fr 10rem;
-
-	span {
-		display: flex;
-		align-items: center;
-		margin: auto 0;
-
-		svg {
-			width: 1.25rem;
-			height: 1.25rem;
-			margin-right: 0.35rem;
-		}
-	}
+  grid-template-columns: 1fr 10rem;
+
+  span {
+    display: flex;
+    align-items: center;
+    margin: auto 0;
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-right: 0.35rem;
+    }
+  }
 }
 </style>
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 09eabae617..c07728c5c4 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -80,25 +80,32 @@
 					<span class="text-lg font-bold text-primary"> Has TOTP </span>
 					<span>
 						{{ user.has_totp ? 'Yes' : 'No' }}
-					</span>
-				</div>
-			</div>
-		</NewModal>
-		<div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
-			<div class="normal-page__header py-4">
-				<ContentPageHeader>
-					<template #icon>
-						<Avatar :src="user.avatar_url" :alt="user.username" size="96px" circle />
-					</template>
-					<template #title>
-						{{ user.username }}
-					</template>
-					<template #summary>
-						{{
-							user.bio
-								? user.bio
-								: projects.length === 0
-									? 'A Modrinth user.'
+          </span>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-lg font-bold text-primary"> Has Hardware Security Key </span>
+          <span>
+            {{ user.has_webauthn ? "Yes" : "No" }}
+          </span>
+        </div>
+      </div>
+    </NewModal>
+    <div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
+      <div class="normal-page__header py-4">
+        <ContentPageHeader>
+          <template #icon>
+            <Avatar :src="user.avatar_url" :alt="user.username" size="96px" circle />
+          </template>
+          <template #title>
+            {{ user.username }}
+          </template>
+          <template #summary>
+            {{
+              user.bio
+                ? user.bio
+                : projects.length === 0
+                  ? 'A Modrinth user.'
 									: 'A Modrinth creator.'
 						}}
 					</template>
diff --git a/apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json b/apps/labrinth/.sqlx/query-b87b5ac280e3fb5fc62770033531fe484d598f80d0cee5f838d10b40d7e927af.json
similarity index 86%
rename from apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json
rename to apps/labrinth/.sqlx/query-b87b5ac280e3fb5fc62770033531fe484d598f80d0cee5f838d10b40d7e927af.json
index 0c33202b98..24aedbfa22 100644
--- a/apps/labrinth/.sqlx/query-5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4.json
+++ b/apps/labrinth/.sqlx/query-b87b5ac280e3fb5fc62770033531fe484d598f80d0cee5f838d10b40d7e927af.json
@@ -1,6 +1,6 @@
 {
   "db_name": "PostgreSQL",
-  "query": "\n                    SELECT id, email,\n                        avatar_url, raw_avatar_url, username, bio,\n                        created, role, badges,\n                        github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                        email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,\n                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
+  "query": "\n                    SELECT id, email,\n                        avatar_url, raw_avatar_url, username, bio,\n                        created, role, badges,\n                        github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,\n                        email_verified, password, totp_secret, webauthn_passkeys, paypal_id, paypal_country, paypal_email,\n                        venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter\n                    FROM users\n                    WHERE id = ANY($1) OR LOWER(username) = ANY($2)\n                    ",
   "describe": {
     "columns": [
       {
@@ -95,36 +95,41 @@
       },
       {
         "ordinal": 18,
+        "name": "webauthn_passkeys",
+        "type_info": "Jsonb"
+      },
+      {
+        "ordinal": 19,
         "name": "paypal_id",
         "type_info": "Text"
       },
       {
-        "ordinal": 19,
+        "ordinal": 20,
         "name": "paypal_country",
         "type_info": "Text"
       },
       {
-        "ordinal": 20,
+        "ordinal": 21,
         "name": "paypal_email",
         "type_info": "Text"
       },
       {
-        "ordinal": 21,
+        "ordinal": 22,
         "name": "venmo_handle",
         "type_info": "Text"
       },
       {
-        "ordinal": 22,
+        "ordinal": 23,
         "name": "stripe_customer_id",
         "type_info": "Text"
       },
       {
-        "ordinal": 23,
+        "ordinal": 24,
         "name": "allow_friend_requests",
         "type_info": "Bool"
       },
       {
-        "ordinal": 24,
+        "ordinal": 25,
         "name": "is_subscribed_to_newsletter",
         "type_info": "Bool"
       }
@@ -154,6 +159,7 @@
       false,
       true,
       true,
+      false,
       true,
       true,
       true,
@@ -163,5 +169,5 @@
       false
     ]
   },
-  "hash": "5fcdeeeb820ada62e10feb0beefa29b0535241bbb6d74143925e16cf8cd720c4"
+  "hash": "b87b5ac280e3fb5fc62770033531fe484d598f80d0cee5f838d10b40d7e927af"
 }
diff --git a/apps/labrinth/Cargo.toml b/apps/labrinth/Cargo.toml
index 5bcc0ea7fe..d6571b8635 100644
--- a/apps/labrinth/Cargo.toml
+++ b/apps/labrinth/Cargo.toml
@@ -124,6 +124,7 @@ url = { workspace = true }
 urlencoding = { workspace = true }
 uuid = { workspace = true, features = ["fast-rng", "serde", "v4"] }
 validator = { workspace = true, features = ["derive"] }
+webauthn-rs = { workspace = true }
 webp = { workspace = true }
 woothee = { workspace = true }
 yaserde = { workspace = true, features = ["derive"] }
diff --git a/apps/labrinth/migrations/20250715014925_webauthn.sql b/apps/labrinth/migrations/20250715014925_webauthn.sql
new file mode 100644
index 0000000000..64c4b09314
--- /dev/null
+++ b/apps/labrinth/migrations/20250715014925_webauthn.sql
@@ -0,0 +1,2 @@
+ALTER TABLE users
+    ADD COLUMN webauthn_passkeys jsonb not null default '{}' -- Empty map
\ No newline at end of file
diff --git a/apps/labrinth/src/auth/mod.rs b/apps/labrinth/src/auth/mod.rs
index 2dc9311dca..c340dea046 100644
--- a/apps/labrinth/src/auth/mod.rs
+++ b/apps/labrinth/src/auth/mod.rs
@@ -2,6 +2,8 @@ pub mod checks;
 pub mod oauth;
 pub mod templates;
 pub mod validate;
+pub mod webauthn;
+
 pub use checks::{
     filter_enlisted_projects_ids, filter_enlisted_version_ids,
     filter_visible_collections, filter_visible_project_ids,
diff --git a/apps/labrinth/src/auth/webauthn.rs b/apps/labrinth/src/auth/webauthn.rs
new file mode 100644
index 0000000000..c12d699257
--- /dev/null
+++ b/apps/labrinth/src/auth/webauthn.rs
@@ -0,0 +1,25 @@
+use actix_web::web::Data;
+use regex::Regex;
+use webauthn_rs::{Webauthn, WebauthnBuilder};
+
+pub fn startup() -> Data<Webauthn> {
+    let url = url::Url::parse(&dotenvy::var("SITE_URL").unwrap()).unwrap();
+
+    let rp_id = dotenvy::var("SITE_URL")
+        .ok()
+        .and_then(|s| {
+            Regex::new(r"^(?:http|https)://([^:/]+)")
+                .ok()
+                .and_then(|re| re.captures(&s))
+                .and_then(|caps| caps.get(1))
+                .map(|m| m.as_str().to_string())
+        })
+        .unwrap();
+
+    let builder =
+        WebauthnBuilder::new(&rp_id, &url).expect("Invalid configuration");
+
+    let builder = builder.rp_name("Actix-web modrinth");
+
+    Data::new(builder.build().expect("Invalid configuration"))
+}
diff --git a/apps/labrinth/src/database/models/flow_item.rs b/apps/labrinth/src/database/models/flow_item.rs
index 192823d861..c7f613b1b8 100644
--- a/apps/labrinth/src/database/models/flow_item.rs
+++ b/apps/labrinth/src/database/models/flow_item.rs
@@ -10,6 +10,7 @@ use rand::distributions::Alphanumeric;
 use rand_chacha::ChaCha20Rng;
 use rand_chacha::rand_core::SeedableRng;
 use serde::{Deserialize, Serialize};
+use webauthn_rs::prelude::PasskeyRegistration;
 
 const FLOWS_NAMESPACE: &str = "flows";
 
@@ -28,6 +29,11 @@ pub enum DBFlow {
         user_id: DBUserId,
         secret: String,
     },
+    InitializeWebauthn {
+        username: String,
+        user_id: DBUserId,
+        reg_state: PasskeyRegistration,
+    },
     ForgotPassword {
         user_id: DBUserId,
     },
diff --git a/apps/labrinth/src/database/models/user_item.rs b/apps/labrinth/src/database/models/user_item.rs
index 090d99e49e..62a69871f0 100644
--- a/apps/labrinth/src/database/models/user_item.rs
+++ b/apps/labrinth/src/database/models/user_item.rs
@@ -1,3 +1,4 @@
+use std::collections::HashMap;
 use super::ids::{DBProjectId, DBUserId};
 use super::{DBCollectionId, DBReportId, DBThreadId};
 use crate::database::models;
@@ -13,6 +14,7 @@ use dashmap::DashMap;
 use serde::{Deserialize, Serialize};
 use std::fmt::{Debug, Display};
 use std::hash::Hash;
+use webauthn_rs::prelude::Passkey;
 
 const USERS_NAMESPACE: &str = "users";
 const USER_USERNAMES_NAMESPACE: &str = "users_usernames";
@@ -37,6 +39,7 @@ pub struct DBUser {
     pub stripe_customer_id: Option<String>,
 
     pub totp_secret: Option<String>,
+    pub webauthn_passkeys: HashMap<String, Passkey>,
 
     pub username: String,
     pub email: Option<String>,
@@ -180,7 +183,7 @@ impl DBUser {
                         avatar_url, raw_avatar_url, username, bio,
                         created, role, badges,
                         github_id, discord_id, gitlab_id, google_id, steam_id, microsoft_id,
-                        email_verified, password, totp_secret, paypal_id, paypal_country, paypal_email,
+                        email_verified, password, totp_secret, webauthn_passkeys, paypal_id, paypal_country, paypal_email,
                         venmo_handle, stripe_customer_id, allow_friend_requests, is_subscribed_to_newsletter
                     FROM users
                     WHERE id = ANY($1) OR LOWER(username) = ANY($2)
@@ -214,6 +217,7 @@ impl DBUser {
                             venmo_handle: u.venmo_handle,
                             stripe_customer_id: u.stripe_customer_id,
                             totp_secret: u.totp_secret,
+                            webauthn_passkeys: serde_json::from_value(u.webauthn_passkeys).unwrap_or_default(),
                             allow_friend_requests: u.allow_friend_requests,
                             is_subscribed_to_newsletter: u.is_subscribed_to_newsletter,
                         };
diff --git a/apps/labrinth/src/lib.rs b/apps/labrinth/src/lib.rs
index f119f71c2b..eec68c5ead 100644
--- a/apps/labrinth/src/lib.rs
+++ b/apps/labrinth/src/lib.rs
@@ -14,6 +14,7 @@ extern crate clickhouse as clickhouse_crate;
 use clickhouse_crate::Client;
 use util::cors::default_cors;
 
+use crate::auth::webauthn;
 use crate::background_task::update_versions;
 use crate::database::ReadOnlyPgPool;
 use crate::queue::billing::{index_billing, index_subscriptions};
@@ -336,6 +337,7 @@ pub fn app_config(
     .app_data(web::Data::new(labrinth_config.stripe_client.clone()))
     .app_data(web::Data::new(labrinth_config.anrok_client.clone()))
     .app_data(labrinth_config.rate_limiter.clone())
+    .app_data(webauthn::startup().clone())
     .configure({
         #[cfg(target_os = "linux")]
         {
diff --git a/apps/labrinth/src/models/v2/user.rs b/apps/labrinth/src/models/v2/user.rs
index f8e9d0d0db..5c1e75285a 100644
--- a/apps/labrinth/src/models/v2/user.rs
+++ b/apps/labrinth/src/models/v2/user.rs
@@ -22,6 +22,7 @@ pub struct LegacyUser {
     pub email_verified: Option<bool>,
     pub has_password: Option<bool>,
     pub has_totp: Option<bool>,
+    pub has_webauthn: Option<bool>,
     pub payout_data: Option<UserPayoutData>, // this was changed in v3, but not ones we want to keep out of v2
 
     // DEPRECATED. Always returns None
@@ -45,6 +46,7 @@ impl From<crate::models::v3::users::User> for LegacyUser {
             auth_providers: data.auth_providers,
             has_password: data.has_password,
             has_totp: data.has_totp,
+            has_webauthn: data.has_webauthn,
             github_id: data.github_id,
         }
     }
diff --git a/apps/labrinth/src/models/v3/users.rs b/apps/labrinth/src/models/v3/users.rs
index d8b0a2e822..a2d97e5aa0 100644
--- a/apps/labrinth/src/models/v3/users.rs
+++ b/apps/labrinth/src/models/v3/users.rs
@@ -44,6 +44,7 @@ pub struct User {
     pub email_verified: Option<bool>,
     pub has_password: Option<bool>,
     pub has_totp: Option<bool>,
+    pub has_webauthn: Option<bool>,
     pub payout_data: Option<UserPayoutData>,
     pub stripe_customer_id: Option<String>,
     pub allow_friend_requests: Option<bool>,
@@ -78,6 +79,7 @@ impl From<DBUser> for User {
             auth_providers: None,
             has_password: None,
             has_totp: None,
+            has_webauthn: Some(!data.webauthn_passkeys.is_empty()),
             github_id: None,
             stripe_customer_id: None,
             allow_friend_requests: None,
@@ -124,6 +126,7 @@ impl User {
             auth_providers: Some(auth_providers),
             has_password: Some(db_user.password.is_some()),
             has_totp: Some(db_user.totp_secret.is_some()),
+            has_webauthn: Some(!db_user.webauthn_passkeys.is_empty()),
             github_id: None,
             payout_data: Some(UserPayoutData {
                 paypal_address: db_user.paypal_email,
diff --git a/apps/labrinth/src/routes/internal/flows.rs b/apps/labrinth/src/routes/internal/flows.rs
index 246f053491..17e869e6f1 100644
--- a/apps/labrinth/src/routes/internal/flows.rs
+++ b/apps/labrinth/src/routes/internal/flows.rs
@@ -2,9 +2,9 @@ use crate::auth::validate::{
     get_full_user_from_headers, get_user_record_from_bearer_token,
 };
 use crate::auth::{AuthProvider, AuthenticationError, get_user_from_headers};
-use crate::database::models::DBUser;
 use crate::database::models::flow_item::DBFlow;
 use crate::database::models::notification_item::NotificationBuilder;
+use crate::database::models::{DBUser, DBUserId};
 use crate::database::redis::RedisPool;
 use crate::file_hosting::{FileHost, FileHostPublicity};
 use crate::models::notifications::NotificationBody;
@@ -36,7 +36,10 @@ use sqlx::postgres::PgPool;
 use std::collections::HashMap;
 use std::str::FromStr;
 use std::sync::Arc;
+use uuid::Uuid;
 use validator::Validate;
+use webauthn_rs::Webauthn;
+use webauthn_rs::prelude::RegisterPublicKeyCredential;
 use zxcvbn::Score;
 
 pub fn config(cfg: &mut ServiceConfig) {
@@ -53,6 +56,8 @@ pub fn config(cfg: &mut ServiceConfig) {
             .service(remove_2fa)
             .service(reset_password_begin)
             .service(change_password)
+            .service(webauthn_register_start)
+            .service(webauthn_register_finish)
             .service(resend_verify_email)
             .service(set_email)
             .service(verify_email)
@@ -226,6 +231,7 @@ impl TempUser {
                 venmo_handle: None,
                 stripe_customer_id: None,
                 totp_secret: None,
+                webauthn_passkeys: HashMap::new(),
                 username,
                 email: self.email.clone(),
                 email_verified: self.email.is_some(),
@@ -1412,6 +1418,7 @@ pub async fn create_account_with_password(
         venmo_handle: None,
         stripe_customer_id: None,
         totp_secret: None,
+        webauthn_passkeys: HashMap::new(),
         username: new_account.username.clone(),
         email: Some(new_account.email.clone()),
         email_verified: false,
@@ -2149,12 +2156,113 @@ pub async fn change_password(
     }
 
     transaction.commit().await?;
-    crate::database::models::DBUser::clear_caches(&[(user.id, None)], &redis)
+    DBUser::clear_caches(&[(user.id, None)], &redis)
         .await?;
 
     Ok(HttpResponse::Ok().finish())
 }
 
+#[derive(Deserialize, Validate)]
+pub struct SetupWebauthnFinish {
+    pub name: String,
+    pub cred: RegisterPublicKeyCredential,
+    pub flow: String,
+}
+
+#[post("webauthn/register/start/{username}")]
+pub async fn webauthn_register_start(
+    username: web::Path<String>,
+    req: HttpRequest,
+    pool: Data<PgPool>,
+    redis: Data<RedisPool>,
+    session_queue: Data<AuthQueue>,
+    webauthn: Data<Webauthn>,
+) -> Result<HttpResponse, ApiError> {
+    let user = get_user_from_headers(
+        &req,
+        &**pool,
+        &redis,
+        &session_queue,
+        Scopes::USER_AUTH_WRITE,
+    )
+    .await?
+    .1;
+
+    let db_user_id: DBUserId = user.id.into();
+
+    // Convert i64 user id to uuid
+    let user_uuid = Uuid::from_u128(db_user_id.0 as u128);
+
+    let (ccr, reg_state) = webauthn
+        .start_passkey_registration(
+            user_uuid, &username, &username,
+            None, //exclude_credentials, TODO
+        )
+        .map_err(|e| {
+            tracing::error!(
+                "Encountered error while starting passkey reg: {e}"
+            );
+            ApiError::WebauthnRegistration
+        })?;
+
+    let flow = DBFlow::InitializeWebauthn {
+        username: username.into_inner(),
+        user_id: db_user_id,
+        reg_state,
+    }
+    .insert(Duration::minutes(30), &redis)
+    .await?;
+
+    Ok(HttpResponse::Ok().json(serde_json::json!({
+        "challenge": ccr,
+        "flow": flow,
+    })))
+}
+
+#[post("webauthn/register/finish")]
+pub async fn webauthn_register_finish(
+    pool: Data<PgPool>,
+    redis: Data<RedisPool>,
+    login: web::Json<SetupWebauthnFinish>,
+    webauthn: Data<Webauthn>,
+) -> Result<HttpResponse, ApiError> {
+    let flow = DBFlow::get(&login.flow, &redis)
+        .await?
+        .ok_or_else(|| AuthenticationError::InvalidCredentials)?;
+
+    if let DBFlow::InitializeWebauthn {
+        user_id, reg_state, ..
+    } = flow
+    {
+        let sk = webauthn
+            .finish_passkey_registration(&login.cred, &reg_state)
+            .map_err(|e| {
+                tracing::error!(
+                    "Encountered error while finishing passkey reg: {e}"
+                );
+                ApiError::WebauthnRegistration
+            })?;
+
+        let sk_json = serde_json::to_value(HashMap::from([(login.name.clone(), sk)]))
+            .map_err(|_| ApiError::WebauthnRegistration)?;
+
+        sqlx::query("
+            UPDATE users
+            SET webauthn_passkeys = COALESCE(webauthn_passkeys, '{}'::jsonb) || $1::jsonb
+            WHERE id = $2",
+        )
+            .bind(sk_json)
+            .bind(user_id.0)
+            .execute(&**pool).await?;
+
+        Ok(HttpResponse::Ok().finish())
+    } else {
+        Err(ApiError::Authentication(
+            AuthenticationError::InvalidCredentials,
+        ))
+    }
+}
+
 #[derive(Deserialize, Validate)]
 pub struct SetEmail {
     #[validate(email)]
diff --git a/apps/labrinth/src/routes/internal/session.rs b/apps/labrinth/src/routes/internal/session.rs
index 1b20e3aee9..2483d27394 100644
--- a/apps/labrinth/src/routes/internal/session.rs
+++ b/apps/labrinth/src/routes/internal/session.rs
@@ -16,6 +16,8 @@ use rand::distributions::Alphanumeric;
 use rand::{Rng, SeedableRng};
 use rand_chacha::ChaCha20Rng;
 use sqlx::PgPool;
+use uuid::Uuid;
+use webauthn_rs::prelude::{PasskeyAuthentication, PasskeyRegistration};
 use woothee::parser::Parser;
 
 pub fn config(cfg: &mut ServiceConfig) {
@@ -27,6 +29,17 @@ pub fn config(cfg: &mut ServiceConfig) {
     );
 }
 
+pub struct PasskeyRegistrationState {
+    pub username: String,
+    pub id: Uuid,
+    pub passkey_registration: PasskeyRegistration,
+}
+
+pub struct PasskeyAuthenticationState {
+    pub user_id: Uuid,
+    pub passkey_authentication: PasskeyAuthentication,
+}
+
 pub struct SessionMetadata {
     pub city: Option<String>,
     pub country: Option<String>,
@@ -35,6 +48,9 @@ pub struct SessionMetadata {
     pub os: Option<String>,
     pub platform: Option<String>,
     pub user_agent: String,
+
+    pub passkey_registration_state: Option<PasskeyRegistrationState>,
+    pub passkey_authentication_state: Option<PasskeyAuthenticationState>,
 }
 
 pub async fn get_session_metadata(
@@ -80,6 +96,9 @@ pub async fn get_session_metadata(
             .ok_or_else(|| AuthenticationError::InvalidCredentials)?
             .to_string(),
         user_agent: user_agent.to_string(),
+        // TODO - Webauthn
+        passkey_registration_state: None,
+        passkey_authentication_state: None,
     })
 }
 
diff --git a/apps/labrinth/src/routes/mod.rs b/apps/labrinth/src/routes/mod.rs
index 66a20a91f0..41412935a5 100644
--- a/apps/labrinth/src/routes/mod.rs
+++ b/apps/labrinth/src/routes/mod.rs
@@ -155,6 +155,8 @@ pub enum ApiError {
     RateLimitError(u128, u32),
     #[error("Error while interacting with payment processor: {0}")]
     Stripe(#[from] stripe::StripeError),
+    #[error("Error during webauthn registration")]
+    WebauthnRegistration,
 }
 
 impl ApiError {
@@ -194,6 +196,7 @@ impl ApiError {
                 ApiError::Stripe(..) => "stripe_error",
                 ApiError::TaxProcessor(..) => "tax_processor_error",
                 ApiError::Slack(..) => "slack_error",
+                ApiError::WebauthnRegistration => "webauthn_registration_error",
             },
             description: self.to_string(),
         }
@@ -236,6 +239,7 @@ impl actix_web::ResponseError for ApiError {
             ApiError::Stripe(..) => StatusCode::FAILED_DEPENDENCY,
             ApiError::TaxProcessor(..) => StatusCode::INTERNAL_SERVER_ERROR,
             ApiError::Slack(..) => StatusCode::INTERNAL_SERVER_ERROR,
+            ApiError::WebauthnRegistration => StatusCode::BAD_REQUEST,
         }
     }
 
diff --git a/apps/labrinth/tests/common/api_common/models.rs b/apps/labrinth/tests/common/api_common/models.rs
index 454983c2b5..cde58044e6 100644
--- a/apps/labrinth/tests/common/api_common/models.rs
+++ b/apps/labrinth/tests/common/api_common/models.rs
@@ -226,6 +226,7 @@ pub struct CommonUser {
     pub email_verified: Option<bool>,
     pub has_password: Option<bool>,
     pub has_totp: Option<bool>,
+    pub has_webauthn: Option<bool>,
     pub payout_data: Option<UserPayoutData>,
     pub github_id: Option<u64>,
 }
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 79da983dd4..4dcc1d638d 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -8,26 +8,26 @@ import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
 import _AsteriskIcon from './icons/asterisk.svg?component'
 import _BadgeCheckIcon from './icons/badge-check.svg?component'
 import _BanIcon from './icons/ban.svg?component'
-import _BellIcon from './icons/bell.svg?component'
 import _BellRingIcon from './icons/bell-ring.svg?component'
+import _BellIcon from './icons/bell.svg?component'
 import _BlocksIcon from './icons/blocks.svg?component'
 import _BoldIcon from './icons/bold.svg?component'
-import _BookIcon from './icons/book.svg?component'
 import _BookOpenIcon from './icons/book-open.svg?component'
 import _BookTextIcon from './icons/book-text.svg?component'
+import _BookIcon from './icons/book.svg?component'
 import _BookmarkIcon from './icons/bookmark.svg?component'
 import _BotIcon from './icons/bot.svg?component'
-import _BoxIcon from './icons/box.svg?component'
 import _BoxImportIcon from './icons/box-import.svg?component'
+import _BoxIcon from './icons/box.svg?component'
 import _BracesIcon from './icons/braces.svg?component'
 import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChangeSkinIcon from './icons/change-skin.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
-import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
+import _CheckIcon from './icons/check.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _ClearIcon from './icons/clear.svg?component'
@@ -57,13 +57,13 @@ import _EditIcon from './icons/edit.svg?component'
 import _EllipsisVerticalIcon from './icons/ellipsis-vertical.svg?component'
 import _ExpandIcon from './icons/expand.svg?component'
 import _ExternalIcon from './icons/external.svg?component'
-import _EyeIcon from './icons/eye.svg?component'
 import _EyeOffIcon from './icons/eye-off.svg?component'
-import _FileIcon from './icons/file.svg?component'
+import _EyeIcon from './icons/eye.svg?component'
 import _FileArchiveIcon from './icons/file-archive.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
-import _FilterIcon from './icons/filter.svg?component'
+import _FileIcon from './icons/file.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
+import _FilterIcon from './icons/filter.svg?component'
 import _FolderArchiveIcon from './icons/folder-archive.svg?component'
 import _FolderOpenIcon from './icons/folder-open.svg?component'
 import _FolderSearchIcon from './icons/folder-search.svg?component'
@@ -80,8 +80,8 @@ import _HashIcon from './icons/hash.svg?component'
 import _Heading1Icon from './icons/heading-1.svg?component'
 import _Heading2Icon from './icons/heading-2.svg?component'
 import _Heading3Icon from './icons/heading-3.svg?component'
-import _HeartIcon from './icons/heart.svg?component'
 import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
+import _HeartIcon from './icons/heart.svg?component'
 import _HistoryIcon from './icons/history.svg?component'
 import _HomeIcon from './icons/home.svg?component'
 import _ImageIcon from './icons/image.svg?component'
@@ -97,13 +97,13 @@ import _LeftArrowIcon from './icons/left-arrow.svg?component'
 import _LibraryIcon from './icons/library.svg?component'
 import _LightBulbIcon from './icons/light-bulb.svg?component'
 import _LinkIcon from './icons/link.svg?component'
-import _ListIcon from './icons/list.svg?component'
 import _ListBulletedIcon from './icons/list-bulleted.svg?component'
 import _ListEndIcon from './icons/list-end.svg?component'
 import _ListOrderedIcon from './icons/list-ordered.svg?component'
+import _ListIcon from './icons/list.svg?component'
 import _LoaderIcon from './icons/loader.svg?component'
-import _LockIcon from './icons/lock.svg?component'
 import _LockOpenIcon from './icons/lock-open.svg?component'
+import _LockIcon from './icons/lock.svg?component'
 import _LogInIcon from './icons/log-in.svg?component'
 import _LogOutIcon from './icons/log-out.svg?component'
 import _MailIcon from './icons/mail.svg?component'
@@ -114,8 +114,8 @@ import _MessageIcon from './icons/message.svg?component'
 import _MicrophoneIcon from './icons/microphone.svg?component'
 import _MinimizeIcon from './icons/minimize.svg?component'
 import _MinusIcon from './icons/minus.svg?component'
-import _MonitorIcon from './icons/monitor.svg?component'
 import _MonitorSmartphoneIcon from './icons/monitor-smartphone.svg?component'
+import _MonitorIcon from './icons/monitor.svg?component'
 import _MoonIcon from './icons/moon.svg?component'
 import _MoreHorizontalIcon from './icons/more-horizontal.svg?component'
 import _MoreVerticalIcon from './icons/more-vertical.svg?component'
@@ -124,16 +124,16 @@ import _NoSignalIcon from './icons/no-signal.svg?component'
 import _NotepadTextIcon from './icons/notepad-text.svg?component'
 import _OmorphiaIcon from './icons/omorphia.svg?component'
 import _OrganizationIcon from './icons/organization.svg?component'
-import _PackageIcon from './icons/package.svg?component'
 import _PackageClosedIcon from './icons/package-closed.svg?component'
 import _PackageOpenIcon from './icons/package-open.svg?component'
+import _PackageIcon from './icons/package.svg?component'
 import _PaintbrushIcon from './icons/paintbrush.svg?component'
 import _PickaxeIcon from './icons/pickaxe.svg?component'
 import _PlayIcon from './icons/play.svg?component'
 import _PlugIcon from './icons/plug.svg?component'
 import _PlusIcon from './icons/plus.svg?component'
-import _RadioButtonIcon from './icons/radio-button.svg?component'
 import _RadioButtonCheckedIcon from './icons/radio-button-checked.svg?component'
+import _RadioButtonIcon from './icons/radio-button.svg?component'
 import _ReceiptTextIcon from './icons/receipt-text.svg?component'
 import _RedoIcon from './icons/redo.svg?component'
 import _RefreshCwIcon from './icons/refresh-cw.svg?component'
@@ -149,9 +149,10 @@ import _SaveIcon from './icons/save.svg?component'
 import _ScaleIcon from './icons/scale.svg?component'
 import _ScanEyeIcon from './icons/scan-eye.svg?component'
 import _SearchIcon from './icons/search.svg?component'
+import _SecurityKeyIcon from './icons/security-key.svg?component'
 import _SendIcon from './icons/send.svg?component'
-import _ServerIcon from './icons/server.svg?component'
 import _ServerPlusIcon from './icons/server-plus.svg?component'
+import _ServerIcon from './icons/server.svg?component'
 import _SettingsIcon from './icons/settings.svg?component'
 import _ShareIcon from './icons/share.svg?component'
 import _ShieldIcon from './icons/shield.svg?component'
@@ -181,23 +182,23 @@ import _TrashIcon from './icons/trash.svg?component'
 import _TriangleAlertIcon from './icons/triangle-alert.svg?component'
 import _UnderlineIcon from './icons/underline.svg?component'
 import _UndoIcon from './icons/undo.svg?component'
-import _UnknownIcon from './icons/unknown.svg?component'
 import _UnknownDonationIcon from './icons/unknown-donation.svg?component'
+import _UnknownIcon from './icons/unknown.svg?component'
 import _UnlinkIcon from './icons/unlink.svg?component'
 import _UnplugIcon from './icons/unplug.svg?component'
 import _UpdatedIcon from './icons/updated.svg?component'
 import _UploadIcon from './icons/upload.svg?component'
-import _UserIcon from './icons/user.svg?component'
 import _UserPlusIcon from './icons/user-plus.svg?component'
 import _UserXIcon from './icons/user-x.svg?component'
+import _UserIcon from './icons/user.svg?component'
 import _UsersIcon from './icons/users.svg?component'
 import _VersionIcon from './icons/version.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
 import _WindowIcon from './icons/window.svg?component'
 import _WorldIcon from './icons/world.svg?component'
 import _WrenchIcon from './icons/wrench.svg?component'
-import _XIcon from './icons/x.svg?component'
 import _XCircleIcon from './icons/x-circle.svg?component'
+import _XIcon from './icons/x.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
@@ -349,6 +350,7 @@ export const SaveIcon = _SaveIcon
 export const ScaleIcon = _ScaleIcon
 export const ScanEyeIcon = _ScanEyeIcon
 export const SearchIcon = _SearchIcon
+export const SecurityKeyIcon = _SecurityKeyIcon
 export const SendIcon = _SendIcon
 export const ServerPlusIcon = _ServerPlusIcon
 export const ServerIcon = _ServerIcon
diff --git a/packages/assets/icons/security-key.svg b/packages/assets/icons/security-key.svg
new file mode 100644
index 0000000000..716b282052
--- /dev/null
+++ b/packages/assets/icons/security-key.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M10.423 22q-.69 0-1.153-.462t-.462-1.153v-2.943h-.192q-.691 0-1.153-.462T7 15.827V3.616q0-.691.463-1.153T8.616 2h6.769q.69 0 1.153.463T17 3.616v12.211q0 .69-.462 1.153t-1.153.462h-.193v2.943q0 .69-.462 1.153T13.577 22zM12 12.02q.962 0 1.635-.664t.673-1.625t-.674-1.644T12 7.404t-1.634.683t-.674 1.644t.674 1.625t1.634.663M10.27 21h3.48q.192 0 .327-.134q.135-.135.135-.327v-3.097H9.808v3.097q0 .192.134.327q.135.134.327.134M12 11.02q-.54 0-.914-.375t-.375-.914t.374-.934t.915-.393t.934.393t.393.934t-.393.914t-.934.374"/></svg>
\ No newline at end of file
diff --git a/packages/utils/types.ts b/packages/utils/types.ts
index d57ba3dd56..ab1d036086 100644
--- a/packages/utils/types.ts
+++ b/packages/utils/types.ts
@@ -352,6 +352,7 @@ export interface User {
 	email_verified?: boolean
 	has_password?: boolean
 	has_totp?: boolean
+    has_webauthn?: boolean
 }
 
 export enum TeamMemberPermission {