Install & Setup Passkey

To use embedded wallets in your React Native app, you must first connect your mobile application with your website so users can use passkeys in both your app and website.

The setup process involves installing a few React Native packages and setting up your domain’s .well-known public endpoint.

Installation

Install the required package using your preferred package manager:

• expo
• npm
• yarn

Shell

npx expo install react-native-passkey@2.1.1

After installing the react-native-passkey package, you need to link the native packages to your project by running the following commands:

For iOS, run:

cd ios && pod install

If you are using Expo, you may need to run a prebuild or create a new build:

expo prebuild

Or use the EAS service to create a new build for your app

eas build

ReactNativeExtension Settings

To create the passkeys associated with the correct website, the appOrigin must be added to the ReactNativeExtension.

const dynamicClient = createClient({
  environmentId: 'YOUR-ENVIRONMENT-ID',
}).extend(
  ReactNativeExtension({
    appOrigin: 'https://\{\{yourdomain\}\}'
  })
)

The appOrigin will be used to create the passkeys, so make sure it matches your website, e.g., https://example.com.

OS Configuration

iOS

There are iOS-specific steps to configure Passkey support. If you have already set up an associated domain for your application, you can skip this step.

Set Up an Associated Domain for Your Application

Follow the Apple documentation to associate a domain with your application. On your webserver, set up this route:

GET https://\{\{yourdomain\}\}/.well-known/apple-app-site-association

This route should serve a static JSON object containing your team ID and bundle identifier. Example (replace XXXXXXXXXX with your team identifier and “YYY.YYYYY.YYYYYYYYYYYYYY” with your bundle ID, e.g., H123456789.com.example.mobileApp):

{
  "applinks": {
    "details": []
  },
  "webcredentials": {
    "apps": ["XXXXXXXXXX.YYY.YYYYY.YYYYYYYYYYYYYY"]
  }
}

In Xcode, under Signing & Capabilities, add a new Capability of type Associated Domains. Now add this and replace XXXXXX with your domain (e.g., apple.com):

webcredentials:XXXXXX

If you are using Expo, add the webcredentials:{{yourdomain}} to your app.json file. See the Expo documentation for more details.

{
  "expo": {
    "ios": {
      "associatedDomains": ["webcredentials:\{\{yourdomain\}\}"]
    }
  }
}

Android

The Android-specific configuration is similar to iOS. If you have already set up Digital Asset Links for your application, you can skip this step.

Associate Your App with a Domain

Follow the Android documentation to associate a domain with your application. On your webserver, set up this route:

GET https://\{\{yourdomain\}\}/.well-known/assetlinks.json

This route should serve a static JSON object containing the following information (replace with your data, and replace SHA_HEX_VALUE with the SHA256 fingerprints of your Android signing certificate):

[{
  "relation": [
    "delegate_permission/common.get_login_creds",
    "delegate_permission/common.handle_all_urls"
  ],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example",
    "sha256_cert_fingerprints": [
      SHA_HEX_VALUE
    ]
  }
}]

Conclusion

By following these steps, you can successfully integrate passkey functionality with the Dynamic SDK into your React Native app