@mrgnw/anahtar 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mrgnw
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+# @mrgnw/anahtar
+
+> **Pre-alpha.** API may change between releases.
+
+Auth for SvelteKit. Email+OTP + optional passkeys.
+
+"Anahtar" = key (Turkish)
+
+## Auth flow
+
+1. Email -> OTP sent via your `onSendOTP` callback
+2. OTP verified -> session cookie
+3. First login -> passkey registration prompt
+4. Future logins -> passkey autofill, OTP fallback
+
+## Quick start
+
+```sh
+pnpm add @mrgnw/anahtar
+```
+
+Create your auth instance:
+
+```ts
+// src/lib/server/auth.ts
+import { createAuth } from "@mrgnw/anahtar";
+import { sqliteAdapter } from "@mrgnw/anahtar/sqlite";
+import Database from "better-sqlite3";
+
+const db = new Database("data/app.db");
+
+export const auth = createAuth({
+  db: sqliteAdapter(db),
+  onSendOTP: async (email, code) => {
+    console.log(`[dev] OTP for ${email}: ${code}`);
+  },
+});
+```
+
+Wire into SvelteKit:
+
+```ts
+// src/hooks.server.ts
+import { auth } from "$lib/server/auth";
+export const handle = auth.handle;
+```
+
+```ts
+// src/routes/api/auth/[...path]/+server.ts
+import { auth } from "$lib/server/auth";
+export const { GET, POST } = auth.handlers;
+```
+
+Optional UI component:
+
+```svelte
+<script>
+  import { AuthFlow } from '@mrgnw/anahtar/components';
+  import { goto } from '$app/navigation';
+</script>
+
+<AuthFlow onSuccess={() => goto('/')} />
+```
+
+## Tests
+
+68 tests: 46 unit (node) + 22 component (happy-dom).
+
+```sh
+pnpm test:unit
+pnpm test:browser
+pnpm test
+```
+
+## Docs
+
+- [Integration guide](docs/integration.md) — install, config, theming, Postgres setup
+- [PLAN.md](PLAN.md) — architecture, DB adapter interface, test setup

package/dist/components/AuthFlow.svelte

