WebAuthn biometric UI: login button + device management in settings
- 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:
@@ -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(/=+$/, "");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user