Add the Expo Offline support page

docs/manifest.json

@@ -2288,6 +2288,10 @@
                         {
                           "title": "Use biometrics with local credentials",
                           "href": "/docs/references/expo/local-credentials"
+                        },
+                        {
+                          "title": "Offline support",
+                          "href": "/docs/references/expo/offline-support"
                         }
                       ]
                     ]

docs/references/expo/offline-support.mdx

@@ -0,0 +1,73 @@
+---
+title: Enable offline support in your Expo app
+description: Learn how to enable offline support in your Expo app with Clerk.
+---
+
+> [!WARNING]
+> This is an experimental API.
+> The `__experimental_resourceCache` property introduced in this guide is an experimental feature. It is subject to change in future updates, so use it cautiously in production environments. Ensure thorough testing and stay informed about updates in the package.
+
+## Overview
+
+The `@clerk/clerk-expo` package provides enhanced offline support to improve reliability and user experience. This update enables your app to bootstrap offline using cached Clerk resources, ensuring quick initialization without requiring an internet connection.
+
+It offers the following benefits:
+
+- Faster resolution of the `isLoaded` property and the `ClerkLoaded` control component with only a single network fetch attempt. If the fetch fails, it gracefully falls back to cached resources.
+- The `getToken` function in the `useAuth` hook now supports returning cached tokens, minimizing disruptions caused by network failures.
+- Network errors are no longer muted, allowing developers to catch and handle them effectively in their custom flows.
+
+## How to enable offline support
+
+To enable offline support in your Expo app, follow these steps:
+
+<Steps>
+  ### Install the necessary peer dependencies
+
+  The `expo-secure-store` package is required to be installed in order to use the offline support feature.
+
+  <CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
+    ```bash {{ filename: 'terminal' }}
+    npm install expo-secure-store
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn add expo-secure-store
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm add expo-secure-store
+    ```
+  </CodeBlockTabs>
+
+  ### Use the `__experimental_resourceCache` property
+
+  On `ClerkProvider`, use the `__experimental_resourceCache` property and pass the `secureStore` object from `@clerk/clerk-expo/secure-store`.
+
+  ```tsx {{ filename: 'app/_layout.tsx' }}
+  import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-expo'
+  import { Slot } from 'expo-router'
+  import { tokenCache } from '../token-cache'
+  import { secureStore } from '@clerk/clerk-expo/secure-store'
+
+  export default function RootLayout() {
+    const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!
+
+    if (!publishableKey) {
+      throw new Error('Add EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY to your .env file')
+    }
+
+    return (
+      <ClerkProvider
+        publishableKey={publishableKey}
+        tokenCache={tokenCache}
+        __experimental_resourceCache={secureStore}
+      >
+        <ClerkLoaded>
+          <Slot />
+        </ClerkLoaded>
+      </ClerkProvider>
+    )
+  }
+  ```
+</Steps>