diff --git a/docs/manifest.json b/docs/manifest.json index 4ab96626aa..b8b4b757ff 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -2141,6 +2141,10 @@ { "title": "Use biometrics with local credentials", "href": "/docs/references/expo/local-credentials" + }, + { + "title": "Passkeys", + "href": "/docs/references/expo/passkeys" } ] ] diff --git a/docs/references/expo/passkeys.mdx b/docs/references/expo/passkeys.mdx new file mode 100644 index 0000000000..dc9d0c973d --- /dev/null +++ b/docs/references/expo/passkeys.mdx @@ -0,0 +1,204 @@ +--- +title: Allow users to authenticate with passkeys +description: Learn how to use passkeys in your Expo app with Clerk. +--- + +This guide shows you how to authenticate with passkeys in your Expo application. + +> [!WARNING] +> This API is available only for [@clerk/clerk-expo v2](/docs/upgrade-guides/expo-v2/upgrade) >=2.2.0. + + + ### Enable passkeys + + To use passkeys, you must first enable the strategy. If you haven't already, visit the [Enable passkeys documentation section](https://clerk.com/docs/custom-flows/passkeys#enable-passkeys). + + ### Set your associated domains and your digital asset links files. + + Before using passkeys in Expo, you must configure `assetlinks.json` for `Android` and `associated domains` for `iOS`. + + Clerk makes this setup easy through the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=native-applications). + + Follow the guide below on how to do that on `iOS` and `Android`: + + + + + > [!WARNING] + > iOS supports passkeys from version iOS 16+ + + ### In the IOS tab you will be able to see the following form: + + ![Where to find FRONTEND API URL OF YOUR CLERK APP.](/docs/images/expo/passkeys/ios_form.png) + + In this form you need to provide the: + + - The `Bundle ID` of your app + - Your `App ID Prefix`. + + `Bundle ID` and `App ID Prefix` can be found at `Apple's developer portal` under [Certificates,Identifiers & Profiles](https://developer.apple.com/account/resources/identifiers/list) + + ### Copy your `` + + ![Where to find FRONTEND API URL OF YOUR CLERK APP.](/docs/images/expo/passkeys/ios_after_setup.png) + + ### Update `app.json` in your Expo application. + + At your app's `app.json` you will need to add the `associatedDomains` under the `ios` object. + Replace the `` of the snippet below with the value that you copied in the previous step. + + ```json + { + "expo": { + //...existing properties + "plugins": [ + [ + "expo-build-properties", + { + "ios": { + "deploymentTarget": "16.0" // iOS Support passkeys from version iOS 16+ + } + } + ] + ], + "ios": { + //...existing properties + "associatedDomains": ["applinks:", "webcredentials:"] + } + } + } + ``` + + + + + + > [!WARNING] + > Android supports passkeys from version 9+ + + ### In the Android tab you will be able to see the following form: + + ![Where to find FRONTEND API URL OF YOUR CLERK APP.](/docs/images/expo/passkeys/android.png) + + In this form you need to provide the: + + - The `namespace` (use 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`, visit the following links: + - [Expo docs](https://docs.expo.dev/linking/android-app-links/#create-assetlinksjson-file) + - [Android docs](https://developer.android.com/training/app-links/verify-android-applinks#web-assoc) + + > [!NOTE] + > After submitting the above form, you can check that your `assetlinks.json` can be associated with your app by using [Statement List Generator and Tester](https://developers.google.com/digital-asset-links/tools/generator) + + ### Copy your ``: + + ![Where to find FRONTEND API URL OF YOUR CLERK APP.](/docs/images/expo/passkeys/android_after_setup.png) + + ### Update `app.json` in your Expo application. + + In your app's `app.json`, you'll need to add the `intentFilters` object under `android`. You can see the structure of the `intentFilters` object in the snippet below, you will need to replace `` with the value that you copied on the previous step. + + ```json + { + "expo": { + "android": { + //...existing properties + "intentFilters": [ + { + "action": "VIEW", + "autoVerify": true, + "data": [ + { + "scheme": "https", + "host": "" + } + ], + "category": ["BROWSABLE", "DEFAULT"] + } + ] + } + } + } + ``` + + + + + ### Prebuild Expo project + + + ```bash {{ filename: 'terminal' }} + npx expo prebuild + ``` + + + ### Install the necessary peer dependencies + + + ```bash {{ filename: 'terminal' }} + npm install @clerk/expo-passkeys + ``` + + ```bash {{ filename: 'terminal' }} + yarn add @clerk/expo-passkeys + ``` + + ```bash {{ filename: 'terminal' }} + pnpm add @clerk/expo-passkeys + ``` + + + ### Add the passkeys object to your `` + + ```tsx + import { ClerkProvider } from '@clerk/clerk-expo' + import { passkeys } from '@clerk/clerk-expo/passkeys' + + return {/* Your app here */} + ``` + + ### Create a passkey + + ```tsx + const { user } = useUser() + + const handleCreatePasskey = async () => { + if (!user) return + try { + return await user.createPasskey() + } catch (e: any) { + // handle error + } + } + ``` + + ### Authenticate a user with a passkey + + ```tsx + const { signIn, setActive } = useSignIn() + + const handlePasskeySignIn = async () => { + try { + const signInResponse = await signIn.authenticateWithPasskey({ flow: 'discoverable' }) + await setActive({ session: signInResponse.createdSessionId }) + } catch (err: any) { + // handle error + } + } + ``` + + +## More resources + +Use the following guides to learn more about Clerk components, how to build custom flows for your native apps, and how to use Clerk's client-side helpers. + + + - [Expo SDK](/docs/quickstarts/expo) + - Use Clerk with Expo to authenticate users in your React Native application. + + --- + + - [Authentication flow with passkeys](https://clerk.com/docs/custom-flows/passkeys#enable-passkeys) + - This guide will walk you through how to use Clerk's API to build custom flows for creating, signing users in with, and managing passkeys. + diff --git a/public/images/expo/passkeys/android_after_setup.png b/public/images/expo/passkeys/android_after_setup.png new file mode 100644 index 0000000000..c194f9af65 Binary files /dev/null and b/public/images/expo/passkeys/android_after_setup.png differ diff --git a/public/images/expo/passkeys/android_form.png b/public/images/expo/passkeys/android_form.png new file mode 100644 index 0000000000..007b6cabb9 Binary files /dev/null and b/public/images/expo/passkeys/android_form.png differ diff --git a/public/images/expo/passkeys/ios_after_setup.png b/public/images/expo/passkeys/ios_after_setup.png new file mode 100644 index 0000000000..9699486629 Binary files /dev/null and b/public/images/expo/passkeys/ios_after_setup.png differ diff --git a/public/images/expo/passkeys/ios_form.png b/public/images/expo/passkeys/ios_form.png new file mode 100644 index 0000000000..2f2e59f695 Binary files /dev/null and b/public/images/expo/passkeys/ios_form.png differ