Privy PWA Demo

This is a template progressive web app (PWA) built with Privy, Viem, NextPWA, and TailwindCSS. All transactions are sent on the Base Goerli testnet.

You can see the deployed version at pwa.privy.io.

Setup

First, clone this repo:

npx degit privy-io/create-privy-pwa my-pwa-project
cd my-pwa-project

Next, install dependencies, (includes @privy-io/react-auth, viem, and next-pwa:)

npm i

Next, create your own env file by running

cp .env.example.local .env.local

and add your Privy App ID:

NEXT_PUBLIC_PRIVY_APP_ID=insert-your-app-id

Lastly, run

npm run dev

visit http://localhost:3004 in your browser to see the PWA in action!

For testing development on mobile, we recommend using ngrok (guide), since privy makes use of crypto.subtle which requires a secure context (https)

Points of Interest

You may find the following code snippets within this repo useful:

public/manifest.json

Setting up your PWA's manifest, which controls how it appears when installed on a user device.

pages/_app.tsx

Configuring your PrivyProvider component with your login methods, app ID, embedded wallet configuration, and more.

pages/index.tsx

Using Privy's login method and prompting users to install your PWA using the beforeinstallprompt event (Android/Chrome-only).

pages/dashboard.tsx

Using Privy's user object and various linking methods (linkApple, linkGoogle, linkPhone).

pages/embedded-wallet.tsx

Using Privy's embedded wallet to sign messages, send transactions (using viem!), and export the user's private key.

pages/load-assets.tsx

An example of a page you might have in your PWA to allow users to connect an external wallet, from which they can transfer assets to their embedded wallet.