Appearance

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. Prerequisites ​

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

1. Install the Privy React SDK ​

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

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

2. Set your login methods ​

Navigate to the Login methods page on the Privy Dashboard by selecting your app and then clicking Login Methods in the side bar. 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. For more information on how to enable social logins, check out the Dashboard docs

3. Get your Privy app ID ​

From the Privy dashboard for select your desired app, navigate to the Settings page in the side bar. On the Basics tab, find the API keys section. Get your Privy app ID, you will need it in the next step.

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.

4. Import Privy into your app ​

In your project, import the PrivyProvider component and wrap your app with it. Set the appId field to the app ID you got from the Dashboard in step 3.

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 3.
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.

5. 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!