import { useEffect, useState } from "react"; // Passkeys component for Framer.io export default function PasskeyComponent() { const [username, setUsername] = useState(""); const [isRegistered, setIsRegistered] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false); // Register new user const registerWithPasskey = async () => { try { const response = await fetch("https://your-backend-server/register", { method: "POST", body: JSON.stringify({ username }), headers: { "Content-Type": "application/json" }, }); const options = await response.json(); const credential = await navigator.credentials.create(options); await fetch("https://your-backend-server/register/response", { method: "POST", body: JSON.stringify(credential), headers: { "Content-Type": "application/json" }, }); setIsRegistered(true); alert("Registration successful!"); } catch (error) { console.error("Registration failed:", error); alert("Registration failed."); } }; // Authenticate existing user const authenticateWithPasskey = async () => { try { const response = await fetch("https://your-backend-server/authenticate", { method: "POST", body: JSON.stringify({ username }), headers: { "Content-Type": "application/json" }, }); const options = await response.json(); const assertion = await navigator.credentials.get(options); await fetch("https://your-backend-server/authenticate/response", { method: "POST", body: JSON.stringify(assertion), headers: { "Content-Type": "application/json" }, }); setIsAuthenticated(true); alert("Authentication successful!"); } catch (error) { console.error("Authentication failed:", error); alert("Authentication failed."); } }; return (