[DO NOT MERGE]Ntitoras/user 985 add expo passkeys guide

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"
                         }
                       ]
                     ]

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.
+
+<Steps>
+  ### 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`:
+
+  <Tabs items={['iOS', 'Android']}>
+    <Tab>
+      <Steps>
+        > [!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 `<YOUR_FRONTEND_API>`
+
+        ![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 `<YOUR_FRONTEND_API>` 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:<YOUR_FRONTEND_API>", "webcredentials:<YOUR_FRONTEND_API>"]
+            }
+          }
+        }
+        ```
+      </Steps>
+    </Tab>
+
+    <Tab>
+      <Steps>
+        > [!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 `<YOUR_FRONTEND_API>`:
+
+        ![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 `<YOUR_FRONTEND_API>` with the value that you copied on the previous step.
+
+        ```json
+        {
+          "expo": {
+            "android": {
+              //...existing properties
+              "intentFilters": [
+                {
+                  "action": "VIEW",
+                  "autoVerify": true,
+                  "data": [
+                    {
+                      "scheme": "https",
+                      "host": "<YOUR_FRONTEND_API>"
+                    }
+                  ],
+                  "category": ["BROWSABLE", "DEFAULT"]
+                }
+              ]
+            }
+          }
+        }
+        ```
+      </Steps>
+    </Tab>
+  </Tabs>
+
+  ### Prebuild Expo project
+
+  <CodeBlockTabs type="installer" options={["npx"]}>
+    ```bash {{ filename: 'terminal' }}
+    npx expo prebuild
+    ```
+  </CodeBlockTabs>
+
+  ### Install the necessary peer dependencies
+
+  <CodeBlockTabs type="installer" options={["npm", "yarn", "pnpm"]}>
+    ```bash {{ filename: 'terminal' }}
+    npm install @clerk/expo-passkeys
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn add @clerk/expo-passkeys
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm add @clerk/expo-passkeys
+    ```
+  </CodeBlockTabs>
+
+  ### Add the passkeys object to your `<ClerkProvider>`
+
+  ```tsx
+  import { ClerkProvider } from '@clerk/clerk-expo'
+  import { passkeys } from '@clerk/clerk-expo/passkeys'
+
+  return <ClerkProvider __experimental__passkeys={passkeys}>{/* Your app here */}</ClerkProvider>
+  ```
+
+  ### 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
+    }
+  }
+  ```
+</Steps>
+
+## 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.
+
+<Cards>
+  - [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.
+</Cards>