Sync 2: device-token bearer auth + linked-devices UI (M8)
Native clients (Tauri/Android) authenticate sync with a long-lived device bearer token, alongside the existing web session cookie. Backend: - security.py: generate_token() (secrets.token_urlsafe) + hash_token() (SHA-256 — device tokens are already high-entropy, so no slow KDF; keeps per-request bearer auth cheap). Only the hash is stored. - device_tokens table (migration 0016): id, user_id, token_hash (unique), name, created_at, last_used_at. - login_required now accepts `Authorization: Bearer <token>` OR the session cookie. Session path stays DB-free (fast); bearer path looks up the token hash, sets g.user_id, and stamps last_used_at. - Endpoints: POST /api/auth/device-login (public; email+password → token, the native first-link flow), POST /api/auth/devices (session/bearer → token, web "link a device"), GET /api/auth/devices (list), DELETE /api/auth/devices/<id> (revoke). All owner-scoped; token shown once. Frontend: - Per-user (not admin) /account view "Linked devices": create a token (one-time reveal + copy), list devices (name, linked/last-synced), revoke with confirm. Top-bar device icon for all users; devices Pinia store. Tests (DB-free): token hash determinism + uniqueness; device endpoints auth-guard (401 without auth, before DB); device-login input validation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useDevicesStore } from "../stores/devices";
|
||||
import { useUiStore } from "../stores/ui";
|
||||
import BaseButton from "../components/BaseButton.vue";
|
||||
import Icon from "../components/Icon.vue";
|
||||
|
||||
// Per-user (not admin) management of linked native clients — the Tauri desktop and
|
||||
// Android apps authenticate sync with a device bearer token issued here.
|
||||
const devices = useDevicesStore();
|
||||
const ui = useUiStore();
|
||||
|
||||
const error = ref("");
|
||||
const newName = ref("");
|
||||
const creating = ref(false);
|
||||
// The freshly-issued plaintext token — shown ONCE (never retrievable again).
|
||||
const freshToken = ref("");
|
||||
|
||||
async function load() {
|
||||
error.value = "";
|
||||
try {
|
||||
await devices.load();
|
||||
} catch {
|
||||
error.value = "Couldn't load your linked devices.";
|
||||
}
|
||||
}
|
||||
|
||||
async function link() {
|
||||
creating.value = true;
|
||||
error.value = "";
|
||||
freshToken.value = "";
|
||||
try {
|
||||
freshToken.value = await devices.create(newName.value.trim() || "Device");
|
||||
newName.value = "";
|
||||
} catch (e) {
|
||||
error.value = (e as { error?: string }).error ?? "Couldn't create a device token.";
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToken() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(freshToken.value);
|
||||
ui.showToast("Token copied to clipboard.");
|
||||
} catch {
|
||||
ui.showToast("Couldn't copy — select and copy it manually.");
|
||||
}
|
||||
}
|
||||
|
||||
async function revoke(id: string, name: string) {
|
||||
if (!window.confirm(`Revoke "${name}"? That device will need to link again to sync.`)) return;
|
||||
try {
|
||||
await devices.revoke(id);
|
||||
} catch {
|
||||
ui.showToast("Couldn't revoke that device.");
|
||||
}
|
||||
}
|
||||
|
||||
function fmt(iso: string | null): string {
|
||||
if (!iso) return "never";
|
||||
return new Date(iso).toLocaleString();
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto min-h-full max-w-2xl px-4 py-8">
|
||||
<header class="mb-8 flex items-center gap-3">
|
||||
<RouterLink to="/" class="icon-btn" title="Back to board" aria-label="Back to board">
|
||||
<svg
|
||||
class="h-[18px] w-[18px]"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="m15 18-6-6 6-6" />
|
||||
</svg>
|
||||
</RouterLink>
|
||||
<h1 class="text-xl font-bold tracking-tight">Linked devices</h1>
|
||||
</header>
|
||||
|
||||
<p class="mb-6 max-w-xl text-sm text-neutral-500 dark:text-neutral-400">
|
||||
Link the ThoughtSync desktop or mobile app to sync your notes. Create a device token here, then
|
||||
paste it into the app when it asks to connect. You can revoke a device at any time.
|
||||
</p>
|
||||
|
||||
<!-- One-time token reveal -->
|
||||
<div
|
||||
v-if="freshToken"
|
||||
class="mb-6 rounded-xl border border-brand/40 bg-brand/5 p-4 dark:border-brand/30 dark:bg-brand/10"
|
||||
>
|
||||
<p class="text-sm font-medium text-neutral-800 dark:text-neutral-100">
|
||||
Copy this token now — it won't be shown again.
|
||||
</p>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<code
|
||||
class="min-w-0 flex-1 overflow-x-auto rounded-lg border border-neutral-300 bg-white px-3 py-2 font-mono text-xs text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
|
||||
>{{ freshToken }}</code
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn shrink-0"
|
||||
title="Copy token"
|
||||
aria-label="Copy token"
|
||||
@click="copyToken"
|
||||
>
|
||||
<Icon name="copy" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-3 text-xs text-neutral-500 underline hover:text-neutral-700 dark:hover:text-neutral-300"
|
||||
@click="freshToken = ''"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Create a device token -->
|
||||
<form class="mb-8 flex items-end gap-3" @submit.prevent="link">
|
||||
<div class="flex flex-1 flex-col gap-1">
|
||||
<label for="device-name" class="text-sm font-medium text-neutral-800 dark:text-neutral-200"
|
||||
>Link a new device</label
|
||||
>
|
||||
<input
|
||||
id="device-name"
|
||||
v-model="newName"
|
||||
type="text"
|
||||
placeholder="e.g. My laptop, Pixel phone"
|
||||
class="rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
|
||||
/>
|
||||
</div>
|
||||
<BaseButton type="submit" :loading="creating">Create token</BaseButton>
|
||||
</form>
|
||||
|
||||
<p v-if="error" class="mb-4 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
|
||||
|
||||
<!-- Device list -->
|
||||
<div v-if="devices.loading" class="py-10 text-center text-sm text-neutral-400">Loading…</div>
|
||||
<div
|
||||
v-else-if="!devices.items.length"
|
||||
class="rounded-xl border border-dashed border-neutral-300 py-10 text-center dark:border-neutral-700"
|
||||
>
|
||||
<p class="text-sm text-neutral-500 dark:text-neutral-400">No devices linked yet.</p>
|
||||
</div>
|
||||
<ul v-else class="flex flex-col gap-2">
|
||||
<li
|
||||
v-for="d in devices.items"
|
||||
:key="d.id"
|
||||
class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
|
||||
>
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<span class="text-neutral-400"><Icon name="device" /></span>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">{{ d.name }}</p>
|
||||
<p class="text-xs text-neutral-400">
|
||||
Linked {{ fmt(d.created_at) }} · last synced {{ fmt(d.last_used_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-red-600 hover:bg-red-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:text-red-400 dark:hover:bg-red-950/40"
|
||||
@click="revoke(d.id, d.name)"
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user