Appearance

Quickstart ​

Get started with Privy's Expo SDK in the 5 quick steps below.

0. Prerequisites ​

In order to integrate the Privy Expo SDK, you must:

  • Have an Expo project set up and running, using the latest version.
  • Target the iOS and Android platforms. The Privy Expo SDK does not have Web support.

WARNING

If you are using a bare React Native project, you will need to install Expo modules.

1. Install the Privy Expo SDK and its dependencies ​

Core dependencies ​

Install the latest version of the Privy Expo SDK along with its peer dependencies using expo:

sh
npx expo install expo-application expo-constants expo-web-browser expo-linking expo-secure-store react-native-webview expo-crypto @privy-io/expo-native-extensions @privy-io/expo

Polyfills ​

Install polyfills which account for APIs required by the Privy Expo SDK that are not available in the React Native environment.

sh
npm i fast-text-encoding react-native-get-random-values @ethersproject/shims

If your app uses the Expo bare workflow ("React Native without Expo"), the following must also be run.

sh
npx pod install

2. Import the required polyfills ​

Next, import the required polyfills that you installed above into your app. The placement of these imports depends on whether your app uses expo/router or not; please make sure to follow the appropriate instructions below.

TIP

You must import polyfills in the exact order specified below to use them in your application.

If your app uses expo/router, required polyfills must come before the Expo router entrypoint.

To do this, import the required polyfills into a new file called entrypoint.js, and update your package.json's main property to point to entrypoint.js:

js
// Import required polyfills first
import 'fast-text-encoding';
import 'react-native-get-random-values';
import '@ethersproject/shims';
// Then import the expo router
import 'expo-router/entry';
json
{
  "name": "<your app name>",
  "main": "expo-router/entry", 
  "main": "entrypoint.js"
}

3. Get your Privy app ID and client ID ​

Configure your Privy app and client IDs in the Privy Dashboard.

The app and client IDs serve as an API key used to initialize the Privy Expo SDK. These values can be safely exposed in a client-side environment.

4. Import Privy into your app ​

In your project, import the PrivyProvider component and wrap your app with it. Set the appId and clientId props to the app ID and client ID you got from the Dashboard in step 3.

Concretely, the PrivyProvider must wrap any component or page that will use the Privy Expo SDK. It is generally recommended to render it as close to the root of your application as possible. This should likely go either an App.tsx or a _layout.tsx file depending on your setup.

Wrap your app with the PrivyProvider in the app/_layout.tsx file.

tsx
import {PrivyProvider} from '@privy-io/expo';

import {Stack} from 'expo-router';

export default function RootLayout() {
  return (
    <PrivyProvider
      // Render the PrivyProvider with your app ID and app client ID
      appId={'insert-your-privy-app-id'}
      clientId={'insert-your-privy-app-client-id'}
    >
      <Stack />
    </PrivyProvider>
  );
}

5. Just use Privy! 🎉 ​

TIP

To see an example application that has the Privy Expo SDK configured, check out our Expo starter repo!

Once you've wrapped your app with the PrivyProvider, you can now use the Privy Expo SDK throughout your components and screens via the provided hooks!

Check out our starter repo to see what a simple end-to-end integration looks like, or read on to learn how you can use Privy to:

and to do so much more!