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!
Building a new app? Check out our starter templates for integrating Privy into:
- a NextJS project (GitHub, CodeSandbox)
- a Create React App project (GitHub, CodeSandbox)
1. Installation
Install the Privy React Auth SDK using npm
:
npm install @privy-io/react-auth
2. Get your API keys
To use Privy, 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, please reach out so we can set you up with a Privy account and app ID.
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 SDK.
If you're starting from scratch, we recommend using one of our templates to integrate Privy:
- a NextJS project (GitHub, CodeSandbox)
- a Create React App project (GitHub, CodeSandbox)
For example, in a NextJS or Create React App project, you may wrap your components like so:
- NextJS
- Create React App
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}
config={{
loginMethods: ['email', 'wallet'],
appearance: {
theme: 'light',
accentColor: '#676FFF',
logo: 'https://your-logo-url',
},
}}
>
<Component {...pageProps} />
</PrivyProvider>
</>
);
}
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}
config={{
loginMethods: ['email', 'wallet'],
appearance: {
theme: 'light',
accentColor: '#676FFF',
logo: 'https://your-logo-url',
},
}}
>
<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
createPrivyWalletOnLogin
boolean to configure whether you'd like your users to create embedded wallets when logging in - an optional
config
property to customize your onboarding experience.
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!