---
url: 'https://www.corbado.com/faq/frontend-modifications-support-passkeys'
title: 'How to modify frontend applications to support passkeys?'
description: 'Learn how to modify frontend applications to support passkeys, including UI updates and WebAuthn API integration.'
lang: 'en'
keywords: 'frontend passkey support, passkey frontend integration'
---

# How to modify frontend applications to support passkeys?

## How Should Frontend Applications Be Modified to Support Passkeys?

Supporting passkeys in a frontend application requires both UI updates and WebAuthn API
integration to enable seamless user experiences. Here’s what to consider:

### 1. Implement Passkey Options in the UI

- Add clear buttons for passkey actions, such as:
    - "Continue with Passkey" for login.
    - "[Create a Passkey](https://www.corbado.com/blog/passkey-creation-best-practices)" during onboarding.
    - "Manage Passkeys" in account settings.
- Use intuitive icons and text to explain the benefits of passkeys to users.

### 2. Integrate the WebAuthn API

- Use the Web Authentication API to handle
  [passkey creation](https://www.corbado.com/blog/passkey-creation-best-practices) and authentication flows.
    - For [passkey creation](https://www.corbado.com/blog/passkey-creation-best-practices): Call
      `navigator.credentials.create()`.
    - For passkey authentication: Use `navigator.credentials.get()`.
- Ensure the API calls are compatible across major browsers and devices.

### 3. Handle Cross-Device Compatibility

- Design flows to handle device-specific prompts for
  [passkey creation](https://www.corbado.com/blog/passkey-creation-best-practices) and authentication.
- Provide fallback options for devices or browsers that do not support passkeys.

### 4. Provide Error Feedback

- Implement robust error-handling logic to display helpful messages if a passkey creation
  or login attempt fails.
- Use generic error messages to avoid exposing
  [account enumeration risks](https://www.corbado.com/faq/mitigating-account-enumeration-risks-passkeys).

### 5. Ensure Accessibility

- Follow accessibility best practices for UI elements related to passkeys.
- Ensure passkey buttons and prompts are usable with screen readers and other assistive
  technologies.

### 6. Test the Frontend Thoroughly

- Test the passkey flows across various browsers and devices to ensure consistency.
- Use virtual [authenticators](https://www.corbado.com/glossary/authenticator) during development for thorough
  testing of edge cases.

These updates ensure a smooth, secure, and user-friendly implementation of passkeys in
your frontend application, driving higher adoption and satisfaction.

## Read the full article