);
}
```
### ProtectedRoute
**File:** `src/components/ProtectedRoute.jsx`
**Usage:**
```jsx
import ProtectedRoute from '@/components/ProtectedRoute';
export default function DashboardPage() {
return (
{/* Protected content - only accessible when logged in */}
Dashboard
);
}
```
**Behavior:**
- Shows loading spinner while checking authentication
- Redirects to `/pages/auth/login-cabinet` if not authenticated
- Renders children if authenticated
### GuestRoute
**File:** `src/components/GuestRoute.jsx`
**Usage:**
```jsx
import GuestRoute from '@/components/GuestRoute';
export default function LoginPage() {
return (
{/* Guest-only content - redirects to home if already logged in */}
Login
);
}
```
**Behavior:**
- Shows loading spinner while checking authentication
- Redirects to `/` (home) if already authenticated
- Renders children if not authenticated
### HTTP Client
**File:** `src/services/httpClient.js`
**Features:**
1. **Auto Token Injection:**
```javascript
// Request interceptor automatically adds token
config.headers.Authorization = `Bearer ${localStorage.getItem('auth_token')}`;
```
2. **Auto 401 Handling:**
```javascript
// Response interceptor handles unauthorized requests
if (error.response?.status === 401) {
// Clear auth data
localStorage.removeItem('auth_token');
localStorage.removeItem('user');
// Redirect to login
window.location.href = '/pages/auth/login-cabinet';
}
```
**Example API Calls:**
```javascript
import { cifClient } from '@/services/cifClient';
// GET request
const profile = await cifClient.get('/v1/user/profile');
// POST request
const transaction = await cifClient.post('/v1/transaction', {
amount: 1000,
type: 'deposit'
});
// PUT request
const updated = await cifClient.put('/v1/user/profile', {
username: 'newname'
});
// DELETE request
await cifClient.delete('/v1/user/session');
```
---
## ๐ Security Considerations
### Current Implementation (localStorage)
**Pros:**
- โ Simple implementation
- โ Easy to access from client-side
- โ Persists across page reloads
- โ No server-side configuration needed
**Cons:**
- โ ๏ธ Vulnerable to XSS (Cross-Site Scripting) attacks
- โ ๏ธ Token exposed to JavaScript
- โ ๏ธ Not HTTP-only
### Best Practices Applied
1. **Token Auto-Expiration:**
- Backend should implement token expiration
- Frontend auto-redirects on 401 Unauthorized
2. **HTTPS Only:**
- Always use HTTPS in production
- Prevents man-in-the-middle attacks
3. **Input Validation:**
- Validate user inputs before sending to API
- Prevent XSS injection
4. **No Sensitive Data in localStorage:**
- Only store token and basic user info
- Never store passwords or credit card info
### Recommended Improvements
For production environment, consider:
1. **HTTP-Only Cookies:**
- More secure than localStorage
- Protected from XSS
- Requires backend support
2. **Refresh Token Mechanism:**
- Short-lived access tokens
- Long-lived refresh tokens
- Auto token renewal
3. **CSRF Protection:**
- Add CSRF tokens for state-changing operations
- Use SameSite cookies
---
## โ ๏ธ Error Handling
### API Errors
**Login Errors:**
```javascript
try {
await loginCabinet({ email, password });
} catch (err) {
// Extract error message from response
const errorMessage = err.response?.data?.message || 'Login failed';
setError(errorMessage);
}
```
**Common Error Messages:**
- `"Invalid credentials"` - Wrong email/password
- `"User not found"` - Email doesn't exist
- `"Account locked"` - Too many failed attempts
**Register Errors:**
```javascript
try {
await regisCabinet({ email, username, password });
} catch (err) {
const errorMessage = err.response?.data?.message || 'Registration failed';
setError(errorMessage);
}
```
**Common Error Messages:**
- `"Email already exists"` - Duplicate email
- `"Username already taken"` - Duplicate username
- `"Password too weak"` - Password validation failed
### Network Errors
```javascript
// Handled in httpClient.js
axios.create({
timeout: 10000, // 10 seconds
});
// If request takes too long
catch (error) {
if (error.code === 'ECONNABORTED') {
console.error('Request timeout');
}
if (!error.response) {
console.error('Network error - check internet connection');
}
}
```
### Token Expiration
```javascript
// Auto-handled in httpClient response interceptor
if (error.response?.status === 401) {
// Clear auth and redirect to login
localStorage.removeItem('auth_token');
localStorage.removeItem('user');
window.location.href = '/pages/auth/login-cabinet';
}
```
---
## ๐งช Testing Guide
### Manual Testing
#### 1. Test Login Flow
```
โ Navigate to /pages/auth/login-cabinet
โ Enter valid credentials
โ Click "Masuk" button
โ Verify redirect to homepage
โ Verify header shows username and logout button
โ Verify localStorage contains auth_token and user
```
#### 2. Test Registration Flow
```
โ Navigate to /pages/auth/regis-cabinet
โ Fill in all fields (email, username, password, confirm password)
โ Click "Daftar" button
โ Verify redirect to login page
โ Login with new credentials
```
#### 3. Test Protected Routes
```
โ Logout if logged in
โ Try to access protected page (e.g., /pages/dashboard)
โ Verify redirect to login page
โ Login
โ Try to access protected page again
โ Verify page loads successfully
```
#### 4. Test Guest Routes
```
โ Login to the app
โ Try to access /pages/auth/login-cabinet
โ Verify redirect to homepage
โ Try to access /pages/auth/regis-cabinet
โ Verify redirect to homepage
```
#### 5. Test Logout Flow
```
โ Login to the app
โ Verify header shows user info
โ Click "Logout" button
โ Verify redirect to homepage
โ Verify header shows "Real Account" button
โ Verify localStorage is cleared
โ Try to access protected page
โ Verify redirect to login
```
#### 6. Test Token Auto-Injection
```
โ Login to the app
โ Open browser DevTools > Network tab
โ Make any API request (e.g., fetch profile)
โ Check request headers
โ Verify "Authorization: Bearer {token}" is present
```
#### 7. Test 401 Handling
```
โ Login to the app
โ Manually delete auth_token from localStorage
โ Make any API request
โ Verify automatic redirect to login page
```
### Automated Testing Examples
**Test Login Component:**
```javascript
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import LoginPage from '@/app/pages/auth/login-cabinet/page';
test('should login successfully with valid credentials', async () => {
render();
fireEvent.change(screen.getByLabelText(/email/i), {
target: { value: 'test@example.com' }
});
fireEvent.change(screen.getByLabelText(/password/i), {
target: { value: 'Test@123' }
});
fireEvent.click(screen.getByRole('button', { name: /masuk/i }));
await waitFor(() => {
expect(localStorage.getItem('auth_token')).toBeTruthy();
});
});
```
---
## ๐ง Troubleshooting
### Common Issues
#### 1. "Cannot read property 'user' of undefined"
**Cause:** useAuth() called outside AuthProvider
**Solution:** Ensure component is wrapped with AuthProvider in layout.js
```jsx
// layout.js
import ClientProviders from '@/components/ClientProviders';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
#### 2. Token not being sent with requests
**Cause:** cifClient not being used, or localStorage not set
**Solution:**
- Use `cifClient` instead of `axios` or `fetch`
- Check if auth_token exists in localStorage
- Verify httpClient.js interceptor is configured
#### 3. Infinite redirect loop between login and home
**Cause:** GuestRoute and authentication check conflict
**Solution:**
- Check if token is valid
- Clear localStorage and try again
- Verify isAuthenticated() logic
#### 4. User data not persisting after page reload
**Cause:** localStorage not being loaded on mount
**Solution:** Check AuthContext useEffect hook
```jsx
useEffect(() => {
const savedUser = localStorage.getItem('user');
const savedToken = localStorage.getItem('auth_token');
if (savedUser && savedToken) {
setUser(JSON.parse(savedUser));
setToken(savedToken);
}
setLoading(false);
}, []);
```
#### 5. CORS errors when calling API
**Cause:** Backend not configured to allow frontend origin
**Solution:** Configure CORS on backend
```javascript
// Backend (Express.js example)
app.use(cors({
origin: process.env.FRONTEND_URL,
credentials: true
}));
```
#### 6. "Network Error" on API calls
**Possible Causes:**
- Backend server not running
- Wrong API URL in .env
- Network/firewall blocking requests
**Solution:**
```bash
# Check .env file
NEXT_PUBLIC_CIF_URL=http://localhost:5000/api
# Verify backend is running
curl http://localhost:5000/api/v1/user/login
# Check network tab in DevTools for detailed error
```
---
## ๐ Additional Resources
### Environment Variables
Create `.env.local` file in root directory:
```env
NEXT_PUBLIC_CIF_URL=https://api.yourdomain.com/api
```
### File Structure Summary
```
src/
โโโ context/
โ โโโ AuthContext.jsx # Auth state management
โโโ components/
โ โโโ ClientProviders.jsx # Client-side providers wrapper
โ โโโ ProtectedRoute.jsx # Protected page wrapper
โ โโโ GuestRoute.jsx # Guest-only page wrapper
โ โโโ Header.jsx # Header with auth UI
โโโ services/
โ โโโ httpClient.js # Axios with interceptors
โ โโโ cifClient.js # CIF API client
โโโ modules/
โ โโโ api/
โ โโโ auth/
โ โโโ loginCabinet.js # Login API function
โ โโโ regisCabinet.js # Register API function
โโโ app/
โโโ layout.js # Root layout with AuthProvider
โโโ pages/
โโโ auth/
โโโ login-cabinet/
โ โโโ page.jsx # Login page
โโโ regis-cabinet/
โโโ page.jsx # Register page
```
### Quick Reference
**Check if logged in:**
```jsx
const { isAuthenticated } = useAuth();
if (isAuthenticated()) {
// User is logged in
}
```
**Get current user:**
```jsx
const { user } = useAuth();
console.log(user.username, user.email);
```
**Logout:**
```jsx
const { logout } = useAuth();
logout();
```
**Protect a page:**
```jsx
import ProtectedRoute from '@/components/ProtectedRoute';
export default function Page() {
return {/* content */};
}
```
---
## ๐ Changelog
**Version 1.0.0** (2026-02-11)
- โ Initial authentication system implementation
- โ Login & Register pages
- โ AuthContext with localStorage
- โ ProtectedRoute & GuestRoute components
- โ Auto token injection in HTTP requests
- โ Auto 401 handling and redirect
- โ Header with dynamic auth UI
- โ Logout functionality
---
## ๐ฅ Support
For issues or questions:
1. Check [Troubleshooting](#troubleshooting) section
2. Review [AUTH_IMPLEMENTATION.md](AUTH_IMPLEMENTATION.md)
3. Check browser console for errors
4. Verify API responses in Network tab
5. Check localStorage values in Application tab
---
**Last Updated:** February 11, 2026
**Version:** 1.0.0