Quickstart

The Privy React Auth SDK allows you to authenticate your users with Privy in your React app.

With just ten minutes of setup, you get:

immediate support for email, SMS, wallet, and social (Google, Twitter, Discord, etc.) logins
progressive authentication flows that reduce friction during onboarding
out-of-the-box UIs, styled with your brand, that guide your users & keep them informed
identity management across your user base

and so much more!

tip

Building a new app? Check out our starter templates for integrating Privy into:

a NextJS project (Recommended)
a Create React App project

1. Installation

Install the Privy React Auth SDK using npm:

npm install @privy-io/react-auth

2. Configuring Privy Auth

To use Privy Auth, the first step is to retrieve your Privy app ID from the developer console at console.privy.io. If this is your first time using Privy Auth, please reach out so we can set you up with a Privy account and app ID.

From the developer console, you may also configure various settings for your app, including its name, logo, accent color, and more. These will be shown to your users at various points in their onboarding experience.

3. Setting up your app

Once you have your app ID, in your React project, wrap your components with a PrivyProvider. The PrivyProvider should wrap any component that will use the Privy Auth SDK.

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

NextJS
Create React App

_app.jsx
import type {AppProps} from 'next/app';
import Head from 'next/head';
import {PrivyProvider} from '@privy-io/react-auth';

// This method will be passed to the PrivyProvider as a callback
// that runs after successful login.
const handleLogin = (user) => {
  console.log(`User ${user.id} logged in!`)
}

function MyApp({Component, pageProps}: AppProps) {
  return (
    <>
      <Head>
        {/* Edit your HTML header */}
      </Head>
      <PrivyProvider
        appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
        onSuccess={handleLogin}
      >
        <Component {...pageProps} />
      </PrivyProvider>
    </>
  );

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {PrivyProvider} from '@privy-io/react-auth';

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

// This method will be passed to the PrivyProvider as a callback
// that runs after successful login.
const handleLogin = (user) => {
  console.log(`User ${user.id} logged in!`)
}

root.render(
  <React.StrictMode>
    <PrivyProvider
      appId={process.env.REACT_APP_PRIVY_APP_ID}
      onSuccess={handleLogin}
    >
      <App />
    </PrivyProvider>
  </React.StrictMode>
);

// See https://docs.privy.io/guide/troubleshooting/webpack for how to handle
// common build issues with web3 projects bootstrapped with Create React App

The PrivyProvider takes the following properties:

your appId
an optional onSuccess callback which will execute once a user successfully logs in
an optional config property to customize the look and feel of the Privy modal to match your app

4. Just `usePrivy`! 🎉

You can now use the Privy SDK throughout your app via the usePrivy hook! Check out our starter repo to see what a simple end-to-end integration looks like.

Read on to learn how you can use Privy to:

log your users in
prompt users to link additional accounts, as part of progressive onboarding
interface with users' crypto wallets
create Ethereum wallets embedded in your app

and to do so much more!

info

Can't find something in our docs, or have a question that isn't answered here? Reach out to [email protected]! We'd love to help you find what you're looking for.

Quickstart

1. Installation​

2. Configuring Privy Auth​

3. Setting up your app​

4. Just usePrivy! 🎉​

1. Installation

2. Configuring Privy Auth

3. Setting up your app

4. Just `usePrivy`! 🎉