Capacitor Passkeys Plugin

Capacitor plugin to create and authenticate with passkeys based on the WebAuthn standard.

Features

The Capacitor Passkeys plugin is one of the most complete passkey authentication solutions for Capacitor apps. Here are some of the key features:

• 🔐 Passkey creation: Register new passkeys with the platform authenticator.
• 🔑 Passkey authentication: Authenticate users with their existing passkeys.
• 🌐 WebAuthn standard: Uses the WebAuthn JSON serialization so any WebAuthn server library works unchanged.
• 📱 Availability check: Check if passkeys are available on the device.
• 🖥️ Web support: Full web support via the native WebAuthn browser API.
• 🤝 Compatibility: Works alongside the Biometrics and OAuth plugins.
• 📦 CocoaPods & SPM: Supports CocoaPods and Swift Package Manager for iOS.
• 🔁 Up-to-date: Always supports the latest Capacitor version.

Missing a feature? Just open an issue and we'll take a look!

Use Cases

The Passkeys plugin is typically used to modernize the authentication of an app, for example:

• Passwordless sign-in: Let users authenticate with a passkey instead of typing a password.
• Passkey enrollment: Let existing users register a passkey for their account after they signed in with their current credentials.
• Progressive enhancement: Check with isAvailable() whether passkeys are supported on the device and offer them as an alternative to your existing login.
• Server integration: Pass the options and results of any WebAuthn server library through unchanged, thanks to the WebAuthn JSON serialization.

Compatibility

Installation

You can use our AI-Assisted Setup to install the plugin. Add the Capawesome Skills to your AI tool using the following command:

npx skills add capawesome-team/skills --skill capacitor-plugins

