persist passkey

examples/safe-4337-passkeys/src/App.tsx

@@ -1,31 +1,21 @@
-import { useState } from "react"
-import ConnectButton from "./components/ConnectButton"
 import safeLogo from "/safe-logo.svg"
-import { createPasskey, isLocalStoragePasskey, toLocalStorageFormat } from "./logic/passkeys.ts"
+import { PasskeyLocalStorageFormat, createPasskey, toLocalStorageFormat } from "./logic/passkeys.ts"
 import "./App.css"
-import { setItem } from "./logic/storage.ts"
+import { useLocalStorageState } from "./hooks/useLocalStorageState.ts"
 
 const PASSKEY_LOCALSTORAGE_KEY = "passkeyId"
 
 function App() {
-  const [savedPasskey] = useState(() => {
-    const savedData = localStorage.getItem("data")
-    if (!savedData) {
-      return null
-    }
-
-    const savedDataJson = JSON.parse(savedData)
-    if (isLocalStoragePasskey(savedDataJson)) {
-      return savedDataJson
-    }
-
-    return null
-  })
+  const [passkey, setPasskey] = useLocalStorageState<PasskeyLocalStorageFormat | null>(
+    PASSKEY_LOCALSTORAGE_KEY,
+    null
+  )
 
   const handleCreatePasskeyClick = async () => {
     const passkey = await createPasskey()
+    console.log({ passkey })
 
-    setItem(PASSKEY_LOCALSTORAGE_KEY, toLocalStorageFormat(passkey))
+    setPasskey(toLocalStorageFormat(passkey))
   }
 
   return (
@@ -36,12 +26,25 @@ function App() {
         </a>
       </div>
       <h1>Safe + 4337 + Passkeys demo</h1>
-      <div className="card">
+      {/* <div className="card">
         <ConnectButton />
-      </div>
-      <div className="card">
-        <button onClick={handleCreatePasskeyClick}>Create Passkey</button>
-      </div>
+      </div> */}
+
+      {passkey ? (
+        <div className="card">
+          <p>
+            Passkey ID: {passkey.rawId}
+            <br />
+            Passkey X: {passkey.pubkeyCoordinates.x}
+            <br />
+            Passkey Y: {passkey.pubkeyCoordinates.y}
+          </p>
+        </div>
+      ) : (
+        <div className="card">
+          <button onClick={handleCreatePasskeyClick}>Create Passkey</button>
+        </div>
+      )}
     </>
   )
 }

examples/safe-4337-passkeys/src/hooks/useLocalStorageState.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react"
+import { setItem, getItem } from "../logic/storage.ts"
+
+/**
+ * Custom hook that manages state in local storage.
+ *
+ * @template T - The type of the state value.
+ * @param {string} key - The key used to store the state value in local storage.
+ * @param {T} initialValue - The initial value of the state.
+ * @returns {[T, React.Dispatch<React.SetStateAction<T>>]} - An array containing the current state value and a function to update the state.
+ */
+function useLocalStorageState<T>(
+  key: string,
+  initialValue: T
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [state, setState] = useState<T>(() => {
+    const storedValue = getItem(key)
+
+    if (storedValue) {
+      try {
+        return JSON.parse(storedValue) as T
+      } catch {
+        // trick eslint with a no-op
+      }
+    }
+
+    return initialValue
+  })
+
+  useEffect(() => {
+    setItem(key, JSON.stringify(state))
+  }, [key, state])
+
+  return [state, setState]
+}
+
+export { useLocalStorageState }

examples/safe-4337-passkeys/src/logic/passkeys.ts

@@ -71,13 +71,15 @@ async function createPasskey(): Promise<PasskeyCredentialWithPubkeyCoordinates>
   }
 
   // Create a PasskeyCredentialWithPubkeyCoordinates object
-  const passkeyWithCoordinates: PasskeyCredentialWithPubkeyCoordinates = Object.assign({
-    pubkeyCoordinates: {
-      x: Buffer.from(exportedKeyWithXYCoordinates.x, "base64").toString("hex"),
-      y: Buffer.from(exportedKeyWithXYCoordinates.y, "base64").toString("hex"),
-    },
+  const passkeyWithCoordinates: PasskeyCredentialWithPubkeyCoordinates = Object.assign(
     passkeyCredential,
-  })
+    {
+      pubkeyCoordinates: {
+        x: Buffer.from(exportedKeyWithXYCoordinates.x, "base64").toString("hex"),
+        y: Buffer.from(exportedKeyWithXYCoordinates.y, "base64").toString("hex"),
+      },
+    }
+  )
 
   return passkeyWithCoordinates
 }