Add use page

src/data/webauthn.ts

@@ -1,19 +1,25 @@
+function createChallenge() {
+    const challenge = new Uint8Array(256);
+    crypto.getRandomValues(challenge);
+    return challenge;
+}
+
 export async function webauthnCreate() {
     const userId = new Uint8Array(8);
     crypto.getRandomValues(userId);
 
-    const challenge = new Uint8Array(256);
+    const challenge = createChallenge();
-    crypto.getRandomValues(challenge);
 
     const credential = await navigator.credentials.create({
         publicKey: {
             challenge,
-            rp: { id: location.host, name: "NativeKey (Demo)" },
+            rp: { id: location.host, name: "NativeKey Demo" },
             user: {
                 id: userId,
                 name: "Test User",
                 displayName: "Test User",
             },
+            attestation: "none",
             pubKeyCredParams: [
                 {
                     type: "public-key",
@@ -25,11 +31,23 @@ export async function webauthnCreate() {
                 },
             ],
             authenticatorSelection: {
-                userVerification: "required",
                 residentKey: "required",
+                userVerification: "preferred",
             },
         },
     });
 
     console.log(credential);
 }
+
+export async function webauthnUse() {
+    const credential = await navigator.credentials.get({
+        publicKey: {
+            challenge: createChallenge(),
+            rpId: location.host,
+            userVerification: "preferred",
+        },
+    });
+
+    console.log(credential);
+}

src/pages/use.tsx

@@ -0,0 +1,23 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "../components/Button";
+import Heading from "../components/Heading";
+import { faFingerprint } from "@fortawesome/free-solid-svg-icons";
+import { useCallback } from "react";
+import { webauthnUse } from "../data/webauthn";
+
+export default function UsePage() {
+    const onUseClick = useCallback(async () => {
+        await webauthnUse();
+    }, []);
+
+    return (
+        <>
+            <Heading>Sign in to RandomSite</Heading>
+
+            <Button onClick={onUseClick} className="mt-4">
+                <FontAwesomeIcon icon={faFingerprint} className="me-4" />
+                Sign in with your passkey
+            </Button>
+        </>
+    );
+}

src/router.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Outlet, Route, Routes } from "react-router";
 import CreatePage from "./pages/create";
 import Container from "./components/Container";
+import UsePage from "./pages/use";
 
 export default function Router() {
     return (
@@ -15,6 +16,7 @@ export default function Router() {
                     }
                 >
                     <Route path="/create" element={<CreatePage />} />
+                    <Route path="/use" element={<UsePage />} />
                 </Route>
             </Routes>
         </BrowserRouter>