Setup

Prerequisites

Before you begin, make sure you have set up your Privy app and obtained your app ID and client ID from the Privy Dashboard.

A properly set up app client is required for mobile apps and other non-web platforms to allow your app to interact with the Privy API. Please follow this guide to configure an app client by following this guide here.

Initializing Privy

In your project, import the PrivyProvider component and wrap your app with it. The PrivyProvider must wrap any component or page that will use the Privy React Native SDK, and it is generally recommended to render it as close to the root of your application as possible.

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 appId="your-privy-app-id" clientId="your-privy-app-client-id">
      <Slot />
    </PrivyProvider>
  );
}

Protect routes with `AuthBoundary`

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

Start by setting up a route group, like (app)/, under your 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 more details, or wish to take a manual approach without using AuthBoundary, take a look at Expo Router’s docs on Authentication.

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 appId="your-privy-app-id" clientId="your-privy-app-client-id">
      <Slot />
    </PrivyProvider>
  );
}

Protect routes with `AuthBoundary`

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 more details, or wish to take a manual approach without using AuthBoundary, take a look at Expo Router’s docs on Authentication.

Wrap your app with the PrivyProvider in the App.tsx file.

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

import {HomeScreen} from './HomeScreen';

export default function App() {
  return (
    <PrivyProvider appId="your-privy-app-id" clientId="your-privy-app-client-id">
      <HomeScreen />
    </PrivyProvider>
  );
}

Configuration

The PrivyProvider component accepts the following props:

appId

string

required

Your Privy App ID. You can find this in the Privy Dashboard.

clientId

string

required

Your Privy Client ID. You can find this in the Privy Dashboard.

Waiting for Privy to be ready

When the PrivyProvider is first rendered, the Privy SDK will initialize some state about the current user. This might include checking if the user has a wallet connected, refreshing expired auth tokens, fetching up-to-date user data, and more.

It’s important to wait until the PrivyProvider has finished initializing before you consume Privy’s state and interfaces, to ensure that the state you consume is accurate and not stale.

To determine whether the Privy SDK has fully initialized, check the isReady Boolean returned by the usePrivy hook. When isReady is true, Privy has completed initialization, and your app can consume Privy’s state and interfaces.

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

function YourComponent() {
  const {isReady} = usePrivy();

  if (!isReady) {
    return <LoadingScreen />;
  }

  // Now it's safe to use other Privy hooks and state
  return <YourAuthenticatedContent />;
}

Quickstart Guide

Learn how to log users in and transact with embedded wallets

Example Repo

Check out our Expo starter repo for a complete example

Quickstart Guide

Example Repo

Get started

Get started by SDK

Changelogs

Troubleshooting and tips

Prerequisites

Initializing Privy

Protect routes with `AuthBoundary`

Protect routes with `AuthBoundary`

Configuration

Waiting for Privy to be ready

Get started

Get started by SDK

Changelogs

Troubleshooting and tips

​Prerequisites

​Initializing Privy

​Configuration

​Waiting for Privy to be ready

Quickstart Guide

Example Repo

Prerequisites

Initializing Privy

Configuration

Waiting for Privy to be ready