# Authentication System Implementation

## 📋 Overview

Sistem autentikasi telah diimplementasikan di project ini menggunakan localStorage untuk menyimpan token dan data user.

## 🔧 Komponen yang Dibuat

### 1. **AuthContext** (`src/context/AuthContext.jsx`)
Context API untuk manage authentication state di seluruh aplikasi.

**Functions:**
- `login(userData, authToken)` - Simpan user data dan token
- `logout()` - Hapus user data dan token
- `isAuthenticated()` - Check apakah user sudah login
- `user` - Object berisi data user
- `token` - String berisi auth token

### 2. **ClientProviders** (`src/components/ClientProviders.jsx`)
Wrapper component untuk AuthProvider (client-side).

### 3. **ProtectedRoute** (`src/components/ProtectedRoute.jsx`)
Component untuk protect pages yang memerlukan authentication.

### 4. **GuestRoute** (`src/components/GuestRoute.jsx`)
Component untuk protect pages yang hanya boleh diakses saat belum login (login & register pages).

### 5. **Updated httpClient** (`src/services/httpClient.js`)
Axios client dengan automatic token injection ke headers.

**Features:**
- Auto add `Authorization: Bearer {token}` ke setiap request
- Auto redirect ke login jika response 401 Unauthorized

## 📝 Cara Penggunaan

### Login Flow

Sudah terimplementasi di `src/app/pages/auth/login-cabinet/page.jsx`:

```javascript
import { useAuth } from '@/context/AuthContext';

const { login } = useAuth();

// Setelah login sukses
const response = await loginCabinet({ email, password });
login(response.user, response.token);
```

### Logout Flow

```javascript
import { useAuth } from '@/context/AuthContext';

const { logout } = useAuth();

// Untuk logout
const handleLogout = () => {
  logout();
  router.push('/pages/auth/login-cabinet');
};
```

### Protect Page (Client-Side)

Untuk page yang memerlukan authentication, wrap dengan `ProtectedRoute`:

```javascript
// Example: src/app/pages/dashboard/page.jsx
'use client';

import ProtectedRoute from '@/components/ProtectedRoute';

export default function DashboardPage() {
  return (
    <ProtectedRoute>
      <div>
        <h1>Dashboard - Protected Content</h1>
        {/* Your protected content here */}
      </div>
    </ProtectedRoute>
  );
}
```

### Guest Only Pages

Untuk page yang hanya boleh diakses saat belum login (seperti login & register), wrap dengan `GuestRoute`:

```javascript
// Already implemented in login & register pages
'use client';

import GuestRoute from '@/components/GuestRoute';

export default function LoginPage() {
  return (
    <GuestRoute>
      <div>
        <h1>Login Page</h1>
        {/* Login form here */}
      </div>
    </GuestRoute>
  );
}
```

### Access User Data

```javascript
import { useAuth } from '@/context/AuthContext';

const { user, token, isAuthenticated } = useAuth();

// Contoh penggunaan
if (isAuthenticated()) {
  console.log('User:', user.username);
  console.log('Email:', user.email);
}
```

### API Calls with Auto Token

Semua API calls menggunakan `cifClient` otomatis include token di headers:

```javascript
import { cifClient } from '@/services/cifClient';

// Token otomatis ditambahkan ke headers
const response = await cifClient.get('/v1/user/profile');
const data = await cifClient.post('/v1/transaction', { amount: 1000 });
```

## 🔐 Data Storage

**localStorage:**
- `auth_token` - JWT token dari backend
- `user` - JSON object berisi user data (username, email, dll)

**Note:** Token otomatis dihapus jika API return 401 Unauthorized.

## 🛡️ Protected Routes

Folder yang memerlukan authentication:
- `/pages/*` (kecuali `/pages/auth/*`)

Folder yang bisa diakses tanpa login:
- `/(public)/*`
- `/pages/auth/login-cabinet`
- `/pages/auth/regis-cabinet`

## 📦 Files Modified/Created

**Created:**
- `src/context/AuthContext.jsx`
- `src/components/ClientProviders.jsx`
- `src/components/ProtectedRoute.jsx`
- `src/components/GuestRoute.jsx`
- `middleware.js`
- `AUTH_IMPLEMENTATION.md`

**Modified:**
- `src/app/layout.js`
- `src/app/pages/auth/login-cabinet/page.jsx`
- `src/app/pages/auth/regis-cabinet/page.jsx`
- `src/components/Header.jsx`
- `src/services/httpClient.js`

## 🚀 Next Steps

1. Wrap pages yang memerlukan auth dengan `<ProtectedRoute>`
2. ✅ Header sudah otomatis show user info dan logout button saat login
3. ✅ Header otomatis show login button saat belum login
4. (Optional) Implement refresh token mechanism

## 🎨 Header Features

Header sudah terupdate dengan fitur:
- **Not Authenticated**: Tampilkan button "Real Account" yang link ke login
- **Authenticated**: 
  - Tampilkan username & email user
  - Tampilkan button "Logout" warna merah
  - Logout akan clear semua data dan redirect ke homepage

## 💡 Tips

- Jangan simpan data sensitif di localStorage
- Token akan otomatis ditambahkan ke setiap API request
- User otomatis redirect ke login jika token expired (401)
- Loading state otomatis ditampilkan saat checking auth