Documentation Index
Fetch the complete documentation index at: https://docs.vibekit.sh/llms.txt
Use this file to discover all available pages before exploring further.
Browser Usage
For browser/web applications, use the browser-safe import that works without Node.js-specific features like file system access.
Basic Setup
import { ClaudeWebAuth, LocalStorageTokenStorage } from '@vibe-kit/auth/browser';
// OR use the default import which is browser-safe:
// import { ClaudeAuth, LocalStorageTokenStorage } from '@vibe-kit/auth';
// Create storage
const storage = new LocalStorageTokenStorage();
const auth = new ClaudeWebAuth(storage);
Authentication Flow
// Create authorization URL
const { url, state, codeVerifier } = ClaudeWebAuth.createAuthorizationUrl();
// Open URL in browser for user authentication
window.open(url, '_blank');
// After user authorizes and provides the code#state string:
const authCode = 'code123#state456'; // From user input
const token = await auth.authenticate(authCode, codeVerifier, state);
Token Management
// Check authentication status
const isAuthenticated = await auth.isAuthenticated();
// Get valid token (auto-refresh if needed)
const accessToken = await auth.getValidToken();
// Use token with AI provider APIs
if (!accessToken) {
// Handle authentication flow...
}
Using with AI Provider APIs
Claude AI (Available Now)
import { ClaudeWebAuth, LocalStorageTokenStorage } from '@vibe-kit/auth/browser';
const storage = new LocalStorageTokenStorage();
const auth = new ClaudeWebAuth(storage);
// Get token (assumes user is already authenticated)
const accessToken = await auth.getValidToken();
if (!accessToken) {
// Handle authentication flow...
}
// Use with Claude Code CLI
// First, export the token as an environment variable:
// export CLAUDE_CODE_OAUTH_TOKEN=${accessToken}
// claude -p 'Hello!'
Storage Options
Browser environments support multiple storage options:
- LocalStorageTokenStorage: Browser localStorage (client-side only)
- CookieTokenStorage: Cookie-based storage for SSR applications
import { ClaudeWebAuth, LocalStorageTokenStorage, CookieTokenStorage } from '@vibe-kit/auth/browser';
// Using localStorage (most common)
const localAuth = new ClaudeWebAuth(new LocalStorageTokenStorage());
// Using cookies (for SSR)
const cookieAuth = new ClaudeWebAuth(new CookieTokenStorage());