Skip to main content

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!

info

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:

_app.tsx
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>
    );
}
tip

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:

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.