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:

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.

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.

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:

entrypoint.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';

package.json

{
  "name": "<your app name>",
  "main": "expo-router/entry", 
  "main": "entrypoint.js"
}

INFO

If you're using the @solana/web3.js package, please follow the Solana–RN guide.

In particular, make sure to add the buffer dependency

npm i buffer

and type the following right after the react-native-get-random-values import:

import 'react-native-get-random-values';
import {Buffer} from 'buffer';
global.Buffer = Buffer;

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.

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

import {Slot} 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'}
    >
      <Slot />
    </PrivyProvider>
  );
}

Protect routes with AuthBoundary

Setting up PrivyProvider is all you need to use the Privy Expo SDK throughout your app! But if you want to protect certain routes, we recomend you do so by using the AuthBoundary component, as follows:

Start by setting up a route group, like (app)/, under you app/ directory. Routes placed under this group will be protected by the AuthBoundary component, so only authenticated users can access them.

app
├── (app)
│   ├── _layout.tsx
│   └── index.tsx
├── _layout.tsx
└── sign-in.tsx

In the (app)/_layout.tsx file, wrap the Stack component with the AuthBoundary component:

import {Stack, Redirect} from 'expo-router';

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

export default function AppLayout() {
  return (
    <AuthBoundary
      loading={<FullScreenLoader />}
      error={(error) => <ErrorScreen error={error} />}
      unauthenticated={<Redirect href="/sign-in" />}
    >
      <Stack />
    </AuthBoundary>
  );
}

You must provide the following props to AuthBoundary:

• loading and error are both custom components that you can define to show specific UIs during the loading and error states.
• On unauthenticated, you should redirect the user to the sign in page, as defined above!.

If you want some more details, or wish to take a manual approach without using AuthBoundary, take a look at Expo Router's docs on Authentication.

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:

• log your users in
• creating embedded wallets
• request signatures and transactions from wallets

and to do so much more!