admin/task-team
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

WebAuthn biometric UI: login button + device management in settings

Browse Source 
- Login page: "Face ID / Otisk prstu" button with full WebAuthn flow
  (auth options → navigator.credentials.get → verify → JWT)
  Remembers last biometric email in localStorage
- Settings page: Biometric device management section
  (list registered devices, add new via navigator.credentials.create, remove)
  Auto-detects device type (Face ID, Touch ID, Android fingerprint, Windows Hello)
- API: Added POST /webauthn/auth/verify endpoint returning JWT token
  Updated auth/options to accept email (no login required for biometric)
- API client: Added 6 WebAuthn helper functions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-30 11:41:38 +00:00
parent 4ace4d5f7d
commit 1fbbc84d24
4 changed files with 331 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
apps/tasks/app/login/page.tsx
View File

@@ -1,9 +1,9 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { login } from "@/lib/api";
import { login, webauthnAuthOptions, webauthnAuthVerify } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import { useTranslation } from "@/lib/i18n";
@@ -12,11 +12,26 @@ export default function LoginPage() {
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [loading, setLoading] = useState(false);
const [biometricLoading, setBiometricLoading] = useState(false);
const [error, setError] = useState("");
const [biometricAvailable, setBiometricAvailable] = useState(false);
const [savedEmail, setSavedEmail] = useState("");
const { setAuth } = useAuth();
const { t } = useTranslation();
const router = useRouter();
useEffect(() => {
// Check if WebAuthn is available
if (typeof window !== "undefined" && window.PublicKeyCredential) {
window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable?.()
.then(available => setBiometricAvailable(available))
.catch(() => {});
}
// Load last used email for biometric
const last = localStorage.getItem("taskteam_biometric_email");
if (last) setSavedEmail(last);
}, []);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!email.trim()) {
@@ -36,6 +51,57 @@ export default function LoginPage() {
}
}
async function handleBiometricLogin() {
const biometricEmail = email.trim() || savedEmail;
if (!biometricEmail) {
setError("Zadejte email pro biometricke prihlaseni");
return;
}
setBiometricLoading(true);
setError("");
try {
// Get auth options from server
const optionsRes = await webauthnAuthOptions(biometricEmail);
const options = optionsRes.data;
// Create PublicKey credential request
const allowCredentials = (options.allowCredentials as Array<{ id: string; type: string }>).map(cred => ({
id: base64urlToBuffer(cred.id),
type: cred.type as PublicKeyCredentialType,
}));
const credential = await navigator.credentials.get({
publicKey: {
challenge: base64urlToBuffer(options.challenge as string),
allowCredentials,
timeout: 60000,
userVerification: "required" as UserVerificationRequirement,
},
}) as PublicKeyCredential;
if (!credential) throw new Error("Biometricke overeni selhalo");
// Send credential_id to server to get JWT
const credentialId = bufferToBase64url(credential.rawId);
const result = await webauthnAuthVerify(credentialId);
// Save email for next time
localStorage.setItem("taskteam_biometric_email", biometricEmail);
setAuth(result.data.token, result.data.user);
router.push("/tasks");
} catch (err) {
const msg = err instanceof Error ? err.message : "Biometricke prihlaseni selhalo";
if (msg.includes("No biometric") || msg.includes("not found")) {
setError("Pro tento ucet neni nastaveno biometricke prihlaseni. Nastavte ho v Nastaveni.");
} else {
setError(msg);
}
} finally {
setBiometricLoading(false);
}
}
return (
<div className="min-h-[70vh] flex items-center justify-center">
<div className="w-full max-w-sm">
@@ -93,6 +159,35 @@ export default function LoginPage() {
</button>
</form>
{/* Biometric Login */}
{biometricAvailable && (
<>
<div className="flex items-center gap-3 my-4">
<div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
<span className="text-xs text-gray-400 uppercase">nebo</span>
<div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
</div>
<button
onClick={handleBiometricLogin}
disabled={biometricLoading}
className="w-full flex items-center justify-center gap-3 py-2.5 px-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-500 transition-colors disabled:opacity-50 bg-gray-50 dark:bg-gray-800/50"
>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="text-blue-600 dark:text-blue-400">
<path strokeLinecap="round" strokeLinejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a48.667 48.667 0 00-1.418 8.773M11.997 3.001A7.5 7.5 0 0014.5 10.5c0 2.887-.543 5.649-1.533 8.19M9.003 3.001a7.5 7.5 0 00-2.497 7.499 48.12 48.12 0 01-.544 5M12 10.5a2.25 2.25 0 10-4.5 0 2.25 2.25 0 004.5 0z" />
</svg>
<span className="font-medium text-sm">
{biometricLoading ? "Overuji..." : "Face ID / Otisk prstu"}
</span>
</button>
{savedEmail && !email && (
<p className="text-xs text-gray-400 text-center mt-2">
Posledni ucet: {savedEmail}
</p>
)}
</>
)}
<div className="mt-4 text-center">
<Link href="/forgot-password" className="text-sm text-blue-600 hover:underline">
{t("auth.forgotPassword")}
@@ -110,3 +205,20 @@ export default function LoginPage() {
</div>
);
}
// --- WebAuthn buffer helpers ---
function base64urlToBuffer(base64url: string): ArrayBuffer {
const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
const pad = base64.length % 4 === 0 ? "" : "=".repeat(4 - (base64.length % 4));
const binary = atob(base64 + pad);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
return bytes.buffer;
}
function bufferToBase64url(buffer: ArrayBuffer): string {
const bytes = new Uint8Array(buffer);
let binary = "";
for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

156
apps/tasks/app/settings/page.tsx
View File

@@ -7,6 +7,7 @@ import { useTheme } from "@/components/ThemeProvider";
import { useTranslation, LOCALES } from "@/lib/i18n";
import type { Locale } from "@/lib/i18n";
import type { Group } from "@/lib/api";
import { webauthnRegisterOptions, webauthnRegisterVerify, webauthnGetDevices, webauthnDeleteDevice } from "@/lib/api";
import Link from "next/link";
type WidgetType = "current_tasks" | "category_time" | "today_progress" | "next_task" | "motivace" | "calendar_mini";
@@ -53,6 +54,9 @@ export default function SettingsPage() {
});
const [inactivityTimeout, setInactivityTimeout] = useState(5);
const [widgetSaved, setWidgetSaved] = useState(false);
const [biometricDevices, setBiometricDevices] = useState<Array<{ id: string; device_name: string; created_at: string }>>([]);
const [biometricAvailable, setBiometricAvailable] = useState(false);
const [biometricLoading, setBiometricLoading] = useState(false);
useEffect(() => {
if (!token) {
@@ -85,6 +89,21 @@ export default function SettingsPage() {
}
}, [token, router]);
// Check biometric availability and load devices
useEffect(() => {
if (typeof window !== "undefined" && window.PublicKeyCredential) {
window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable?.()
.then(available => setBiometricAvailable(available))
.catch(() => {});
}
}, []);
useEffect(() => {
if (token && user?.id) {
webauthnGetDevices(token, user.id).then(res => setBiometricDevices(res.data || [])).catch(() => {});
}
}, [token, user]);
useEffect(() => {
if (!token) return;
fetch("/api/v1/groups", { headers: { Authorization: `Bearer ${token}` } })
@@ -163,6 +182,80 @@ export default function SettingsPage() {
setTimeout(() => setSavedGroup(null), 2000);
}
async function addBiometricDevice() {
if (!token || !user?.id) return;
setBiometricLoading(true);
try {
const optionsRes = await webauthnRegisterOptions(token, user.id);
const options = optionsRes.data;
const credential = await navigator.credentials.create({
publicKey: {
challenge: base64urlToBuffer(options.challenge as string),
rp: options.rp as { name: string; id: string },
user: {
id: base64urlToBuffer((options.user as { id: string }).id),
name: (options.user as { name: string }).name,
displayName: (options.user as { displayName: string }).displayName,
},
pubKeyCredParams: (options.pubKeyCredParams as Array<{ alg: number; type: string }>).map(p => ({
alg: p.alg,
type: p.type as PublicKeyCredentialType,
})),
authenticatorSelection: {
authenticatorAttachment: "platform" as AuthenticatorAttachment,
userVerification: "required" as UserVerificationRequirement,
},
timeout: 60000,
},
}) as PublicKeyCredential;
if (!credential) throw new Error("Registrace selhala");
const credentialId = bufferToBase64url(credential.rawId);
const response = credential.response as AuthenticatorAttestationResponse;
const publicKey = bufferToBase64url(response.getPublicKey?.() || response.attestationObject);
// Detect device name
const ua = navigator.userAgent;
let deviceName = "Biometric";
if (/iPhone|iPad/.test(ua)) deviceName = "Face ID (iOS)";
else if (/Mac/.test(ua)) deviceName = "Touch ID (Mac)";
else if (/Android/.test(ua)) deviceName = "Otisk prstu (Android)";
else if (/Windows/.test(ua)) deviceName = "Windows Hello";
await webauthnRegisterVerify(token, {
user_id: user.id,
credential_id: credentialId,
public_key: publicKey,
device_name: deviceName,
});
// Save email for biometric login
localStorage.setItem("taskteam_biometric_email", user.email || "");
// Refresh device list
const devRes = await webauthnGetDevices(token, user.id);
setBiometricDevices(devRes.data || []);
} catch (err) {
console.error("WebAuthn registration error:", err);
alert(err instanceof Error ? err.message : "Registrace biometrie selhala");
} finally {
setBiometricLoading(false);
}
}
async function removeBiometricDevice(deviceId: string) {
if (!token || !user?.id) return;
if (!confirm("Opravdu odebrat toto zarizeni?")) return;
try {
await webauthnDeleteDevice(token, deviceId);
setBiometricDevices(prev => prev.filter(d => d.id !== deviceId));
} catch {
alert("Nepodarilo se odebrat zarizeni");
}
}
function toggleWidget(key: WidgetType) {
setWidgetEnabled(prev => ({ ...prev, [key]: !prev[key] }));
}
@@ -208,6 +301,52 @@ export default function SettingsPage() {
</div>
</div>
{/* Biometric auth section */}
{biometricAvailable && (
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
<h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">Biometricke prihlaseni</h2>
{biometricDevices.length > 0 ? (
<div className="space-y-2 mb-4">
{biometricDevices.map(device => (
<div key={device.id} className="flex items-center justify-between py-3 px-3 bg-gray-50 dark:bg-gray-800 rounded-xl">
<div className="flex items-center gap-3">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="text-blue-500">
<path strokeLinecap="round" strokeLinejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a48.667 48.667 0 00-1.418 8.773M11.997 3.001A7.5 7.5 0 0014.5 10.5c0 2.887-.543 5.649-1.533 8.19M9.003 3.001a7.5 7.5 0 00-2.497 7.499 48.12 48.12 0 01-.544 5M12 10.5a2.25 2.25 0 10-4.5 0 2.25 2.25 0 004.5 0z" />
</svg>
<div>
<div className="text-sm font-medium">{device.device_name}</div>
<div className="text-xs text-gray-400">
{new Date(device.created_at).toLocaleDateString("cs-CZ", { day: "numeric", month: "short", year: "numeric" })}
</div>
</div>
</div>
<button
onClick={() => removeBiometricDevice(device.id)}
className="text-xs text-red-500 hover:text-red-600 font-medium px-2 py-1"
>
Odebrat
</button>
</div>
))}
</div>
) : (
<p className="text-sm text-gray-400 mb-4">Zadne zarizeni zatim nebylo pridano.</p>
)}
<button
onClick={addBiometricDevice}
disabled={biometricLoading}
className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 transition-colors disabled:opacity-50 text-sm font-medium"
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="text-blue-500">
<path strokeLinecap="round" strokeLinejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a48.667 48.667 0 00-1.418 8.773M12 10.5a2.25 2.25 0 10-4.5 0 2.25 2.25 0 004.5 0z" />
</svg>
{biometricLoading ? "Registruji..." : "Pridat Face ID / otisk prstu"}
</button>
</div>
)}
{/* Install section */}
<section id="install" className="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
<h2 className="font-semibold mb-3">{t("settings.install") || "Instalace"}</h2>
@@ -539,3 +678,20 @@ export default function SettingsPage() {
</div>
);
}
// --- WebAuthn buffer helpers ---
function base64urlToBuffer(base64url: string): ArrayBuffer {
const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
const pad = base64.length % 4 === 0 ? "" : "=".repeat(4 - (base64.length % 4));
const binary = atob(base64 + pad);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
return bytes.buffer;
}
function bufferToBase64url(buffer: ArrayBuffer): string {
const bytes = new Uint8Array(buffer);
let binary = "";
for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

33
apps/tasks/lib/api.ts
View File

@@ -53,6 +53,39 @@ export function getMe(token: string) {
return apiFetch<{ user: User }>("/api/v1/auth/me", { token });
}
// WebAuthn
export function webauthnRegisterOptions(token: string, userId: string) {
return apiFetch<{ data: Record<string, unknown> }>("/api/v1/webauthn/register/options", {
method: "POST", token, body: { user_id: userId },
});
}
export function webauthnRegisterVerify(token: string, data: { user_id: string; credential_id: string; public_key: string; device_name: string }) {
return apiFetch<{ data: Record<string, unknown>; status: string }>("/api/v1/webauthn/register/verify", {
method: "POST", token, body: data,
});
}
export function webauthnAuthOptions(email: string) {
return apiFetch<{ data: Record<string, unknown> }>("/api/v1/webauthn/auth/options", {
method: "POST", body: { email },
});
}
export function webauthnAuthVerify(credentialId: string) {
return apiFetch<{ data: { token: string; user: User } }>("/api/v1/webauthn/auth/verify", {
method: "POST", body: { credential_id: credentialId },
});
}
export function webauthnGetDevices(token: string, userId: string) {
return apiFetch<{ data: Array<{ id: string; device_name: string; created_at: string }> }>(`/api/v1/webauthn/devices/${userId}`, { token });
}
export function webauthnDeleteDevice(token: string, deviceId: string) {
return apiFetch<{ status: string }>(`/api/v1/webauthn/devices/${deviceId}`, { method: "DELETE", token });
}
// Tasks
export function getTasks(token: string, params?: Record<string, string>) {
const qs = params ? "?" + new URLSearchParams(params).toString() : "";