Privy Whitelabel Starter

This is a template for integrating whitelabel Privy into a NextJS project. Check out the deployed app here!

This demo uses NextJS's App Router.

Setup Privy App

1. Enable all the login methods you want to use in the dashboard.

2. [optional] Enable guest accounts in the dashboard under Settings > Advanced settings > Guest accounts.

3. Enable smart wallets in the dashboard or remove in app/providers if you do not wish to use them.

Setup Repository

1. Clone this repository and open it in your terminal.

git clone https://github.com/privy-io/whitelabel-starter.git

2. Install the necessary dependencies (including Privy Auth) with npm.

npm i

3. Initialize your environment variables by copying the .env.example file to an .env.local file. Then, in .env.local, paste your Privy App ID from the dashboard.

# In your terminal, create .env.local from .env.example
cp .env.example .env.local

# Add your Privy App ID to .env.local
NEXT_PUBLIC_PRIVY_APP_ID=<your-privy-app-id>

Building locally

In your project directory, run npm run dev. You can now visit http://localhost:3000 to see your app and login with Privy!

Check out:

• app/providers.tsx for how to use the PrivyProvider and initialize it with your Privy App ID
• app/components/Login.tsx for whitelabel login methods
• app/components/Wallets.tsx for how to create wallets, send transactions and sign messages in a whitelabeled experience

Optional features:

• OAuth methods can be enabled on the dashboard here

Check out our docs for more guidance around using Privy in your app!