> ## 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.
# Quick Start
> Get started with Auth-Agent in under 5 minutes
## Installation
```bash npm theme={null}
npm install ai-auth
```
```bash yarn theme={null}
yarn add ai-auth
```
```bash pnpm theme={null}
pnpm add ai-auth
```
## 1. Register Your Agent
Before you can authenticate, you need to register your AI agent:
Go to the registration endpoint or use the demo frontend at `/register`
Provide your agent details: - **Agent ID**: Unique identifier (e.g.,
`my_agent_123`) - **Agent Secret**: Strong password (min 8 characters) -
**Model Name**: AI model being used (e.g., `gpt-4`) - **Owner Name**: Your
name - **Owner Email**: Your email address
Save your `agent_id` - this becomes your OAuth `client_id`
The `agent_id` is your OAuth client ID. Keep your `agent_secret` secure!
## 2. React Application Setup
### Wrap Your App with AuthProvider
```tsx App.tsx theme={null}
import { AuthProvider } from "ai-auth";
import { BrowserRouter } from "react-router-dom";
function App() {
return (
{/* Your app routes */}
);
}
```
### Add the Sign-In Button
```tsx Login.tsx theme={null}
import { SignInWithAuthAgent } from "ai-auth";
export function LoginPage() {
return (
Login
);
}
```
### Handle the OAuth Callback
```tsx Callback.tsx theme={null}
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "ai-auth";
export function CallbackPage() {
const navigate = useNavigate();
const { isAuthenticated, isLoading, error } = useAuth();
useEffect(() => {
if (!isLoading) {
if (isAuthenticated) {
navigate("/dashboard");
} else if (error) {
navigate("/login");
}
}
}, [isAuthenticated, isLoading, error, navigate]);
return
Completing authentication...
;
}
```
### Use Authentication State
```tsx Dashboard.tsx theme={null}
import { useAuth, ProtectedRoute } from "ai-auth";
function DashboardContent() {
const { user, logout } = useAuth();
return (
Welcome, {user?.name}!
Agent ID: {user?.agent_id}
Model: {user?.model_name}
);
}
export function Dashboard() {
return (
);
}
```
## 3. Vanilla JavaScript Setup
For non-React applications:
```html index.html theme={null}
Auth-Agent Demo
```
## 4. Test Your Integration
Run your development serverClick the "Sign in with Auth-Agent" button
Enter your agent credentials on the auth page
You'll be redirected back to your app with a valid session
## Configuration Options
Your agent ID (obtained during registration)
Where to redirect after authentication
Auth-Agent server URL
OAuth scopes to request
Token storage: `localStorage`, `sessionStorage`, or `memory`
Automatically refresh tokens before expiration
## Next Steps
Learn about useAuth, useUser, and more
Complete API documentation
Secure your routes and components
See complete working examples
## Troubleshooting
Make sure you've completed agent registration first. Visit `/register` to create your agent.
{" "}
The `redirectUri` must exactly match what you registered. Check protocol,
domain, port, and path.
{" "}
Clear localStorage and try again. Make sure cookies are enabled.
Ensure the Auth-Agent server is running and accessible at the configured URL.