Skip to main content

Privy

Introduction​

Privy is the easiest way for web3 developers to onboard their users, regardless of whether they already have wallets, across mobile and desktop. Privy offers embedded wallets so you can seamlessly provision self-custodial wallets for users who sign in via email or social login, as well as powerful connectors for web3 native users who prefer to sign in with their existing wallets. It’s one library to onboard all users, regardless of where they are in their web3 journey.

Developers building end-user facing applications in the Astar ecosystem can leverage Privy to expand their addressable market, improve onboarding funnel conversion and better understand their users. For a limited time, Astar developers can get free unlimited access to Privy’s features for their first three months using the product, by reaching out to us at astar@privy.io. For more information on Privy, check out the website, API docs, product demo, and sample customer integrations (Lighthouse, Courtyard, and Shibuya).

Prerequisites​

To use Privy in your app, you'll need to:

  • Have basic knowledge of JavaScript and React
  • Use React 18 in your app
  • Use only EVM-compatible networks for any on-chain actions

Getting started​

Step 1​

Request API keys by reaching out to our team at astar@privy.io to ensure you’re able to access Privy’s special offer of three free months of unlimited software use. We'll set you up with a Privy app ID that you can use to initialize the SDK.

Step 2​

Install the Privy React Auth SDK using npm:

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

Step 3​

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

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

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>
    </>
  );
}

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.
    • The example above will set you up with email and wallet logins.
    • See this page for more on how to construct the right config for your app!

Step 4​

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:

and to do so much more!

Troubleshooting​

If you're using a framework like create-react-app to build your project, you may encounter errors related to Webpack 5. To resolve, check out this guide.

Learn more​

If there’s anything we can do to support your Privy integration, please reach out to us at astar@privy.io or via our developer slack.