Then use the following prompt:

 Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-passkeys` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

npm install @capawesome/capacitor-passkeys
npx cap sync

Android

On Android, passkeys are supported on Android 9 (API level 28) and higher with an available credential provider (e.g. Google Password Manager).

Variables

This plugin will use the following project variables (defined in your app’s variables.gradle file):

• $androidxCredentialsVersion version of androidx.credentials:credentials and androidx.credentials:credentials-play-services-auth (default: 1.5.0)

Digital Asset Links

Your app must be associated with the domain of the relying party (rp.id / rpId) using Digital Asset Links. For this, host a JSON file at https://<your-domain>/.well-known/assetlinks.json that delegates the common.get_login_creds permission to your app:

[
  {
    "relation": [
      "delegate_permission/common.handle_all_urls",
      "delegate_permission/common.get_login_creds"
    ],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.app",
      "sha256_cert_fingerprints": [
        "01:23:45:67:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF:01:23:45:67:89:AB:CD:EF"
      ]
    }
  }
]

Replace com.example.app with the application ID of your app and the fingerprint with the SHA-256 fingerprint of your app's signing certificate. Otherwise, the plugin methods will reject with the DOMAIN_NOT_ASSOCIATED error code.

iOS

On iOS, passkeys are supported on iOS 15 and higher.

Associated Domains

Your app must be associated with the domain of the relying party (rp.id / rpId). For this, add the Associated Domains capability with the webcredentials service type to your app:

<key>com.apple.developer.associated-domains</key>
<array>
  <string>webcredentials:example.com</string>
</array>

Additionally, host an apple-app-site-association file at https://<your-domain>/.well-known/apple-app-site-association:

{
  "webcredentials": {
    "apps": ["TEAMID.com.example.app"]
  }
}

Replace TEAMID with your Apple Developer Team ID and com.example.app with the bundle identifier of your app. Otherwise, the plugin methods will reject with the DOMAIN_NOT_ASSOCIATED error code.

Configuration

No configuration required for this plugin.

Usage

The following examples show how to create a new passkey, authenticate with an existing passkey, and check whether passkeys are available on the device.

Create a new passkey

Register a new passkey for a user account. In a real app, the options must be provided by your WebAuthn server, and the result must be passed back to it for verification:

import { Passkeys } from '@capawesome/capacitor-passkeys';

const createPasskey = async () => {
  // In a real app, the options must be provided by your WebAuthn server,
  // e.g. via `generateRegistrationOptions()` from SimpleWebAuthn.
  const result = await Passkeys.createPasskey({
    attestation: 'none',
    authenticatorSelection: {
      residentKey: 'required',
      userVerification: 'required',
    },
    challenge: 'dGhpc2lzYWNoYWxsZW5nZQ',
    pubKeyCredParams: [
      { alg: -7, type: 'public-key' },
      { alg: -257, type: 'public-key' },
    ],
    rp: { id: 'example.com', name: 'Example Inc.' },
    user: {
      displayName: 'Jane Doe',
      id: 'anVzdGFyYW5kb21pZA',
      name: '[email protected]',
    },
  });
  // Pass the result to your WebAuthn server for verification,
  // e.g. via `verifyRegistrationResponse()` from SimpleWebAuthn.
  return result;
};

Authenticate with an existing passkey

Sign a user in with a passkey that was previously created for your relying party. Again, the options come from your WebAuthn server and the result is verified by it:

import { Passkeys } from '@capawesome/capacitor-passkeys';

const getPasskey = async () => {
  // In a real app, the options must be provided by your WebAuthn server,
  // e.g. via `generateAuthenticationOptions()` from SimpleWebAuthn.
  const result = await Passkeys.getPasskey({
    challenge: 'dGhpc2lzYWNoYWxsZW5nZQ',
    rpId: 'example.com',
    userVerification: 'required',
  });
  // Pass the result to your WebAuthn server for verification,
  // e.g. via `verifyAuthenticationResponse()` from SimpleWebAuthn.
  return result;
};

Check if passkeys are available

Check whether passkeys are available on the device before offering them in your login UI. On Android, this returns true if the device runs Android 9 (API level 28) or higher. On iOS, this always returns true. On Web, this returns true if the browser supports WebAuthn and a user-verifying platform authenticator is available:

import { Passkeys } from '@capawesome/capacitor-passkeys';

const isAvailable = async () => {
  const { available } = await Passkeys.isAvailable();
  return available;
};

API

• createPasskey(...)
• getPasskey(...)
• isAvailable()
• Interfaces
• Type Aliases

createPasskey(...)

createPasskey(options: CreatePasskeyOptions) => Promise<CreatePasskeyResult>

Create (register) a new passkey.

The options mirror the WebAuthn PublicKeyCredentialCreationOptions JSON serialization so that the values provided by any WebAuthn server library can be passed through unchanged.

Returns: Promise<CreatePasskeyResult>

Since: 0.1.0

getPasskey(...)

getPasskey(options: GetPasskeyOptions) => Promise<GetPasskeyResult>

Get (authenticate with) an existing passkey.

The options mirror the WebAuthn PublicKeyCredentialRequestOptions JSON serialization so that the values provided by any WebAuthn server library can be passed through unchanged.

Returns: Promise<GetPasskeyResult>

Since: 0.1.0

isAvailable()

isAvailable() => Promise<IsAvailableResult>

Check if passkeys are available on this device.

On Android, this returns true if the device runs Android 9 (API level 28) or higher. On iOS, this always returns true. On Web, this returns true if the browser supports WebAuthn and a user-verifying platform authenticator is available.

Returns: Promise<IsAvailableResult>

Since: 0.1.0

Interfaces

CreatePasskeyResult

The result of the passkey creation.

This mirrors the WebAuthn RegistrationResponseJSON so it can be passed to any WebAuthn server library for verification.

CreatePasskeyResponse

The response of the authenticator for the registration of a new passkey.

This mirrors the WebAuthn AuthenticatorAttestationResponse JSON serialization.

CreatePasskeyOptions

PasskeyAuthenticatorSelection

Criteria that the authenticator must meet to create a passkey.

PasskeyCredentialDescriptor

A descriptor that identifies a specific credential.

PasskeyCredentialParameter

A public key credential type and algorithm that the relying party server supports.

PasskeyRelyingParty

The relying party for which a passkey is created.

PasskeyUser

The user account for which a passkey is created.

GetPasskeyResult

The result of the passkey authentication.

This mirrors the WebAuthn AuthenticationResponseJSON so it can be passed to any WebAuthn server library for verification.

GetPasskeyResponse

The response of the authenticator for the authentication with an existing passkey.

This mirrors the WebAuthn AuthenticatorAssertionResponse JSON serialization.

GetPasskeyOptions

IsAvailableResult

Type Aliases

PasskeyAuthenticatorAttachment

The authenticator attachment modality.

'cross-platform' | 'platform'

PasskeyTransport

A transport that an authenticator supports.

'ble' | 'hybrid' | 'internal' | 'nfc' | 'smart-card' | 'usb'

PasskeyAttestation

The attestation conveyance preference.

'direct' | 'enterprise' | 'indirect' | 'none'

PasskeyResidentKey

The extent to which the relying party desires to create a discoverable credential (passkey).

'discouraged' | 'preferred' | 'required'

PasskeyUserVerification

The user verification requirement.

• discouraged: The relying party prefers no user verification.
• preferred: The relying party prefers user verification but will not fail the operation without it.
• required: The relying party requires user verification.

'discouraged' | 'preferred' | 'required'

Testing

Keep the following in mind when testing your passkey integration:

• Real device recommended: Test on a real device with a screen lock set up. On iOS, the Simulator supports passkeys since iOS 16. On Android, the Emulator requires Google Play services and a Google account with Google Password Manager set up.
• WebAuthn server: The challenges in this plugin's examples are only placeholders. In production, the options must be generated and the results must be verified by a WebAuthn server library such as SimpleWebAuthn (Node.js) or java-webauthn-server (Java).
• Domain association: The relying party ID must be associated with your app (see the Installation section). Domain association changes can take some time to propagate, as the files are cached by Apple and Google.

Limitations

Conditional UI (passkey autofill) is not supported by this plugin. The operating system autofill integrations target native text fields, not HTML inputs in a web view.

FAQ

How is this plugin different from other similar plugins?

It implements the full WebAuthn standard using the JSON serialization, so the options and results from any WebAuthn server library pass through unchanged on Android, iOS, and the Web. Passkey creation, authentication, and an isAvailable() capability check are all covered through a fully typed, actively maintained API. If you only need a local face or fingerprint check, a simpler biometric setup is enough; if you want to replace passwords with server-verified passkeys across every platform, this plugin is designed for exactly that.

Why do the plugin methods reject with the DOMAIN_NOT_ASSOCIATED error code?

This error means that your app is not associated with the domain of the relying party (rp.id / rpId). On Android, you must host a Digital Asset Links file at https://<your-domain>/.well-known/assetlinks.json that delegates the common.get_login_creds permission to your app. On iOS, you must add the Associated Domains capability with the webcredentials service type and host a matching apple-app-site-association file. See the Installation section for the details. Also keep in mind that changes to these files can take some time to propagate, as they are cached by Apple and Google.

Do I need my own WebAuthn server to use this plugin?

Yes. The challenges shown in the examples are only placeholders. In production, the options for createPasskey(...) and getPasskey(...) must be generated by a WebAuthn server, and the results must be verified by it, for example with a library such as SimpleWebAuthn. Since the plugin uses the WebAuthn JSON serialization, any WebAuthn server library works unchanged.

Which devices support passkeys?

On Android, passkeys are supported on Android 9 (API level 28) and higher with an available credential provider such as Google Password Manager. On iOS, passkeys are supported on iOS 15 and higher. On the web, passkeys are supported in browsers that implement WebAuthn with a user-verifying platform authenticator. Use the isAvailable() method to check the availability at runtime.

Does this plugin support passkey autofill (Conditional UI)?

No, Conditional UI is not supported. The operating system autofill integrations target native text fields, not HTML inputs in a web view. See the Limitations section for more details.

What is the difference between this plugin and the Biometrics plugin?

The Biometrics plugin performs a local biometric check (e.g. face or fingerprint recognition) on the device, for example to protect a screen inside your app. The Passkeys plugin implements the WebAuthn standard, where the authentication is cryptographically verified by your server, making it suitable to replace password-based sign-in entirely.

Can I use this plugin with Ionic, React, Vue or Angular?

Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.

Related Plugins

• Biometrics: Request biometric authentication, such as face or fingerprint recognition.
• OAuth: Communicate with OAuth 2.0 and OpenID Connect providers.
• Password Autofill: Save passwords to the platform credential store.
• Secure Preferences: Securely store key/value pairs such as passwords or tokens.

Newsletter

Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our Capawesome Newsletter.

Changelog

See CHANGELOG.md.

License

See LICENSE.