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 repos page for templates for integrating Privy with various stacks, libraries, and use cases!

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 and set your login methods

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.

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

Next, navigate to the Login methods page of the dashboard and select the account types you'd like users to be able to login with. By default, Privy enables wallet and email logins for new apps; you can update this setting now or later.

3. Set up your app with Privy

Once you have your app ID and have set your login methods, 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={{
        // 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 vs. linking 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!