šŸ“ Sign Up | šŸ” Log In

← Root | ↑ Up

ā”Œā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā” │ šŸ“„ shadcn/directory/clerk/clerk-docs/reference/expo/passkeys │ ā””ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”˜

╔══════════════════════════════════════════════════════════════════════════════════════════════╗
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘

title: Configure passkeys for Expo description: Learn how to configure passkeys for your Expo application. sdk: expo

Passkeys are a secure, passwordless authentication method that use biometrics and a physical device to authenticate users. This guide shows you how to configure passkeys for your Expo application.

[!WARNING] This API is available only for @clerk/clerk-expo >=2.2.0.

<Steps> ## Enable passkeys

To use passkeys, first enable the strategy in the Clerk Dashboard.

Configure passkeys

Use the following tabs to configure your passkeys for iOS or Android.

<Tabs items={['iOS', 'Android']}> <Tab> > [!WARNING] > iOS supports passkeys from version iOS 16+ > > This library includes native code and will not work when running Expo Go. Instead, use a development build by running npx expo run:ios.

  ### Get your App ID Prefix and Bundle ID from Apple

  To get your **App ID Prefix** and **Bundle ID**, follow these steps:

  1. Navigate to the [Apple Developer dashboard](https://developer.apple.com/account).
  1. Under **Certificates, IDs and Profiles**, select [**Identifiers**](https://developer.apple.com/account/resources/identifiers/list).
  1. In the top-right, select the dropdown and select **App IDs**.
  1. Select the **App ID** you want to configure passkeys for. You'll be redirect to the **Review your App ID Configuration** page.
  1. At the top of the page, you'll see your **App ID Prefix** and **Bundle ID**. Save these values somewhere secure.

  ### Set up your associated domain file in the Clerk Dashboard

  1. In the Clerk Dashboard, navigate to the [**Native Applications**](https://dashboard.clerk.com/last-active?path=user-authentication/native-applications) page.
  1. Select the **iOS** tab.
  1. Select **Add iOS App**.
  1. Paste the **App ID Prefix** and **Bundle ID** that you copied in the previous step.
  1. Select **Add App**.
  1. On the right-side, save your **Frontend API URL** somewhere secure.

  ### Update `app.json` in your Expo app

  1. In your app's `app.json` file, under the `ios` object, add the `associatedDomains` property as shown in the following example. Replace `<YOUR_FRONTEND_API_URL>` with the **Frontend API URL** value that you saved in the previous step.

  ```json {{ filename: 'app.json', mark: [[5, 12], [14, 20]] }}
  {
    "expo": {
      //...existing properties
      "plugins": [
        [
          "expo-build-properties",
          {
            "ios": {
              "deploymentTarget": "16.0" //  iOS Support passkeys from version iOS 16+
            }
          }
        ]
      ],
      "ios": {
        //...existing properties
        "associatedDomains": [
          "applinks:<YOUR_FRONTEND_API_URL>",
          "webcredentials:<YOUR_FRONTEND_API_URL>"
        ]
      }
    }
  }
  ```
</Tab>

<Tab>
  > [!WARNING]
  > Android supports passkeys from version 9+. Passkeys will not work with Android emulators. You must use a physical device.
  >
  > This library includes native code and [will not work when running Expo Go](https://docs.expo.dev/workflow/customizing/#using-libraries-that-include-native-code). Instead, use a development build by running `npx expo run:android`.

  ### Set up your Android app links in the Clerk Dashboard

  1. In the Clerk Dashboard, navigate to the [**Native Applications**](https://dashboard.clerk.com/last-active?path=user-authentication/native-applications) page.
  1. Select the **Android** tab.
  1. Select **Add Android app**.
  1. Fill out the form with the following information:
     - The `namespace` (This guide uses the default value: `android_app`)
     - Your Android app's package name
     - The `SHA256 certificate fingerprints`. If you don't know where to find the `SHA256 certificate fingerprints`, see the [Expo docs](https://docs.expo.dev/linking/android-app-links/#create-assetlinksjson-file).
  1. After submitting the form, you can verify that your `assetlinks.json` file is properly associated with your app by using [Google's **Statement List Generator and Tester**](https://developers.google.com/digital-asset-links/tools/generator).
  1. On the right-side, save your **Frontend API URL** somewhere secure.

  ### Install `expo-build-properties` in your Expo application

  ```npm
  npm install expo-build-properties
  ```

  ### Update `app.json` in your Expo application

  1. In your app's `app.json` file, under `android`, add the `intentFilters` property as shown in the following example. Replace `<YOUR_FRONTEND_API_URL>` with the **Frontend API URL** value that you saved in the previous step.

  ```json {{ filename: 'app.json', mark: [[3, 6], [10, 22]] }}
  {
    "expo": {
      "plugins": [["expo-build-properties"]],
      "android": {
        //...existing properties
        "intentFilters": [
          {
            "action": "VIEW",
            "autoVerify": true,
            "data": [
              {
                "scheme": "https",
                "host": "<YOUR_FRONTEND_API_URL>"
              }
            ],
            "category": ["BROWSABLE", "DEFAULT"]
          }
        ]
      }
    }
  }
  ```
</Tab>
</Tabs>

Install @clerk/expo-passkeys

Run the following command to install the @clerk/expo-passkeys package:

npm install @clerk/expo-passkeys

Prebuild Expo project

Run the following command to prebuild your Expo project:

npx expo prebuild

Update your <ClerkProvider>

Pass the passkeys object to the __experimental_passkeys property of your <ClerkProvider> component, as shown in the following example:

import { ClerkProvider } from '@clerk/clerk-expo'
import { Slot } from 'expo-router'
import { tokenCache } from '@clerk/clerk-expo/token-cache'
import { passkeys } from '@clerk/clerk-expo/passkeys'

export default function RootLayout() {
  return (
    <ClerkProvider
      tokenCache={tokenCache}
      publishableKey={publishableKey}
      __experimental_passkeys={passkeys}
    >
      <Slot />
    </ClerkProvider>
  )
}
</Steps>

Usage

To learn how to use passkeys in your Expo application, such as creating, deleting, and authenticating users with passkeys, see the custom flow guide.

ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•‘
ā•šā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•ā•

← Root | ↑ Up