React SDK setup

Prerequisites

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

Deploying your app across multiple domains or environments? Learn how to use app clients to customize Privy’s behavior for different environments.

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 SDK, and it is generally recommended to render it as close to the root of your application as possible.

If you’re new to React and using contexts, check out these resources!

Ethereum
Solana

'use client';

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

export default function Providers({children}: {children: React.ReactNode}) {
  return (
    <PrivyProvider
      appId="your-privy-app-id"
      clientId="your-app-client-id"
      config={{
        // Create embedded wallets for users who don't have a wallet
        embeddedWallets: {
          ethereum: {
            createOnLogin: 'users-without-wallets'
          }
        }
      }}
    >
      {children}
    </PrivyProvider>
  );
}

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';

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

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <PrivyProvider
      appId="your-privy-app-id"
      clientId="your-app-client-id"
      config={{
        // Create embedded wallets for users who don't have a wallet
        embeddedWallets: {
          ethereum: {
            createOnLogin: 'users-without-wallets'
          }
        }
      }}
    >
      <App />
    </PrivyProvider>
  </React.StrictMode>
);

'use client';

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

export default function Providers({children}: {children: React.ReactNode}) {
  return (
    <PrivyProvider
      appId="your-privy-app-id"
      clientId="your-app-client-id"
      config={{
        // Create embedded wallets for users who don't have a wallet
        embeddedWallets: {
          solana: {
            createOnLogin: 'users-without-wallets'
          }
        }
      }}
    >
      {children}
    </PrivyProvider>
  );
}

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';

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

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <PrivyProvider
      appId="your-privy-app-id"
      clientId="your-app-client-id"
      config={{
        // Create embedded wallets for users who don't have a wallet
        embeddedWallets: {
          solana: {
            createOnLogin: 'users-without-wallets'
          }
        }
      }}
    >
      <App />
    </PrivyProvider>
  </React.StrictMode>
);

To use external Solana wallets, you must pass toSolanaWalletConnectors() to the externalWallets prop in your PrivyProvider config. Learn more here.

Configuration

The PrivyProvider component accepts the following props:

string

required

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

string

(Optional) A client ID to be used for this app client. Learn more about app clients here.

Object

Configuration options for the Privy SDK.

For more information on the config object, look under React > Advanced for guides like customizing appearance for our UI components and configuring networks.

Waiting for Privy to be ready

When the PrivyProvider is first rendered on your page, 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 on your page, check the ready Boolean returned by the usePrivy hook. When ready is true, Privy has completed initialization, and your app can consume Privy’s state and interfaces.

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

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

  if (!ready) {
    return <div>Loading...</div>;
  }

  // Now it's safe to use other Privy hooks and state
  return <div>Privy is ready!</div>;
}

Using wallets? Use the ready indicator from the useWallets hook to wait for wallets to complete loading.

Quickstart Guide

Learn how to log users in and transact with embedded wallets

NextJS starter repo

Check out the NextJS app starter repo for a complete example integration

React starter repo

Check out the React app starter repo for a complete example integration

Whitelabel starter repo

Check out the whitelabel starter for a complete whitelabel example integration

Get started

Client-side SDKs

Server-side SDKs

REST API

Changelogs

Troubleshooting and tips

Setup

Prerequisites

Initializing Privy

Configuration

Waiting for Privy to be ready

Quickstart Guide

NextJS starter repo

React starter repo

Whitelabel starter repo

​Prerequisites

​Initializing Privy

​Configuration

​Waiting for Privy to be ready

Quickstart Guide

NextJS starter repo

React starter repo

Whitelabel starter repo

Prerequisites

Initializing Privy

Configuration

Waiting for Privy to be ready