\n Do you want to remember this device? You won't need MFA next time.\n
\n \n \nDevice Key: {deviceKey}
\n \n \n \n \n \nCreated: {new Date(credential.createdAt).toLocaleDateString()}
\n\n Last Used: {new Date(credential.lastUseDate).toLocaleDateString()}\n
\n\nNo FIDO2 credentials registered.
\n )}\n \n );\n}\n```\n\n#### FIDO2 Authentication Flow\n\n```javascript\nimport {\n prepareFido2SignIn,\n authenticateWithFido2,\n fido2CreateCredential,\n detectMediationCapabilities,\n} from \"@joinmeow/cognito-passwordless-auth\";\n\n// 1. Check if platform authenticator is available\nif (userVerifyingPlatformAuthenticatorAvailable) {\n // 2. Detect browser capabilities for enhanced WebAuthn UX\n const { conditional } = await detectMediationCapabilities();\n\n // 3. Optionally create a new credential using conditional create (autofill)\n await fido2CreateCredential({\n friendlyName: \"iPhone Face ID\",\n conditionalCreate: conditional,\n });\n\n // 4. Prepare the WebAuthn assertion (conditional mediation when supported)\n const prepared = await prepareFido2SignIn({\n username: \"user@example.com\",\n mediation: conditional ? \"conditional\" : undefined,\n // Optional: specify credentials to bias the allow list\n credentials: fido2Credentials?.map((c) => ({\n id: c.credentialId,\n transports: c.transports,\n })),\n });\n\n // 5. Complete the Cognito challenge using the prepared bundle\n const { signedIn } = await authenticateWithFido2({ prepared });\n\n await signedIn;\n}\n```\n\n> **Tip:** For advanced capability checks (e.g., detecting upcoming \"immediate\" mediation or hybrid transports), call\n> `getClientCapabilities()` directly. It returns the full WebAuthn client capabilities dictionary when supported by the\n> browser.\n\n### Local User Cache Management\n\nThe `useLocalUserCache()` hook manages a cache of recently signed-in users for improved UX:\n\n#### Setup and Usage\n\n```jsx\nimport React, { useCallback } from \"react\";\nimport {\n PasswordlessContextProvider,\n usePasswordless,\n useLocalUserCache,\n} from \"@joinmeow/cognito-passwordless-auth/react\";\n\n// 1. Enable local user cache in the provider\nfunction App() {\n return (\nEmail: {currentUser.email}
\nAuth Method: {currentUser.authMethod}
\nFIDO2 Preference: {currentUser.useFido}
\n\n \n \nStatus: {signingInStatus}
}\n \n );\n}\n```\n\n#### StoredUser Object Structure\n\n```typescript\ntype StoredUser = {\n username: string;\n email?: string;\n useFido?: \"YES\" | \"NO\" | \"ASK\";\n credentials?: { id: string; transports?: AuthenticatorTransport[] }[];\n authMethod?: \"SRP\" | \"FIDO2\" | \"PLAINTEXT\" | \"REDIRECT\";\n};\n```\n\n### Utility Hooks\n\n#### useAwaitableState\n\nConvert any state value into a promise that can be awaited:\n\n```jsx\nimport React, { useState } from \"react\";\nimport { useAwaitableState } from \"@joinmeow/cognito-passwordless-auth/react\";\n\nfunction AsyncStateExample() {\n const [data, setData] = useState(null);\n const awaitableData = useAwaitableState(data);\n const [waiting, setWaiting] = useState(false);\n\n const handleWaitForData = async () => {\n try {\n setWaiting(true);\n console.log(\"Waiting for data...\");\n\n // This will wait until data is set to a truthy value\n const result = await awaitableData.awaitable();\n console.log(\"Data received:\", result);\n } catch (error) {\n console.error(\"Waiting failed:\", error);\n } finally {\n setWaiting(false);\n }\n };\n\n const handleSetData = () => {\n setData(\"Hello World\");\n // Resolve the awaitable with the current data value\n awaitableData.resolve();\n };\n\n const handleRejectData = () => {\n awaitableData.reject(new Error(\"Data loading failed\"));\n };\n\n return (\nCurrent data: {data}
\nAwaited data: {awaitableData.awaited?.value}
\n\n \n \n \n