# Use Auth Provider

> This skill covers patterns for implementing authentication in a frontend application. Trigger: Load this skill when managing user authentication.

- Skill: `jnzader/use-auth-provider` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jnzader/use-auth-provider`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jnzader/use-auth-provider/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: JNZader (https://skillmd.com/u/jnzader)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jnzader/use-auth-provider

---


<!-- L1:START -->
# use-auth-provider

This skill covers patterns for implementing authentication in a frontend application.

**Trigger**: Load this skill when managing user authentication.
<!-- L1:END -->

<!-- L2:START -->
## Quick Reference

| Task | Pattern |
|------|---------|
| Set API URL | `set-api-url` |
| Use Auth Provider | `use-auth-provider` |

## Critical Patterns (Summary)
- **Set API URL**: Define the base URL for API requests.
- **Use Auth Provider**: Wrap your application with the AuthProvider for authentication context.
<!-- L2:END -->

<!-- L3:START -->
## Critical Patterns (Detailed)

### Set API URL

Define the base URL for API requests to ensure all authentication requests are directed correctly.

```typescript
const apiUrl = API_URL; // Use the exported API_URL for consistent API endpoint
```

### Use Auth Provider

Wrap your application with the AuthProvider to provide authentication context to all components.

```typescript
import { AuthProvider } from './lib/auth';

const App = () => (
  <AuthProvider>
    {/* Your application components */}
  </AuthProvider>
);
```

## When to Use

- When setting up the authentication context for your application.
- When configuring API endpoints for authentication requests.

## Commands

```bash
docker-compose up
python repoforge/cli.py
```

## Anti-Patterns

### Don't: Hardcode API URLs

Hardcoding API URLs can lead to maintenance issues and inconsistencies.

```typescript
const apiUrl = 'http://localhost:3000/api'; // BAD
```
<!-- L3:END -->