Clerk Expo

Search…
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 Expo provides hooks and Clerk Control Components which act as helpers for implementing a seamless authentication experience, 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.
Setting up Clerk Expo
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.
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
# Install the package with npm.
2
npm install @clerk/clerk-expo
3
​
4
# Alternative install method with yarn.
5
yarn add @clerk/clerk-expo
Copied!
Clerk provider
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.
Replace the frontendApi prop with the Frontend API host found on the API Keys page.
1
import React from "react";
2
import { Text } from "react-native";
3
import { SafeAreaProvider } from "react-native-safe-area-context";
4
import { ClerkProvider } from "@clerk/clerk-expo";
5
​
6
export default function App() {
7
  return (
8
    <ClerkProvider frontendApi="clerk.[your-domain].com">
9
      <SafeAreaProvider>
10
        <Text>Hello world!</Text>
11
      </SafeAreaProvider>
12
    </ClerkProvider>
13
  );
14
}
Copied!
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.
1
import React from "react";
2
import { Text } from "react-native";
3
import { SafeAreaProvider } from "react-native-safe-area-context";
4
import { ClerkProvider } from "@clerk/clerk-expo";
5
​
6
import * as SecureStore from "expo-secure-store";
7
​
8
const tokenCache = {
9
  getToken(key: string) { 
10
    return SecureStore.getItemAsync(key);
11
  }, 
12
  saveToken(key: string, value: string) {
13
    return SecureStore.setItemAsync(key, value);
14
  }
15
};
16
​
17
export default function App() {
18
  return (
19
    <ClerkProvider frontendApi="clerk.[your-domain].com" tokenCache={tokenCache}>
20
      <SafeAreaProvider>
21
        <Text>Hello world!</Text>
22
      </SafeAreaProvider>
23
    </ClerkProvider>
24
  );
25
}
Copied!
useSessionList
Next - API Reference
Backend API
Last modified 1mo ago
Copy link
Contents
Overview
Setting up Clerk Expo
Clerk provider
Token Cache