Skip to main content

Passkey Settings and Confirmation

Passkey settings, registration, deletion, confirmation modal, and verification event.

What This Example Demonstrates​

This fixture covers passkey capability detection, registered credential display, settings changes, and a payment-confirmation event. It shows only credential metadata suitable for account settings; authentication ceremonies still require a standards-compliant server challenge and browser authenticator API.

How to Use It​

Treat the example payloads as UI contracts, not a complete WebAuthn implementation. The backend must create and verify challenges, validate origin and relying-party data, prevent replay, and store public-key credentials safely. A client-generated PASSKEY_VERIFIED event is not proof of authentication until the backend confirms it.

{
  "description": "Extended logical payloads for the reference commerce UI. These examples can be used as mock API responses, Storybook fixtures, or frontend integration test data.",
  "passkeySettingsPage": {
    "supportState": {
      "isSupported": true,
      "isPlatformAvailable": true,
      "loading": false
    },
    "settingsApiResponse": {
      "passkey_enabled": true,
      "credentials": [
        {
          "id": 101,
          "credential_id": "cred_01HX7PASSKEY",
          "device_name": "MacBook Touch ID",
          "created_at": "2026-06-11T09:00:00Z",
          "last_used_at": "2026-06-11T09:40:00Z"
        },
        {
          "id": 102,
          "credential_id": "cred_01HX7PHONE",
          "device_name": "iPhone Face ID",
          "created_at": "2026-06-01T14:20:00Z",
          "last_used_at": "2026-06-10T18:10:00Z"
        }
      ]
    },
    "togglePasskeyRequest": {
      "endpoint": "PUT /api/passkey/settings",
      "body": {
        "passkey_enabled": true
      }
    },
    "registerPasskeyRequest": {
      "endpoint": "POST /api/passkey/register",
      "body": {
        "credential_id": "cred_01HX7NEWPASSKEY",
        "public_key": "-----BEGIN PUBLIC KEY-----example-----END PUBLIC KEY-----",
        "device_name": "MacBook Touch ID"
      }
    },
    "deleteCredentialRequest": {
      "endpoint": "DELETE /api/passkey/101"
    },
    "PasskeyConfirmModalProps": {
      "isOpen": true,
      "title": "Passkey ile doğrula",
      "message": "Ödemeyi tamamlamak için cihazındaki passkey ile doğrulama yap.",
      "confirmText": "Doğrula",
      "cancelText": "İptal",
      "type": "warning"
    },
    "passkeyPaymentVerifiedEvent": {
      "type": "PASSKEY_VERIFIED",
      "credentialId": "cred_01HX7PASSKEY",
      "checkoutId": "chk_1234567890abcdef12345678",
      "verifiedAt": "2026-06-11T09:45:00Z"
    }
  }
}