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
:)
pnpm 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.