From 6e7365afd416d16b9704e401441d48198cb1f1fc Mon Sep 17 00:00:00 2001
From: youssefea <youcefea99@gmail.com>
Date: Wed, 8 Oct 2025 19:48:42 +0100
Subject: [PATCH 1/3] update nextjs auth

---
 .../ui-elements/sign-in-with-base-button.mdx      | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/docs/base-account/reference/ui-elements/sign-in-with-base-button.mdx b/docs/base-account/reference/ui-elements/sign-in-with-base-button.mdx
index 79d1f5a88..03809c855 100644
--- a/docs/base-account/reference/ui-elements/sign-in-with-base-button.mdx
+++ b/docs/base-account/reference/ui-elements/sign-in-with-base-button.mdx
@@ -433,8 +433,16 @@ function SignInWithErrorHandling() {
 
 ### NextAuth.js Integration
 
-```tsx
-// pages/api/auth/[...nextauth].js
+Below is an example of how to configure NextAuth to use Base Account as a credentials provider, so you can use Base Account in your Next.js application.
+
+<Note>
+**NextAuth.js Integration**
+
+[Next.js](https://nextjs.org/) is a popular React framework, and [NextAuth.js](https://next-auth.js.org/) is an authentication library for Next.js. It offers session management and providers.
+</Note>
+
+```tsx pages/api/auth/[...nextauth].js expandable
+
 import NextAuth from 'next-auth'
 import CredentialsProvider from 'next-auth/providers/credentials'
 import { verifyMessage } from 'viem'
@@ -471,7 +479,8 @@ export default NextAuth({
     }),
   ],
 });
-
+```
+```tsx page.tsx expandable
 // Frontend component
 import { signIn } from 'next-auth/react';
 

From 037d17226a8bb06f05de5c81df4de9639577c510 Mon Sep 17 00:00:00 2001
From: youssefea <youcefea99@gmail.com>
Date: Wed, 8 Oct 2025 19:50:11 +0100
Subject: [PATCH 2/3] update auth guide

---
 .../guides/authenticate-users.mdx             | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/docs/base-account/guides/authenticate-users.mdx b/docs/base-account/guides/authenticate-users.mdx
index 2d1c611fd..346a5b994 100644
--- a/docs/base-account/guides/authenticate-users.mdx
+++ b/docs/base-account/guides/authenticate-users.mdx
@@ -55,6 +55,29 @@ sequenceDiagram
 
 ## Implementation 
 
+### Install Dependencies
+
+Make sure to install the dependencies:
+
+<CodeGroup>
+```bash
+npm install @base-org/account @base-org/account-ui
+```
+
+```bash
+pnpm add @base-org/account @base-org/account-ui
+```
+
+```bash
+yarn add @base-org/account @base-org/account-ui
+```
+
+```bash
+bun add @base-org/account @base-org/account-ui
+```
+
+</CodeGroup>
+
 ### Code Snippets
 
 <CodeGroup>
@@ -62,8 +85,8 @@ sequenceDiagram
 import { createBaseAccountSDK } from "@base-org/account";
 import crypto from 'crypto';
 
-// Initialize the SDK (no config needed for defaults)
-const provider = createBaseAccountSDK().getProvider();
+// Initialize the SDK
+const provider = createBaseAccountSDK({appName: 'My App'}).getProvider();
 
 // 1 — get a fresh nonce (generate locally or prefetch from backend)
 const nonce = window.crypto.randomUUID().replace(/-/g, '');

From 967979e2f910ca124cbf34ab0df17c6ceeb91cbf Mon Sep 17 00:00:00 2001
From: youssefea <youcefea99@gmail.com>
Date: Wed, 8 Oct 2025 19:52:44 +0100
Subject: [PATCH 3/3] update html page

---
 docs/base-account/quickstart/web.mdx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/base-account/quickstart/web.mdx b/docs/base-account/quickstart/web.mdx
index 445e4a911..f41b80373 100644
--- a/docs/base-account/quickstart/web.mdx
+++ b/docs/base-account/quickstart/web.mdx
@@ -16,6 +16,13 @@ You can use the Base Account SDK in two ways:
 ### Option A: CDN (No installation required)
 Just include the script tag in your HTML - no build tools needed!
 
+```html index.html
+[...rest of your code]
+<script src="https://unpkg.com/@base-org/account/dist/base-account.min.js"></script>
+[...rest of your code]
+```
+For a full example, see [example](#2-copy-paste-this-html-file) below.
+
 ### Option B: NPM Package
 If you prefer to install locally: