# Authentication & Security

### JWT Authentication
The application uses JWT (JSON Web Token) for authentication:

1. **Login Flow**:
   ```typescript
   // User logs in
   this.apiService.getUser(username, password).subscribe(
     response => {
       // Store JWT token
       localStorage.setItem('jwt', response.token);
       // Navigate to home
       this.router.navigate(['/']);
     }
   );
   ```

2. **Token Storage**: JWT tokens are stored in localStorage with key `'jwt'`

3. **Token Injection**: The `AuthInterceptor` automatically adds the token to all requests:
   ```typescript
   const token = localStorage.getItem("jwt") 
     ? `Bearer ${localStorage.getItem("jwt")}` 
     : "";
   
   const authReq = req.clone({
     headers: req.headers.set("authorization", token)
   });
   ```

4. **Token Verification**: AuthGuard verifies tokens before allowing access to protected routes

### HTTP Interceptor (`auth.interceptor.ts`)
Handles authentication and error responses:

#### Features:
- Automatically adds JWT token to request headers
- Handles 401/403 unauthorized responses
- Redirects to login on session expiration
- Shows user-friendly error messages
- Clears localStorage on auth failure

#### Error Handling:
```typescript
private handleAuthError(err: HttpErrorResponse): Observable<any> {
  if (err.status === 401 || err.status === 403) {
    // Show error notification
    this.Toast.fire({
      title: "Sesi berakhir, mohon login kembali",
      icon: "error"
    });
    
    // Redirect to login
    this.router.navigate(["/login"]);
    
    // Clear token
    localStorage.removeItem("jwt");
  }
  return throwError(err);
}
```

### Security Best Practices
1. **Route Guards**: Protect sensitive routes with AuthGuard
2. **Token Expiration**: Tokens are verified on each protected route access
3. **Secure Communication**: All API calls use HTTPS
4. **XSS Protection**: Angular's built-in sanitization
5. **CSRF Protection**: Handled by backend API