# 🚀 Auth Quick Reference Card

## Import Statement
```typescript
import { 
  getAdminUser, 
  getAdminToken, 
  isAuthenticated, 
  setAdminAuth, 
  clearAdminAuth,
  hasRole,
  getRoleDisplayName 
} from '@/lib/auth'

import { apiGet, apiPost, apiPut, apiDelete } from '@/lib/apiClient'
```

---

## Common Patterns

### ✅ Get User Data
```typescript
const user = getAdminUser()
// Returns: AdminUser | null
```

### ✅ Check If Logged In
```typescript
if (!isAuthenticated()) {
  router.push('/admin')
}
```

### ✅ Get User Token
```typescript
const token = getAdminToken()
// Returns: string | null
```

### ✅ Check User Role
```typescript
if (hasRole('ADMINISTRATOR')) {
  // Show admin features
}

if (hasRole(['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'])) {
  // Show manager features
}
```

### ✅ Get Role Display Name
```typescript
const roleName = getRoleDisplayName()
// Returns: "System Administrator"
```

### ✅ Login (Store Auth)
```typescript
setAdminAuth({
  token: result.data.token,
  user: result.data.user
})
```

### ✅ Logout (Clear Auth)
```typescript
clearAdminAuth()
router.push('/admin')
```

---

## API Requests

### ✅ GET Request
```typescript
const result = await apiGet('/users')
if (result.success) {
  console.log(result.data)
}
```

### ✅ POST Request
```typescript
const result = await apiPost('/users', {
  firstName: 'John',
  lastName: 'Doe',
  email: 'john@example.com'
})
```

### ✅ PUT Request
```typescript
const result = await apiPut(`/users/${id}`, {
  firstName: 'Jane'
})
```

### ✅ DELETE Request
```typescript
const result = await apiDelete(`/users/${id}`)
```

### ✅ File Upload
```typescript
const formData = new FormData()
formData.append('file', file)

const result = await apiUpload('/media/upload', formData)
```

---

## Protected Route Pattern

```typescript
'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { isAuthenticated, hasRole } from '@/lib/auth'

export default function ProtectedPage() {
  const router = useRouter()

  useEffect(() => {
    // Check authentication
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }

    // Check role (optional)
    if (!hasRole(['ADMINISTRATOR', 'MANAGER'])) {
      router.push('/admin/unauthorized')
    }
  }, [router])

  return <div>Protected Content</div>
}
```

---

## Component Pattern

```typescript
'use client'

import { useState, useEffect } from 'react'
import { getAdminUser, type AdminUser } from '@/lib/auth'

export default function MyComponent() {
  const [user, setUser] = useState<AdminUser | null>(null)

  useEffect(() => {
    const userData = getAdminUser()
    setUser(userData)
  }, [])

  return (
    <div>
      <p>Welcome, {user?.firstName}!</p>
    </div>
  )
}
```

---

## CRUD Pattern

```typescript
import { apiGet, apiPost, apiPut, apiDelete } from '@/lib/apiClient'

// List
const fetchItems = async () => {
  const result = await apiGet('/items')
  if (result.success) setItems(result.data)
}

// Create
const createItem = async (data) => {
  const result = await apiPost('/items', data)
  if (result.success) fetchItems()
}

// Update
const updateItem = async (id, data) => {
  const result = await apiPut(`/items/${id}`, data)
  if (result.success) fetchItems()
}

// Delete
const deleteItem = async (id) => {
  const result = await apiDelete(`/items/${id}`)
  if (result.success) fetchItems()
}
```

---

## Error Handling

```typescript
try {
  const result = await apiGet('/users')
  
  if (result.success) {
    console.log('Success:', result.data)
  } else {
    console.error('Error:', result.message)
  }
} catch (error) {
  console.error('Request failed:', error.message)
  
  // Handle auth errors
  if (error.message.includes('Authentication required')) {
    clearAdminAuth()
    router.push('/admin')
  }
}
```

---

## Conditional Rendering

```typescript
import { hasRole, hasPermission } from '@/lib/auth'

export default function Sidebar() {
  return (
    <nav>
      <Link href="/admin/dashboard">Dashboard</Link>
      
      {hasRole(['ADMINISTRATOR', 'MANAGER']) && (
        <Link href="/admin/users">Users</Link>
      )}
      
      {hasPermission('CREATE_NEWS_ARTICLE') && (
        <Link href="/admin/news/new">Create Article</Link>
      )}
    </nav>
  )
}
```

---

## TypeScript Types

```typescript
import { type AdminUser } from '@/lib/auth'
import { type ApiResponse } from '@/lib/apiClient'

const user: AdminUser | null = getAdminUser()

const result: ApiResponse<User[]> = await apiGet('/users')
```

---

## ⚠️ Don't Do This

### ❌ Direct localStorage Access
```typescript
// ❌ DON'T
const token = localStorage.getItem('adminToken')
const user = JSON.parse(localStorage.getItem('adminUser'))

// ✅ DO
const token = getAdminToken()
const user = getAdminUser()
```

### ❌ Hardcoded URLs
```typescript
// ❌ DON'T
fetch('http://localhost:5000/api/users', ...)

// ✅ DO
apiGet('/users')
```

### ❌ Manual Token Handling
```typescript
// ❌ DON'T
const token = getAdminToken()
fetch(url, {
  headers: { 'Authorization': `Bearer ${token}` }
})

// ✅ DO
apiGet('/endpoint')  // Token automatically included
```

---

## 📚 Full Documentation

- **Complete Guide**: `AUTH_UTILITIES_GUIDE.md`
- **Migration Guide**: `MIGRATION_GUIDE.md`
- **Fix Summary**: `FIX_SUMMARY.md`
- **Complete Summary**: `AUTHENTICATION_FIX_COMPLETE.md`

---

## 🎯 Remember

1. ✅ Always use auth utilities (never direct localStorage)
2. ✅ Use API client for requests (automatic token)
3. ✅ Check authentication in protected routes
4. ✅ Handle errors gracefully
5. ✅ Import types for TypeScript

**Happy coding! 🚀**