Skip to content

Commit

Permalink
Add the Expo Offline support page (#1781)
Browse files Browse the repository at this point in the history
Co-authored-by: Alexis Aguilar <[email protected]>
  • Loading branch information
anagstef and alexisintech authored Dec 12, 2024
1 parent 9a830c5 commit 8bf4b2b
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 1 deletion.
4 changes: 4 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -2313,6 +2313,10 @@
{
"title": "Use biometrics with local credentials",
"href": "/docs/references/expo/local-credentials"
},
{
"title": "Offline support",
"href": "/docs/references/expo/offline-support"
}
]
]
Expand Down
3 changes: 2 additions & 1 deletion docs/manifest.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@
"user-circle",
"user-dotted-circle",
"vue",
"x"
"x",
"expo"
]
}
}
Expand Down
73 changes: 73 additions & 0 deletions docs/references/expo/offline-support.mdx
Original file line number Diff line number Diff line change
@@ -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 through [the package's changelog](https://github.com/clerk/javascript/blob/main/packages/expo/CHANGELOG.md).
The Clerk Expo SDK 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:

- Initialization of the Clerk SDK is now more resilient to network failures.
- Faster resolution of the `isLoaded` property and the [`<ClerkLoaded>`](/docs/components/control/clerk-loaded) control component with only a single network fetch attempt. If the fetch fails, it gracefully falls back to cached resources.
- Network errors are no longer muted, allowing developers to catch and handle them effectively in their custom flows.
- The [`getToken()`](/docs/references/javascript/session#get-token) function in the `useAuth()` hook now supports returning cached tokens, minimizing disruptions caused by network failures.

## 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 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`

On [`<ClerkProvider>`](/docs/components/clerk-provider), pass the `secureStore` object to the `__experimental_resourceCache` property, as shown in the following example:

```tsx {{ filename: 'app/_layout.tsx', mark: [4, [14, 18]] }}
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>

0 comments on commit 8bf4b2b

Please sign in to comment.