feat: argon2id passwords, session cookies, bot bearer tokens
Adds the full auth flow. Reads stay public; writes (currently only POST
/api/v1/mangas) require a CurrentUser. Both browsers and bot scripts hit
the same endpoints — they just present credentials differently.
Migration 0002_auth.sql introduces users.password_hash, a sessions
table, and an api_tokens table. Sessions and api_tokens store only
sha256(raw_token) — the raw value lives in the cookie or the
Authorization header.
New endpoints under /api/v1/auth/:
- POST /register — argon2id hash, creates a session, sets cookie.
- POST /login — verifies, rotates to a fresh session (old ones expire
naturally so other devices stay signed in).
- POST /logout — deletes the server-side session row + clears the
cookie via Max-Age=0.
- GET /me — current user via the new CurrentUser extractor.
- POST /tokens — issue a bot bearer token; raw value returned exactly
once at creation.
- DELETE /tokens/{id} — owner-only: 404 if unknown, 403 if it exists
but belongs to another user, 204 on success.
The CurrentUser axum extractor resolves cookie first, then
Authorization: Bearer; failure → AppError::Unauthenticated (401). New
AppError variants Unauthenticated/Forbidden/Conflict carry the matching
envelope codes; the top-level match in `code()` stays exhaustive.
Backend integration coverage in tests/api_auth.rs: register sets a
HttpOnly SameSite=Lax cookie and never leaks password_hash; duplicate
username → 409; weak password → 400; login rotates the cookie; wrong
password / unknown user → 401; /me with vs without cookie; logout
invalidates the cookie; bot-token roundtrip via Bearer; user A cannot
delete user B's token (403); unknown delete → 404.
Frontend:
- lib/api/auth.ts — typed wrappers; me() returns null on 401.
- lib/session.svelte.ts — per-tab user state with a seq counter to
guard against an in-flight /me clobbering a fresh setUser.
- lib/api/client.ts — request<T> returns undefined for 204.
- routes/login + routes/register — forms with action="javascript:void(0)"
so the no-JS path is a no-op (avoids the hydration-race where a
pre-attach click would submit via the browser default).
- routes/+layout.svelte — session-aware nav: spinner → user + Logout,
or Login / Register.
- e2e/auth-flow.spec.ts — login flips the layout, logout flips back;
bad credentials surface the API error message.
Config grows AuthConfig (cookie_secure, cookie_domain, session_ttl_days)
and CORS_ALLOWED_ORIGINS. CORS middleware is mounted in app::build and
stays a no-op (same-origin) until origins are listed.
Lockstep version bump to 0.3.0.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
142
frontend/src/lib/api/auth.test.ts
Normal file
142
frontend/src/lib/api/auth.test.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
import {
|
||||
describe,
|
||||
it,
|
||||
expect,
|
||||
vi,
|
||||
beforeEach,
|
||||
afterEach,
|
||||
type MockInstance
|
||||
} from 'vitest';
|
||||
import {
|
||||
register,
|
||||
login,
|
||||
logout,
|
||||
me,
|
||||
createToken,
|
||||
deleteToken
|
||||
} from './auth';
|
||||
|
||||
function ok(body: unknown, status = 200): Response {
|
||||
return new Response(JSON.stringify(body), {
|
||||
status,
|
||||
headers: { 'content-type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
function noContent(): Response {
|
||||
return new Response(null, { status: 204 });
|
||||
}
|
||||
|
||||
function envelope(status: number, code: string, message: string): Response {
|
||||
return new Response(JSON.stringify({ error: { code, message } }), {
|
||||
status,
|
||||
headers: { 'content-type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
const userFixture = {
|
||||
id: 'user-1',
|
||||
username: 'alice',
|
||||
created_at: '2026-01-01T00:00:00Z'
|
||||
};
|
||||
|
||||
describe('auth api client', () => {
|
||||
let fetchSpy: MockInstance<typeof globalThis.fetch>;
|
||||
|
||||
beforeEach(() => {
|
||||
fetchSpy = vi.spyOn(globalThis, 'fetch');
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('register POSTs JSON to /v1/auth/register and returns the user', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok({ user: userFixture }, 201));
|
||||
const user = await register({ username: 'alice', password: 'hunter2hunter2' });
|
||||
expect(user).toEqual(userFixture);
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/auth\/register$/);
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('POST');
|
||||
expect(JSON.parse(init.body as string)).toEqual({
|
||||
username: 'alice',
|
||||
password: 'hunter2hunter2'
|
||||
});
|
||||
});
|
||||
|
||||
it('register surfaces 409 conflict via ApiError.code', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(envelope(409, 'conflict', 'username is already taken'));
|
||||
await expect(
|
||||
register({ username: 'alice', password: 'hunter2hunter2' })
|
||||
).rejects.toMatchObject({ status: 409, code: 'conflict' });
|
||||
});
|
||||
|
||||
it('login POSTs JSON to /v1/auth/login and returns the user', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok({ user: userFixture }));
|
||||
const user = await login({ username: 'alice', password: 'hunter2hunter2' });
|
||||
expect(user).toEqual(userFixture);
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/auth\/login$/);
|
||||
});
|
||||
|
||||
it('login surfaces 401 unauthenticated via ApiError.code', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'unauthenticated'));
|
||||
await expect(
|
||||
login({ username: 'alice', password: 'wrong' })
|
||||
).rejects.toMatchObject({ status: 401, code: 'unauthenticated' });
|
||||
});
|
||||
|
||||
it('logout POSTs to /v1/auth/logout and handles 204', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(noContent());
|
||||
await expect(logout()).resolves.toBeUndefined();
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/auth\/logout$/);
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('POST');
|
||||
});
|
||||
|
||||
it('me returns the user on 200', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(ok({ user: userFixture }));
|
||||
await expect(me()).resolves.toEqual(userFixture);
|
||||
});
|
||||
|
||||
it('me returns null on 401 (anonymous user)', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(envelope(401, 'unauthenticated', 'unauthenticated'));
|
||||
await expect(me()).resolves.toBeNull();
|
||||
});
|
||||
|
||||
it('me re-throws non-401 errors', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(envelope(500, 'internal_error', 'internal error'));
|
||||
await expect(me()).rejects.toMatchObject({ status: 500 });
|
||||
});
|
||||
|
||||
it('createToken POSTs to /v1/auth/tokens and returns CreatedToken with bearer', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(
|
||||
ok(
|
||||
{
|
||||
id: 't1',
|
||||
user_id: 'user-1',
|
||||
name: 'ci-bot',
|
||||
created_at: '2026-01-01T00:00:00Z',
|
||||
last_used_at: null,
|
||||
bearer: 'raw-token-abc'
|
||||
},
|
||||
201
|
||||
)
|
||||
);
|
||||
const t = await createToken('ci-bot');
|
||||
expect(t.name).toBe('ci-bot');
|
||||
expect(t.bearer).toBe('raw-token-abc');
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/auth\/tokens$/);
|
||||
});
|
||||
|
||||
it('deleteToken DELETEs to /v1/auth/tokens/{id} and handles 204', async () => {
|
||||
fetchSpy.mockResolvedValueOnce(noContent());
|
||||
await expect(deleteToken('t1')).resolves.toBeUndefined();
|
||||
const url = fetchSpy.mock.calls[0][0] as string;
|
||||
expect(url).toMatch(/\/v1\/auth\/tokens\/t1$/);
|
||||
const init = fetchSpy.mock.calls[0][1] as RequestInit;
|
||||
expect(init.method).toBe('DELETE');
|
||||
});
|
||||
});
|
||||
72
frontend/src/lib/api/auth.ts
Normal file
72
frontend/src/lib/api/auth.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { ApiError, request } from './client';
|
||||
|
||||
export type User = {
|
||||
id: string;
|
||||
username: string;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
export type Credentials = {
|
||||
username: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
type AuthResponse = { user: User };
|
||||
|
||||
export async function register(creds: Credentials): Promise<User> {
|
||||
const r = await request<AuthResponse>('/v1/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(creds)
|
||||
});
|
||||
return r.user;
|
||||
}
|
||||
|
||||
export async function login(creds: Credentials): Promise<User> {
|
||||
const r = await request<AuthResponse>('/v1/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(creds)
|
||||
});
|
||||
return r.user;
|
||||
}
|
||||
|
||||
export async function logout(): Promise<void> {
|
||||
await request<void>('/v1/auth/logout', { method: 'POST' });
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the current user, or `null` if no valid session.
|
||||
* Re-throws any non-401 error.
|
||||
*/
|
||||
export async function me(): Promise<User | null> {
|
||||
try {
|
||||
const r = await request<AuthResponse>('/v1/auth/me');
|
||||
return r.user;
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError && e.status === 401) return null;
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
export type ApiToken = {
|
||||
id: string;
|
||||
user_id: string;
|
||||
name: string;
|
||||
created_at: string;
|
||||
last_used_at: string | null;
|
||||
};
|
||||
|
||||
export type CreatedToken = ApiToken & { bearer: string };
|
||||
|
||||
export async function createToken(name: string): Promise<CreatedToken> {
|
||||
return request<CreatedToken>('/v1/auth/tokens', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteToken(id: string): Promise<void> {
|
||||
await request<void>(`/v1/auth/tokens/${encodeURIComponent(id)}`, { method: 'DELETE' });
|
||||
}
|
||||
@@ -42,6 +42,9 @@ export async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
}
|
||||
throw new ApiError(res.status, code, message);
|
||||
}
|
||||
if (res.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
|
||||
33
frontend/src/lib/session.svelte.ts
Normal file
33
frontend/src/lib/session.svelte.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
// Per-tab session state for the currently logged-in user.
|
||||
//
|
||||
// Only mutated client-side (onMount / form submits) so the module-level
|
||||
// instance can't leak across SSR requests — SSR always renders the
|
||||
// `loaded === false` state, and the client refreshes after hydration.
|
||||
|
||||
import { me, type User } from './api/auth';
|
||||
|
||||
class SessionStore {
|
||||
user = $state<User | null>(null);
|
||||
loaded = $state(false);
|
||||
// Bumped on every explicit setUser so an in-flight refresh started before
|
||||
// a login/logout can't clobber the fresh state when it resolves.
|
||||
private seq = 0;
|
||||
|
||||
async refresh(): Promise<void> {
|
||||
const seq = this.seq;
|
||||
try {
|
||||
const u = await me();
|
||||
if (seq === this.seq) this.user = u;
|
||||
} finally {
|
||||
this.loaded = true;
|
||||
}
|
||||
}
|
||||
|
||||
setUser(user: User | null): void {
|
||||
this.seq++;
|
||||
this.user = user;
|
||||
this.loaded = true;
|
||||
}
|
||||
}
|
||||
|
||||
export const session = new SessionStore();
|
||||
@@ -1,13 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { logout } from '$lib/api/auth';
|
||||
import { session } from '$lib/session.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
let loggingOut = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
if (!session.loaded) session.refresh();
|
||||
});
|
||||
|
||||
async function handleLogout() {
|
||||
loggingOut = true;
|
||||
try {
|
||||
await logout();
|
||||
} finally {
|
||||
session.setUser(null);
|
||||
loggingOut = false;
|
||||
goto('/login');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<nav aria-label="primary">
|
||||
<a href="/">Mangalord</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/bookmarks">Bookmarks</a>
|
||||
</nav>
|
||||
<div class="session" data-testid="session-area">
|
||||
{#if !session.loaded}
|
||||
<span data-testid="session-loading" aria-busy="true">…</span>
|
||||
{:else if session.user}
|
||||
<span data-testid="session-user">{session.user.username}</span>
|
||||
<button type="button" onclick={handleLogout} disabled={loggingOut}>
|
||||
{loggingOut ? 'Logging out…' : 'Logout'}
|
||||
</button>
|
||||
{:else}
|
||||
<a href="/login" data-testid="nav-login">Login</a>
|
||||
<a href="/register" data-testid="nav-register">Register</a>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
@@ -18,10 +52,20 @@
|
||||
header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
nav a {
|
||||
nav a,
|
||||
.session a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
main {
|
||||
padding: 1rem;
|
||||
max-width: 64rem;
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
e.preventDefault();
|
||||
load();
|
||||
}}
|
||||
action="javascript:void(0)"
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
|
||||
72
frontend/src/routes/login/+page.svelte
Normal file
72
frontend/src/routes/login/+page.svelte
Normal file
@@ -0,0 +1,72 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { login } from '$lib/api/auth';
|
||||
import { session } from '$lib/session.svelte';
|
||||
|
||||
let username = $state('');
|
||||
let password = $state('');
|
||||
let error: string | null = $state(null);
|
||||
let submitting = $state(false);
|
||||
|
||||
async function submit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = null;
|
||||
submitting = true;
|
||||
try {
|
||||
const user = await login({ username, password });
|
||||
session.setUser(user);
|
||||
await goto('/');
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
submitting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Log in</h1>
|
||||
<form onsubmit={submit} action="javascript:void(0)" data-testid="login-form">
|
||||
<label>
|
||||
Username
|
||||
<input
|
||||
type="text"
|
||||
bind:value={username}
|
||||
autocomplete="username"
|
||||
required
|
||||
data-testid="login-username"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
autocomplete="current-password"
|
||||
required
|
||||
data-testid="login-password"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" disabled={submitting} data-testid="login-submit">
|
||||
{submitting ? 'Logging in…' : 'Log in'}
|
||||
</button>
|
||||
{#if error}
|
||||
<p role="alert" data-testid="login-error">{error}</p>
|
||||
{/if}
|
||||
</form>
|
||||
<p>
|
||||
No account? <a href="/register">Register</a>.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 24rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
75
frontend/src/routes/register/+page.svelte
Normal file
75
frontend/src/routes/register/+page.svelte
Normal file
@@ -0,0 +1,75 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { register } from '$lib/api/auth';
|
||||
import { session } from '$lib/session.svelte';
|
||||
|
||||
let username = $state('');
|
||||
let password = $state('');
|
||||
let error: string | null = $state(null);
|
||||
let submitting = $state(false);
|
||||
|
||||
async function submit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = null;
|
||||
submitting = true;
|
||||
try {
|
||||
const user = await register({ username, password });
|
||||
session.setUser(user);
|
||||
await goto('/');
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
} finally {
|
||||
submitting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Register</h1>
|
||||
<form onsubmit={submit} action="javascript:void(0)" data-testid="register-form">
|
||||
<label>
|
||||
Username
|
||||
<input
|
||||
type="text"
|
||||
bind:value={username}
|
||||
autocomplete="username"
|
||||
minlength="3"
|
||||
maxlength="32"
|
||||
required
|
||||
data-testid="register-username"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
autocomplete="new-password"
|
||||
minlength="8"
|
||||
required
|
||||
data-testid="register-password"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" disabled={submitting} data-testid="register-submit">
|
||||
{submitting ? 'Registering…' : 'Register'}
|
||||
</button>
|
||||
{#if error}
|
||||
<p role="alert" data-testid="register-error">{error}</p>
|
||||
{/if}
|
||||
</form>
|
||||
<p>
|
||||
Already have an account? <a href="/login">Log in</a>.
|
||||
</p>
|
||||
|
||||
<style>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 24rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user