Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

Clerk Expo

Integrate Clerk into your React Native application

Overview

Clerk Expo is a wrapper around Clerk React. It is the recommended way to integrate Clerk into your React Native application.

Clerk Expo works for IOS and Android. For web based applications use Clerk React.

Clerk is the easiest way to add authentication and user management to your Expo/React Native application. This guide will walk you through the necessary steps to install and use Clerk in a new create-expo-app application.

After following this guide, you should have a working Expo app complete with:

  • Fully fledged sign in and sign up flows.
  • Social Logins.
  • Secure email/password authentication.

Clerk Expo provides hooks which act as helpers for implementing a seamless authentication experience. The hooks give you access to the Clerk object and a set of useful helper methods for signing in and signing up.

Looking for a quickstart? We created a demo app to show you how to add Clerk to your project.

Before you start

You need to create a Clerk Application in your Clerk Dashboard before you can set up Clerk React. For more information, check out our Setup your application guide.

Creating a new Expo app

Start by creating a new React application - this is usually done using the create-expo-app CLI:

Installing Clerk

There's an ES module for Clerk Expo, available under the @clerk/clerk-expo npm package. Use npm or yarn to install the Clerk React module.

1
1

Adding <ClerkProvider/>

The ClerkProvider allows you to render Clerk Control Components and access the available Clerk React hooks in any nested component. You'll have to wrap your application once with a <ClerkProvider/>.

Render a <ClerkProvider/> component at the root of your React app so that it is available everywhere you need it.

In order to use <ClerkProvider/> first you need to locate the entry point file of your React Native app. In Expo, this is usually your src/App.js.

Finally, <ClerkProvider/> will need the frontendApi prop.

Requiring authentication

The easiest way to require authentication before showing a protected page is to use our Control Components:

  • <SignedIn/>: Renders its children only when a user is signed in.
  • <SignedOut/>: Renders its children only when there's no active user.

The following example shows you how to compose our flexible Control Components to build auth flows that match your needs. Here is an example of the <SignedIn/> component:

When using Expo and React Native, it is required to build out a custom sign-in screen for users to be able to sign in to your application. Below is an example:

Token Cache

Clerk Expo stores the client JWT token in memory by default. It is highly recommended to use a secure store according to your React Native framework.

For example, Expo provides a way to encrypt and securely store key–value pairs locally on the device via expo-secure-store. You can use it as your client JWT storage by setting the tokenCache prop in your <ClerkProvider/> as shown below.

Was this helpful?

Clerk © 2022