To get started using Clerk with Expo, create a new Expo project and install the necessary dependencies. See the Expo documentation for more information.
All Clerk hooks and components must be children of <ClerkProvider>, which provides active session and user context. Clerk also provides <ClerkLoaded>, which will not render child content unless the Clerk API has loaded.
To grant your entire app access to Clerk session data and ensure nothing renders until Clerk loads, add both components to your root layout as shown in the following example:
The token cache is used to persist the active user's session token. Clerk stores this token in memory by default, however it is recommended to use a token cache for production applications.
Install expo-secure-store, which you'll use as your token cache:
npm
yarn
pnpm
When configuring a custom token cache, you must create an object that conforms to the TokenCache interface:
The following example demonstrates an Expo layout that defines a custom token cache to securely store the user's session JWT using expo-secure-store:
You can control which content signed-in and signed-out users can see with Clerk's control components. For this quickstart, you'll use:
<SignedIn>: Children of this component can only be seen while signed in.
<SignedOut>: Children of this component can only be seen while signed out.
To get started, create a (home) route group with the following layout file:
Then, in the same folder, create an index.tsx file and add the following code. It displays the user's email if they're signed in, or sign-in and sign-up links if they're not:
Clerk currently only supports control components for Expo native. UI components are only available for Expo web.
Instead, you must build custom flows using Clerk's API. The following sections demonstrate how to build custom email/password sign-up and sign-in flows. If you want to use different authentication methods, such as passwordless or OAuth, see the dedicated custom flow guides.
First, protect your auth routes in the layout. Create a new route group (auth) with a _layout.tsx file. This layout will redirect users to the home page if they're already signed in:
The following example creates a sign-up page that allows users to sign up using email address and password, and sends an email verification code to confirm their email address.
Though not required, it is recommended to implement over-the-air (OTA) updates in your Expo application. This enables you to easily roll out Clerk's feature updates and security patches as they're released without having to resubmit your application to mobile marketplaces.
See the expo-updates library to learn how to get started.