The <ClerkProvider> component provides session and user context to Clerk's hooks and components. It's recommended to wrap your entire app at the entry point with <ClerkProvider> to make authentication globally accessible. See the reference docs for other configuration options.
You must pass your Publishable Key as a prop to the <ClerkProvider> component.
Clerk also provides <ClerkLoaded>, which won't render its children until the Clerk API has loaded.
Add both components to your root layout as shown in the following example:
Clerk stores the active user's session token in memory by default. In Expo apps, the recommended way to store sensitive data, such as tokens, is by using expo-secure-store which encrypts the data before storing it.
To use expo-secure-store as your token cache:
Run the following command to install the library:
npm
yarn
pnpm
In your root directory, create a cache.ts file and add the following code:
Update your root layout to use the token cache:
Tip
When you sign a user out with signOut(), Clerk will remove the user's session JWT from the token cache.
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.
Create an (auth) route group. This will group your sign-up and sign-in pages.
In the (auth) group, create a _layout.tsx file.
Paste the following code. The useAuth() hook is used to access the user's authentication state. If the user is already signed in, they will be redirected to the home page.
Paste the following code. The useSignUp() hook is used to create a sign-up flow. The user can sign up using their email and password and will receive an email verification code to confirm their email.
Paste the following code. The useSignIn() hook is used to create a sign-in flow. The user can sign in using email address and password, or navigate to the sign-up page.
You can control which content signed-in and signed-out users can see with Clerk's prebuilt 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:
Though not required, it is recommended to implement over-the-air (OTA) updates in your Expo app. This enables you to easily roll out Clerk's feature updates and security patches as they're released without having to resubmit your app to mobile marketplaces.
See the expo-updates library to learn how to get started.