Skip to main content
Docs
Dashboard

Configure passkeys for 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.

Enable passkeys

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

  1. In the Clerk Dashboard, navigate to the Email, Phone, Username page.
  2. In the Authentication strategies section, enable Passkeys.

Configure passkeys

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

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.
  2. Under Certificates, IDs and Profiles, select Identifiers.
  3. In the top-right, select the dropdown and select App IDs.
  4. Select the App ID you want to configure passkeys for. You'll be redirect to the Review your App ID Configuration page.
  5. 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 page.
  2. Select the iOS tab.
  3. Select Add iOS App.
  4. Paste the App ID Prefix and Bundle ID that you copied in the previous step.
  5. Select Add App.
  6. 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.
app.json
{
  "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>"
      ]
    }
  }
}

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. Instead, use a development build by running npx expo run:android.

  1. In the Clerk Dashboard, navigate to the Native Applications page.
  2. Select the Android tab.
  3. Select Add Android app.
  4. 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.
  5. 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.
  6. On the right-side, save your Frontend API URL somewhere secure.

Install expo-build-properties in your Expo application

terminal
npm install expo-build-properties
terminal
yarn add expo-build-properties
terminal
pnpm add 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.
app.json
{
  "expo": {
    "plugins": [["expo-build-properties"]],
    "android": {
      //...existing properties
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "<YOUR_FRONTEND_API_URL>"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ]
    }
  }
}

Install @clerk/expo-passkeys

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

terminal
npm install @clerk/expo-passkeys
terminal
yarn add @clerk/expo-passkeys
terminal
pnpm add @clerk/expo-passkeys

Prebuild Expo project

Run the following command to prebuild your Expo project:

terminal
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:

app/_layout.tsx
import { tokenCache } from '@/cache'
import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-expo'
import { passkeys } from '@clerk/clerk-expo/passkeys'
import { Slot } from 'expo-router'

export default function RootLayout() {
  const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!

  if (!publishableKey) {
    throw new Error('Add EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in your .env')
  }

  return (
    <ClerkProvider
      tokenCache={tokenCache}
      publishableKey={publishableKey}
      __experimental_passkeys={passkeys}
    >
      <ClerkLoaded>
        <Slot />
      </ClerkLoaded>
    </ClerkProvider>
  )
}

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.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on