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.
-
Enable all the login methods you want to use in the dashboard.
-
[optional] Enable guest accounts in the dashboard under Settings > Advanced settings > Guest accounts.
-
Enable smart wallets in the dashboard or remove in app/providers if you do not wish to use them.
- Clone this repository and open it in your terminal.
git clone https://github.com/privy-io/whitelabel-starter.git- Install the necessary dependencies (including Privy Auth) with
yarn.
yarn install- Initialize your environment variables by copying the
.env.examplefile to an.env.localfile. 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>In your project directory, run yarn dev. You can now visit http://localhost:3000 to see your app and login with Privy!
app/providers.tsxfor how to use thePrivyProviderand initialize it with your Privy App IDapp/components/Login.tsxfor whitelabel login methodsapp/components/Wallets.tsxfor how to create wallets, send transactions and sign messages in a whitelabeled experience
- OAuth methods can be enabled on the dashboard here
Check out our docs for more guidance around using Privy in your app!