Skip to content

Quickstart

The Privy React SDK is the easiest way to onboard your users to web3 in your React App.

With just nine minutes of setup, you get out-of-the-box support for:

  • A variety of login methods, including email, phone, wallets, and social
  • Customizable UIs to progressively onboard your users
  • Self-custodial embedded wallets and powerful connectors for external wallets

TIP

Building a new app? Check out our starter templates for integrating Privy into a NextJS project or a Create React App project.

0. Prerequsites

In order to integrate the Privy React SDK, your project must be on:

1. Installation

Install the latest version of the Privy React SDK using your package manager of choice:

sh
npm install @privy-io/react-auth@latest

2. Get your Privy app ID

Login to the Privy dashboard and select your desired app. Then, in the sidebar, navigate to the API keys page and get your Privy app ID.

This serves as an API key used to initialize the Privy React SDK. This ID can be safely exposed in a client-side environment, and you can further secure it for production applications.

3. Set up your app with Privy

Once you have your app ID, import the PrivyProvider component into your project, and wrap your app with it.

Concretely, the PrivyProvider must wrap any component or page that will use the Privy React SDK. It is generally recommended to render it as close to the root of your application as possible.

TIP

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

For example, in a NextJS or Create React App project, you may wrap your components like so:

tsx
'use client';

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

export default function Providers({children}: {children: React.ReactNode}) {
  return (
    <PrivyProvider
      appId="your-privy-app-id"
      config={{
        // Display email and wallet as login methods
        loginMethods: ['email', 'wallet'],
        // Customize Privy's appearance in your app
        appearance: {
          theme: 'light',
          accentColor: '#676FFF',
          logo: 'https://your-logo-url',
        },
        // Create embedded wallets for users who don't have a wallet
        embeddedWallets: {
          createOnLogin: 'users-without-wallets',
        },
      }}
    >
      {children}
    </PrivyProvider>
  );
}

This example assumes you are using the NextJS App Router. You can copy the component above into a providers.tsx file, and import it and render it in your project's _app.tsx.

In the examples above, notice that the PrivyProvider component takes two properties:

PropertyDescription
appId(Required) Your Privy app ID, from step 2.
config(Optional) An object to customize your app's appearance, login methods, embedded wallets, supported networks, and more. Learn about customizing your configuration.

4. Just usePrivy! 🎉

Once you've wrapped your app with the PrivyProvider, you can now use the Privy SDK throughout your components and pages via the usePrivy hook!

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!