> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base.org/llms.txt
> Use this file to discover all available pages before exploring further.
# Auth (Sign In With Base)
> Manage user authentication with Privy and Base Account
export const GithubRepoCard = ({title, githubUrl}) => {
return
;
};
Learn how to handle authentication flows with Privy and Base Account, including both Privy-managed authentication and custom backend verification.
## Overview
Privy handles the initial authentication flow, managing user sessions and wallet connections. You can also implement additional authentication layers for enhanced security or custom requirements.
The code snippets in this guide are based on the following example project:
## Authentication Flow
Privy manages the primary authentication before users enter your application:
## Custom Authentication
For additional security or custom authentication requirements, you can implement backend verification using Sign-In with Ethereum (SIWE)
with the Base Account SDK.
### Setup
Follow the [Setup](/base-account/framework-integrations/privy/setup) guide to set up Privy with Base Account.
### Frontend Component (Sign In With Base)
We use the [`SignInWithBaseButton`](/base-account/reference/ui-elements/sign-in-with-base-button) component from the `@base-org/account-ui/react` package to make sure
we are following the brand guidelines.
```tsx Authentication Component (components/sections/authentication.tsx) expandable theme={null}
"use client";
import { useState } from "react";
import { useBaseAccountSdk } from "@privy-io/react-auth";
import { SignInWithBaseButton } from "@base-org/account-ui/react";
export const Authentication = () => {
const { baseAccountSdk } = useBaseAccountSdk();
const [loading, setLoading] = useState(false);
const [verificationResult, setVerificationResult] = useState(null);
const provider = baseAccountSdk?.getProvider();
const handleSignInWithBase = async () => {
if (!provider) return;
try {
setLoading(true);
// Get a fresh nonce from backend
const nonceResponse = await fetch("/api/auth/nonce");
const { nonce } = await nonceResponse.json();
// Switch to Base Chain
await provider.request({
method: "wallet_switchEthereumChain",
params: [{ chainId: "0x2105" }],
});
// Connect and authenticate with SIWE
const response = (await provider.request({
method: "wallet_connect",
params: [{
version: "1",
capabilities: {
signInWithEthereum: {
nonce,
chainId: "0x2105",
},
},
}],
})) as {
accounts: {
address: string;
capabilities: {
signInWithEthereum: { signature: string; message: string };
};
}[];
};
const { address } = response.accounts[0];
const { message, signature } = response.accounts[0].capabilities.signInWithEthereum;
// Verify with backend
const verifyResponse = await fetch("/api/auth/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ address, message, signature }),
});
const result = await verifyResponse.json();
setVerificationResult(result);
} catch (error) {
console.error("Sign in error:", error);
} finally {
setLoading(false);
}
};
return (
);
};
export default Authentication;
```
### Using the Authentication Component
Add the Authentication component to your page to enable Sign In with Base functionality:
```tsx Page Implementation (app/page.tsx) theme={null}
import Authentication from "@/components/sections/authentication";
export default function Home() {
return (
Base Account with Privy
);
}
```
```tsx Alternative: Protected Page (app/dashboard/page.tsx) theme={null}
"use client";
import { usePrivy } from "@privy-io/react-auth";
import Authentication from "@/components/sections/authentication";
export default function Dashboard() {
const { authenticated } = usePrivy();
if (!authenticated) {
return (
Access Required
Please authenticate to access the dashboard.
);
}
return (
Dashboard
Welcome to your authenticated dashboard!
{/* Your protected content here */}
);
}
```
### Backend Implementation
**Development Only**: This backend implementation is not production-ready. The nonce management system needs proper persistence and security enhancements for production use.
```ts Nonce Generation (app/api/auth/nonce/route.ts) theme={null}
import { NextResponse } from 'next/server';
import crypto from 'crypto';
import { nonceStore } from '@/lib/nonce-store';
export async function GET() {
try {
const nonce = crypto.randomBytes(16).toString('hex');
nonceStore.add(nonce);
return NextResponse.json({ nonce });
} catch (error) {
return NextResponse.json(
{ error: 'Failed to generate nonce' },
{ status: 500 }
);
}
}
```
```ts Signature Verification (app/api/auth/verify/route.ts) expandable theme={null}
import { NextRequest, NextResponse } from 'next/server';
import { createPublicClient, http } from 'viem';
import { base } from 'viem/chains';
import { nonceStore } from '@/lib/nonce-store';
const client = createPublicClient({
chain: base,
transport: http()
});
export async function POST(request: NextRequest) {
try {
const { address, message, signature } = await request.json();
// Extract nonce from SIWE message
const nonce = message.match(/Nonce: (\w+)/)?.[1];
if (!nonce || !nonceStore.consume(nonce)) {
return NextResponse.json(
{ error: 'Invalid or reused nonce' },
{ status: 400 }
);
}
// Verify signature using viem
const valid = await client.verifyMessage({
address: address as `0x${string}`,
message,
signature: signature as `0x${string}`
});
if (!valid) {
return NextResponse.json(
{ error: 'Invalid signature' },
{ status: 401 }
);
}
return NextResponse.json({
success: true,
address,
timestamp: new Date().toISOString()
});
} catch (error) {
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
```
```ts Nonce Store (lib/nonce-store.ts) expandable theme={null}
// Simple in-memory nonce store
// In production, use Redis or a database
class NonceStore {
private nonces = new Set();
add(nonce: string): void {
this.nonces.add(nonce);
}
consume(nonce: string): boolean {
return this.nonces.delete(nonce);
}
}
export const nonceStore = new NonceStore();
```
### Production Considerations
For production deployments, enhance the backend implementation with:
* **Persistent storage**: Use Redis or a database instead of in-memory storage
* **Rate limiting**: Implement request rate limiting for nonce generation
* **Session management**: Create proper JWT tokens or session cookies
* **Nonce expiration**: Add timestamp-based nonce expiration
