# Technical Specification: Auth & Integration

## Authentication System (RBAC)

### Architecture
We use a light-weight, client-side approach for the MVP. Authentication state is persisted in the browser's `sessionStorage`, meaning the user stays logged in as long as the tab/window remains open.

### Storage Key
- **Key**: `kiq_role`
- **Values**: `'admin'` | `'investor'`

### Protection Logic (`ProtectedRoute.jsx`)
The component wraps any route that requires authorization. 
- If no `kiq_role` exists: Redirect to `/login` (storing the intended destination in router state).
- If `allowedRoles` prop is provided and the current role is not included: Redirect to `/` (Home).

### Credential Matrix
| Username | Password | Role | Access Path |
|---|---|---|---|
| `admin` | `testthetestingtesters-2026` | `admin` | `/admin`, `/restricted` |
| `investor-KIQ` | `testinvestortestingit-2026` | `investor` | `/restricted` |

---

## Form Integration (Web3Forms)

### Implementation (`AccessRequest.jsx`)
The form uses the `https://api.web3forms.com/submit` endpoint to send structured JSON data via a `POST` request.

### API Key
- **Access Key**: `5c3d4233-020d-494a-bca6-6336886f6db3` (bound to `KIQ@d-hive.de`)

### Data Payload
The following fields are transmitted:
- `access_key`: Internal API key
- `subject`: Dynamic subject line containing the requester's name/company
- `from_name`: Static label for identification
- `name`, `company`, `role`, `email`, `phone`, `purpose`, `reason`

### UX Logic
1. **Validation**: Native browser validation (`required`, `type="email"`) is enforced.
2. **Loading**: Submit button changes to "Wird gesendet..." and is disabled during `fetch`.
3. **Success**: Displays a success component and auto-redirects to `/` after 4 seconds.
4. **Error**: Displays an inline banner if the API returns an error or a network timeout occurs.