From 2e3121c88485bc42f710972569d2f0473f7b146b Mon Sep 17 00:00:00 2001
From: gregfromstl <gregfromstl@gmail.com>
Date: Tue, 25 Jun 2024 10:37:31 -0700
Subject: [PATCH] Update Next.js auth documentation with new Auth setup and
 payload generation details for smart accounts

---
 src/app/connect/auth/frameworks/next/page.mdx | 15 ++++++++-------
 src/app/connect/auth/page.mdx                 | 13 +++++++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/connect/auth/frameworks/next/page.mdx b/src/app/connect/auth/frameworks/next/page.mdx
index c1df25d2..18b5c5f7 100644
--- a/src/app/connect/auth/frameworks/next/page.mdx
+++ b/src/app/connect/auth/frameworks/next/page.mdx
@@ -71,11 +71,7 @@ const clientId = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!; // this will be us
 const secretKey = process.env.THIRDWEB_SECRET_KEY!; // this will be used on the server-side
 
 export const client = createThirdwebClient(
-	secretKey
-		? { secretKey }
-		: {
-				clientId,
-			},
+	secretKey ? { secretKey } : { clientId },
 );
 ```
 
@@ -160,12 +156,13 @@ In your project's components directory, create a `LoginButton.tsx` file:
 // LoginButton.tsx
 "use client";
 
-import { useActiveAccount } from "thirdweb/react";
+import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import { generatePayload, login } from "@/actions/auth"; // we'll add this file in the next section
 import { signLoginPayload } from "thirdweb/auth";
 
 export const LoginButton = () => {
 	const account = useActiveAccount();
+	const chain = useActiveWalletChain();
 	const { connect, isConnecting, error } = useConnect();
 
 	async function handleClick() {
@@ -181,7 +178,10 @@ export const LoginButton = () => {
 			activeAccount = account;
 		}
 		// Step 1: fetch the payload from the server
-		const payload = await generatePayload({ address: account.address });
+		const payload = await generatePayload({
+			address: account.address,
+			chainId: chain.id,
+		});
 		// Step 2: Sign the payload
 		const signatureResult = await signLoginPayload({ account, payload });
 		// Step 3: Send the signature to the server for verification
@@ -239,6 +239,7 @@ if (!privateKey) {
 const thirdwebAuth = createAuth({
 	domain: process.env.NEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN || "",
 	adminAccount: privateKeyAccount({ client, privateKey }),
+	client: client,
 });
 
 export const generatePayload = thirdwebAuth.generatePayload;
diff --git a/src/app/connect/auth/page.mdx b/src/app/connect/auth/page.mdx
index 84ff8792..a7d9b5e9 100644
--- a/src/app/connect/auth/page.mdx
+++ b/src/app/connect/auth/page.mdx
@@ -67,7 +67,8 @@ clientId: '1234567890', // get yours at https://thirdweb.com/dashboard/settings/
 
 const thirdwebAuth = createAuth({
 domain: 'localhost:3000',
-client
+client,
+adminAccount: privateKeyToAccount({ client, privateKey }),
 });
 
 export default function App() {
@@ -113,11 +114,15 @@ const client = createThirdwebClient({
 
 const auth = createAuth({
 	domain: "localhost:3000",
+	adminAccount: privateKeyToAccount({ client, privateKey }),
 	client,
 });
 
 // 1. generate a login payload on the server
-const loginPayload = await auth.generatePayload({ address: "0x123..." });
+const loginPayload = await auth.generatePayload({
+	address: "0x123...",
+	chain: 1,
+});
 
 // 2. sign the login payload on the client
 const signature = await auth.signPayload({
@@ -149,6 +154,10 @@ const { valid, parsedJWT } = await auth.verifyJWT({ jwt });
 	Production](/connect/auth/deploying-to-production).
 </Callout>
 
+### Auth with Smart Accounts (Account Abstraction)
+
+When using Auth with a smart account, you **must** specify a client (on `createAuth`) and a chain ID (on `generatePayload`). The smart account is deployed on a specific chain and the payload must reflect that, and the client is needed to call the wallet contract to verify the signature.
+
 </Tabs>
 
 ## Templates