diff --git a/docs/base-account/framework-integrations/privy/setup.mdx b/docs/base-account/framework-integrations/privy/setup.mdx index 4ee31ce4..c7a81764 100644 --- a/docs/base-account/framework-integrations/privy/setup.mdx +++ b/docs/base-account/framework-integrations/privy/setup.mdx @@ -31,31 +31,22 @@ You can jump ahead and use the [Base Account Privy Template](https://github.com/ ## Installation -After [creating a new Next.js project](https://nextjs.org/docs/app/getting-started/installation), install the required dependencies: - +### 1. Create a new Next.js project ```bash npm -npm install @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account @base-org/account-ui -``` - -```bash pnpm -pnpm add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account @base-org/account-ui +npx create-next-app@latest base-account-privy +cd base-account-privy ``` ```bash yarn -yarn add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account @base-org/account-ui +yarn create next-app base-account-privy +cd base-account-privy ``` - -```bash bun -bun add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account @base-org/account-ui -``` - - -**Access the latest version of the Base Account SDK (Recommended)** +### 2. Override the Base Account SDK version -It is {HIGHLY RECOMMENDED} to access the latest version of the Base Account SDK in order to get the latest features and bug fixes. +In order to access the latest version of the Base Account SDK, you need to override the Privy pinned version in your package.json file. To do this, you can use the following command to override it: @@ -109,10 +100,35 @@ npm pkg set overrides.@base-org/account="2.2.0" -Make sure to delete your `node_modules` and `package-lock.json` and run a new install to ensure the overrides are applied. + +**If you're not starting a new projects** +Make sure to delete your `node_modules` and `package-lock.json` and run a new install to ensure the overrides are applied. +### 3. Install the dependencies + +Install the dependencies with your package manager of choice: + + +```bash npm +npm install @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify +``` + +```bash pnpm +pnpm add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify +``` + +```bash yarn +yarn add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify +``` + +```bash bun +bun add @privy-io/react-auth @privy-io/chains @privy-io/wagmi-connector wagmi viem @base-org/account-ui react-toastify +``` + + + ## Configuration ### 1. Set up Environment Variables @@ -127,10 +143,10 @@ Get your Privy App ID from the [Privy Dashboard](https://dashboard.privy.io/). ### 2. Configure Privy Provider -Create your Privy configuration with Base Account and email as login methods: +Create your Privy configuration with Base Account as the default login method and update the layout to include the `PrivyProvider`. -```tsx Create Provider (providers/providers.tsx) +```tsx Create Provider (app/providers.tsx) expandable "use client"; import { PrivyProvider } from "@privy-io/react-auth"; @@ -140,7 +156,6 @@ export default function Providers({ children }: { children: React.ReactNode }) { return ( -### 3. Access Base Account SDK from Privy +## Usage + +### 1. Update the App Page + +Update the `app/page.tsx` file to show the authentication flow: + +```tsx app/page.tsx expandable +"use client"; + +import { usePrivy } from "@privy-io/react-auth"; +import { ToastContainer } from "react-toastify"; + +function Home() { + const { ready, authenticated, logout, login } = usePrivy(); + if (!ready) { + return
Loading...
; + } + + return ( +
+ {authenticated ? ( +
+
+ +
+
+ ) : ( +
+
+
+ Base × Privy Demo +
+
+ Build on Base +
+
+ Get started building on Base with Privy's authentication and native Base Account support +
+ +
+
+ )} + + +
+ ); +} + +export default Home; +``` + +### 2. Run the project locally + +You're done! You can now run the project locally: + + +```bash npm +npm run dev +``` +```bash pnpm +pnpm dev +``` +```bash yarn +yarn dev +``` +```bash bun +bun dev +``` + + +You should see a page that looks like this: + +
+ Base × Privy Demo +
+ +### 3. Get the Base Account SDK instance (Optional) You can access the Base Account SDK from Privy using the `useBaseAccount` hook. diff --git a/docs/images/base-account/Privy-Base-Account.png b/docs/images/base-account/Privy-Base-Account.png new file mode 100644 index 00000000..5d475605 Binary files /dev/null and b/docs/images/base-account/Privy-Base-Account.png differ