Setting up your app for passkeys

TIP

To see an example application that has the Privy Expo SDK configured with passkeys, check out our Expo starter repo!

1. Set up your build configuration

Integrating passkey login in Expo requires that your app:

• uses an expo development build.
• has a custom metro.config.js file to customize the Metro bundler settings
• enables package exports for the Metro bundler:
• uses the bundler setting for Typescript's moduleResolution

To enable package exports for metro, update your metro.config.js like so:

//...other config logic

// Enable package exports for select libraries
...
const resolveRequestWithPackageExports = (context, moduleName, platform) => {
  if (moduleName.startsWith('@privy-io/')) {
    const ctx = {
      ...context,
      unstable_enablePackageExports: true,
    };
    return ctx.resolveRequest(ctx, moduleName, platform);
  }

  return context.resolveRequest(context, moduleName, platform);
};

config.resolver.resolveRequest = resolveRequestWithPackageExports;

...
module.exports = config;

Also configure your tsconfig.json like so:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    // Allows us to use conditional/deep imports on published packages
    "moduleResolution": "Bundler"
  }
}

2. Install peer dependencies

npx expo install react-native-passkeys

3. Update native app settings

iOS

Passkeys require that you associate a website with your app. To do so, you need to have the associated domain file on your website and the appropriate entitlement in your app.

1. Apple App Site Association

• Create a JSON file with at least the following content

{
  "webcredentials": {
    "apps": ["<teamID>.<bundleID>"]
  }
}

• Make the file accessible on your website at the following path

https://<your_domain>/.well-known/apple-app-site-association

Make sure to use your teamID and bundleID in the file hosted on your website.

For more information about supporting associated domains see Apple's documentation.

2. App configuration

Next, update your app.json (or app.config.ts) to include the associatedDomains and deploymentTarget like so:

{
  "expo": {
    "ios": {
      "associatedDomains": ["webcredentials:<your_domain>"]
    }
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "17.5"
          }
        }
      ]
    ]
  }
}

3. Build

Lastly, build your app!

npx expo prebuild -p ios
npx expo run:ios

Android

To enable passkey support for your Android app, associate your app with a website that your app owns.

1. Digital Asset Links

• Create a JSON file with at least the following content

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "<package_name>",
      "sha256_cert_fingerprints": ["<sha256_cert_fingerprint>"]
    }
  }
]

• Make the file accessible on your website at the following path

https://<your_domain>/.well-known/assetlinks.json

Make sure to use your package_name and sha256_cert_fingerprint in the file hosted on your website.

For more information on obtaining the sha256_cert_fingerprint for your app, see the signing report documentation. For more information about generally supporting Digital Asset Links see Google's documentation.

2. Dashboard

You will also need to add your sha256_cert_fingerprint to the allowed Android key hashes list in the Settings tab of the Privy dashboard.

3. App configuration

Next, update your app.json (or app.config.ts) to look like:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 34
          }
        }
      ]
    ]
  }
}

4. Build

Lastly, build your app!

npx expo prebuild -p android
npx expo run:android