> ## Documentation Index
> Fetch the complete documentation index at: https://aiauth.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
> Install Auth-Agent SDK in your project
## Package Installation
Auth-Agent SDK is available as an npm package under the name `ai-auth`.
```bash npm theme={null}
npm install ai-auth
```
```bash yarn theme={null}
yarn add ai-auth
```
```bash pnpm theme={null}
pnpm add ai-auth
```
```bash bun theme={null}
bun add ai-auth
```
## Package Exports
The `ai-auth` package provides multiple entry points for different use cases:
### Full SDK (Recommended)
```typescript theme={null}
import {
AuthProvider,
useAuth,
SignInWithAuthAgent,
AuthAgentClient,
} from "ai-auth";
```
Includes everything: React components, hooks, and core client.
### Core Client Only
```typescript theme={null}
import { AuthAgentClient } from "ai-auth/client";
```
Framework-agnostic authentication client for vanilla JS/TS or server-side use.
### React Components Only
```typescript theme={null}
import { AuthProvider, useAuth, SignInWithAuthAgent } from "ai-auth/react";
```
Only React-specific exports (components and hooks).
## TypeScript Support
The SDK is written in TypeScript and includes comprehensive type definitions.
```typescript theme={null}
import type {
AuthConfig,
UserInfo,
TokenResponse,
AuthState,
AuthError,
} from "ai-auth";
```
### TypeScript Configuration
Make sure your `tsconfig.json` includes:
```json tsconfig.json theme={null}
{
"compilerOptions": {
"moduleResolution": "bundler", // or "node16" / "nodenext"
"jsx": "react-jsx", // if using React
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}
```
## Peer Dependencies
### For React Applications
```json theme={null}
{
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
}
```
React and React DOM are peer dependencies, meaning they must be installed separately if you're using React components.
### For Vanilla JavaScript
No peer dependencies required when using only the core client.
## Browser Compatibility
Auth-Agent SDK supports modern browsers with the following APIs:
* **Crypto API**: For PKCE generation (SHA-256 hashing)
* **Fetch API**: For HTTP requests
* **LocalStorage/SessionStorage**: For token storage
* **ES2020+**: For JavaScript features
### Minimum Versions
## CDN Installation
For quick prototyping without a build step:
```html theme={null}
```
CDN usage is recommended for prototyping only. For production, use a bundler
for better performance and tree-shaking.
## Framework-Specific Setup
### Next.js App Router
```typescript app/providers.tsx theme={null}
'use client';
import { AuthProvider } from 'ai-auth';
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```typescript app/layout.tsx theme={null}
import { Providers } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```typescript main.tsx theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from 'ai-auth';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
);
```
```typescript index.tsx theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from 'ai-auth';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
);
```
```html index.html theme={null}
Auth-Agent Demo
```
## Verify Installation
Create a simple test to verify the SDK is installed correctly:
```typescript test.ts theme={null}
import { AuthAgentClient } from "ai-auth";
const client = new AuthAgentClient({
clientId: "test",
redirectUri: "http://localhost:3000",
});
console.log("SDK installed successfully!");
console.log("Client created:", client);
```
Run with:
```bash theme={null}
node test.ts
# or
tsx test.ts
```
## Next Steps
Build your first authenticated app
Learn about all configuration options