Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions docs/base-account/guides/authenticate-users.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,38 @@ 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>
```ts Browser (SDK)
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, '');
Expand Down
7 changes: 7 additions & 0 deletions docs/base-account/quickstart/web.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -471,7 +479,8 @@ export default NextAuth({
}),
],
});

```
```tsx page.tsx expandable
// Frontend component
import { signIn } from 'next-auth/react';

Expand Down