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!
Privy Auth is currently in a closed beta. Please reach out to get started!
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. 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 React 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 NextJS, you may wrap your components as so:
import { PrivyProvider } from '@privy-io/react-auth';
import { useRouter } from 'next/router';
export default function App({ Component, pageProps }) {
const router = useRouter();
// This method will execute after a user successfully logs in.
const handleLogin = async () => {
router.push('/home');
}
return(
<PrivyProvider appId={<your-privy-app-id>} onSuccess={handleLogin}>
<Component {...pageProps} />
</PrivyProvider>
);
}
Are you building your app using a create-react-app
template? Check out this guide for tips for integrating Privy with a create-react-app
setup.
The PrivyProvider
takes the following properties:
- your
appId
- an optional
onSuccess
callback which will execute once a user successfully logs in
4. Begin using Privy Auth! 🎉
You can now use the Privy SDK from any of your React components or custom hooks via the usePrivy
hook!
Read on to learn how you can use Privy to:
- log your users in
- determine a user's authentication status
- prompt users to link additional accounts, as part of progressive onboarding
- manage your users' identity data
- interface with users' crypto wallets
and to do so much more!
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.