@@ -0,0 +1,351 @@
+<script lang="ts">
+import { onDestroy, onMount } from 'svelte';
+import { guessDeviceName } from '../device.js';
+import OtpInput from './OtpInput.svelte';
+import PasskeyPrompt from './PasskeyPrompt.svelte';
+
+interface Props {
+	apiBase?: string;
+	onSuccess?: () => void;
+}
+
+let { apiBase = '/api/auth', onSuccess }: Props = $props();
+
+let step = $state<1 | 2 | 3 | 4>(1);
+let congratsTimeout: ReturnType<typeof setTimeout> | null = null;
+let email = $state('');
+let loading = $state(false);
+let error = $state('');
+let otpInput = $state<OtpInput>();
+
+let conditionalAbort: AbortController | null = null;
+
+onMount(() => {
+	tryConditionalWebAuthn();
+});
+
+onDestroy(() => {
+	conditionalAbort?.abort();
+	if (congratsTimeout) clearTimeout(congratsTimeout);
+});
+
+async function tryConditionalWebAuthn() {
+	try {
+		const { startAuthentication } = await import('@simplewebauthn/browser');
+		const res = await fetch(`${apiBase}/passkey/login-start`);
+		if (!res.ok) return;
+		const options = await res.json();
+		conditionalAbort = new AbortController();
+		const authResponse = await startAuthentication({
+			optionsJSON: options,
+			useBrowserAutofill: true
+		});
+		const verifyRes = await fetch(`${apiBase}/passkey/login-finish`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(authResponse)
+		});
+		if (verifyRes.ok) {
+			onSuccess?.();
+		}
+	} catch {
+		// Passkey autofill not available or cancelled
+	}
+}
+
+async function handleEmailSubmit() {
+	error = '';
+	if (!email.includes('@')) {
+		error = 'Please enter a valid email address.';
+		return;
+	}
+	loading = true;
+	conditionalAbort?.abort();
+	conditionalAbort = null;
+	try {
+		const res = await fetch(`${apiBase}/start`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ email })
+		});
+		if (!res.ok) {
+			const data = await res.json().catch(() => null);
+			error = data?.error ?? `Request failed (${res.status})`;
+			return;
+		}
+		step = 2;
+	} catch {
+		error = 'Something went wrong. Please try again.';
+	} finally {
+		loading = false;
+	}
+}
+
+async function handleOtpComplete(code: string) {
+	error = '';
+	loading = true;
+	try {
+		const res = await fetch(`${apiBase}/verify`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ email, code })
+		});
+		if (!res.ok) {
+			const data = await res.json().catch(() => null);
+			error = data?.error ?? 'Invalid code. Please try again.';
+			otpInput?.clear();
+			return;
+		}
+		const data = await res.json();
+		if (data.hasPasskey || data.skipPasskeyPrompt) {
+			onSuccess?.();
+		} else {
+			step = 3;
+		}
+	} catch {
+		error = 'Something went wrong. Please try again.';
+	} finally {
+		loading = false;
+	}
+}
+
+async function resendCode() {
+	error = '';
+	loading = true;
+	try {
+		const res = await fetch(`${apiBase}/start`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ email })
+		});
+		if (!res.ok) {
+			const data = await res.json().catch(() => null);
+			error = data?.error ?? 'Failed to resend code.';
+			return;
+		}
+		otpInput?.clear();
+	} catch {
+		error = 'Something went wrong. Please try again.';
+	} finally {
+		loading = false;
+	}
+}
+
+async function handlePasskeyRegister() {
+	const { startRegistration } = await import('@simplewebauthn/browser');
+	const optRes = await fetch(`${apiBase}/passkey/register-start`, { method: 'POST' });
+	if (!optRes.ok) throw new Error('Failed to get registration options');
+	const options = await optRes.json();
+
+	const regResponse = await startRegistration({ optionsJSON: options });
+	const res = await fetch(`${apiBase}/passkey/register-finish`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ ...regResponse, name: guessDeviceName() })
+	});
+	if (!res.ok) throw new Error('Registration failed');
+	step = 4;
+	congratsTimeout = setTimeout(() => onSuccess?.(), 3000);
+}
+
+function handlePasskeySkip() {
+	fetch(`${apiBase}/skip-passkey`, { method: 'POST' });
+	onSuccess?.();
+}
+</script>
+
+<div class="anahtar-auth">
+	{#if step === 1}
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				handleEmailSubmit();
+			}}
+			class="anahtar-auth-form"
+		>
+			<input
+				type="email"
+				bind:value={email}
+				required
+				autocomplete="username webauthn"
+				placeholder="you@example.com"
+				class="anahtar-input"
+			/>
+
+			{#if error}
+				<p class="anahtar-error">{error}</p>
+			{/if}
+
+			<button type="submit" disabled={loading} class="anahtar-button">
+				{loading ? '...' : 'Continue'}
+			</button>
+		</form>
+	{:else if step === 2}
+		<div class="anahtar-otp-step">
+			<p class="anahtar-subtitle">We sent a code to</p>
+			<p class="anahtar-email">{email}</p>
+
+			<OtpInput bind:this={otpInput} onComplete={handleOtpComplete} disabled={loading} />
+
+			{#if error}
+				<p class="anahtar-error">{error}</p>
+			{/if}
+
+			{#if loading}
+				<p class="anahtar-subtitle">Verifying...</p>
+			{/if}
+
+			<div class="anahtar-links">
+				<button onclick={resendCode} disabled={loading} class="anahtar-link">
+					Didn't get it? Resend
+				</button>
+				<button
+					onclick={() => {
+						step = 1;
+						error = '';
+					}}
+					class="anahtar-link"
+				>
+					Use a different email
+				</button>
+			</div>
+		</div>
+	{:else if step === 3}
+		<PasskeyPrompt onRegister={handlePasskeyRegister} onSkip={handlePasskeySkip} />
+	{:else if step === 4}
+		<div class="anahtar-congrats">
+			<div class="anahtar-congrats-icon">
+				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="7.5" cy="15.5" r="5.5"/>
+					<path d="m11.5 12 4-4"/>
+					<path d="m15 7 2 2"/>
+					<path d="m17.5 4.5 2 2"/>
+				</svg>
+			</div>
+			<p class="anahtar-congrats-title">You're a passkey!</p>
+			<button onclick={() => onSuccess?.()} class="anahtar-button">
+				Continue
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.anahtar-auth {
+		width: 100%;
+		max-width: 24rem;
+	}
+
+	.anahtar-auth-form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.anahtar-input {
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid var(--anahtar-border, #d1d5db);
+		border-radius: 0.375rem;
+		background: var(--anahtar-bg, transparent);
+		color: var(--anahtar-fg, inherit);
+	}
+
+	.anahtar-input:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--anahtar-ring, #3b82f6);
+	}
+
+	.anahtar-button {
+		width: 100%;
+		padding: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		border-radius: 0.375rem;
+		background: var(--anahtar-primary, #3b82f6);
+		color: var(--anahtar-primary-fg, #fff);
+		border: none;
+		cursor: pointer;
+	}
+
+	.anahtar-button:hover {
+		opacity: 0.9;
+	}
+
+	.anahtar-button:disabled {
+		opacity: 0.5;
+	}
+
+	.anahtar-otp-step {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.anahtar-subtitle {
+		font-size: 0.875rem;
+		opacity: 0.6;
+	}
+
+	.anahtar-email {
+		font-size: 0.875rem;
+		font-weight: 500;
+		margin-bottom: 0.5rem;
+	}
+
+	.anahtar-error {
+		font-size: 0.875rem;
+		color: var(--anahtar-error, #ef4444);
+	}
+
+	.anahtar-links {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+	}
+
+	.anahtar-link {
+		font-size: 0.875rem;
+		opacity: 0.6;
+		background: none;
+		border: none;
+		cursor: pointer;
+		color: inherit;
+	}
+
+	.anahtar-link:hover {
+		opacity: 1;
+	}
+
+	.anahtar-link:disabled {
+		opacity: 0.3;
+	}
+
+	.anahtar-congrats {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.anahtar-congrats-icon {
+		width: 4rem;
+		height: 4rem;
+		border-radius: 50%;
+		background: var(--anahtar-primary, #3b82f6);
+		color: var(--anahtar-primary-fg, #fff);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.anahtar-congrats-title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin-bottom: 0.5rem;
+	}
+</style>

package/dist/components/AuthFlow.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    apiBase?: string;
+    onSuccess?: () => void;
+}
+declare const AuthFlow: import("svelte").Component<Props, {}, "">;
+type AuthFlow = ReturnType<typeof AuthFlow>;
+export default AuthFlow;

package/dist/components/OtpInput.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	interface Props {
+		length?: number;
+		onComplete?: (code: string) => void;
+		disabled?: boolean;
+	}
+
+	let { length = 5, onComplete, disabled = false }: Props = $props();
+
+	let digits = $state<string[]>(Array(length).fill(''));
+	let inputs = $state<HTMLInputElement[]>([]);
+
+	export function clear() {
+		digits = Array(length).fill('');
+		inputs[0]?.focus();
+	}
+
+	export function focus() {
+		inputs[0]?.focus();
+	}
+
+	function handleInput(index: number, e: Event) {
+		const input = e.target as HTMLInputElement;
+		const val = input.value.replace(/\D/g, '');
+		digits[index] = val.slice(0, 1);
+		input.value = digits[index];
+
+		if (val && index < length - 1) {
+			inputs[index + 1]?.focus();
+		}
+
+		if (digits.every((d) => d.length === 1)) {
+			onComplete?.(digits.join(''));
+		}
+	}
+
+	function handleKeydown(index: number, e: KeyboardEvent) {
+		if (e.key === 'Backspace' && !digits[index] && index > 0) {
+			inputs[index - 1]?.focus();
+		}
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		e.preventDefault();
+		const pasted = (e.clipboardData?.getData('text') ?? '').replace(/\D/g, '');
+		for (let i = 0; i < length; i++) {
+			digits[i] = pasted[i] ?? '';
+		}
+		const nextEmpty = digits.findIndex((d) => !d);
+		const focusIdx = nextEmpty === -1 ? length - 1 : nextEmpty;
+		inputs[focusIdx]?.focus();
+
+		if (digits.every((d) => d.length === 1)) {
+			onComplete?.(digits.join(''));
+		}
+	}
+</script>
+
+<div class="anahtar-otp">
+	{#each digits as _, i}
+		<input
+			bind:this={inputs[i]}
+			type="text"
+			maxlength="1"
+			inputmode="numeric"
+			value={digits[i]}
+			{disabled}
+			oninput={(e) => handleInput(i, e)}
+			onkeydown={(e) => handleKeydown(i, e)}
+			onpaste={handlePaste}
+			class="anahtar-otp-digit"
+		/>
+	{/each}
+</div>
+
+<style>
+	.anahtar-otp {
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+	}
+
+	.anahtar-otp-digit {
+		width: 2.75rem;
+		height: 3rem;
+		text-align: center;
+		font-size: 1.125rem;
+		border: 1px solid var(--anahtar-border, #d1d5db);
+		border-radius: 0.375rem;
+		background: var(--anahtar-bg, transparent);
+		color: var(--anahtar-fg, inherit);
+	}
+
+	.anahtar-otp-digit:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--anahtar-ring, #3b82f6);
+	}
+
+	.anahtar-otp-digit:disabled {
+		opacity: 0.5;
+	}
+</style>

package/dist/components/OtpInput.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    length?: number;
+    onComplete?: (code: string) => void;
+    disabled?: boolean;
+}
+declare const OtpInput: import("svelte").Component<Props, {
+    clear: () => void;
+    focus: () => void;
+}, "">;
+type OtpInput = ReturnType<typeof OtpInput>;
+export default OtpInput;