tududi/frontend/utils/oidcService.ts
Chris 6c9902b584
fix: add CSRF token support to frontend requests (#1025)
This commit implements CSRF token support for all session-based API
requests to fix the "CSRF token missing" and "CSRF token mismatch" errors
introduced after CSRF protection was added in commit 62c4cc84.

Changes:
- Created csrfService.ts utility for fetching and caching CSRF tokens
- Added getPostHeadersWithCsrf() helper to authUtils for async token injection
- Updated all service files (*Service.ts) to include CSRF tokens in POST/PUT/PATCH/DELETE requests
- Updated components with inline fetch calls to use getCsrfToken()
- Fixed CSRF middleware to use single lusca instance instead of creating new instances per request
- Improved generateToken() to use req.csrfToken() when available
- Added CalDAV path exemption to CSRF protection

Technical details:
- CSRF tokens are fetched from /api/csrf-token endpoint
- Tokens are cached and reused across requests to avoid unnecessary fetches
- Tokens are included in x-csrf-token header for state-changing requests
- Public endpoints (login, register) remain exempt from CSRF protection
- Bearer token authentication remains exempt from CSRF protection

Files modified:
- Backend: app.js, middleware/csrf.js
- Frontend: 13 service files, 8 component files
- New file: frontend/utils/csrfService.ts

This ensures all session-based requests properly include CSRF tokens while
maintaining support for API token authentication.
2026-04-14 15:06:56 +03:00

80 lines
2.4 KiB
TypeScript

import { getApiPath } from '../config/paths';
import { getCsrfToken } from './csrfService';
export interface OIDCProvider {
slug: string;
name: string;
}
export interface OIDCIdentity {
id: number;
provider_slug: string;
provider_name: string;
email: string | null;
name: string | null;
picture: string | null;
first_login_at: string;
last_login_at: string;
created_at: string;
}
async function handleResponse<T>(response: Response): Promise<T> {
if (!response.ok) {
const errorBody = await response.json().catch(() => null);
const message = errorBody?.error || 'Request failed';
throw new Error(message);
}
return (await response.json()) as T;
}
export async function fetchOIDCProviders(): Promise<OIDCProvider[]> {
const response = await fetch(getApiPath('oidc/providers'), {
credentials: 'include',
});
const data = await handleResponse<{ providers: OIDCProvider[] }>(response);
return data.providers;
}
export async function fetchOIDCIdentities(): Promise<OIDCIdentity[]> {
const response = await fetch(getApiPath('oidc/identities'), {
credentials: 'include',
});
const data = await handleResponse<{ identities: OIDCIdentity[] }>(
response
);
return data.identities;
}
export async function unlinkOIDCIdentity(identityId: number): Promise<void> {
const response = await fetch(getApiPath(`oidc/unlink/${identityId}`), {
method: 'DELETE',
credentials: 'include',
headers: {
'x-csrf-token': await getCsrfToken(),
},
});
if (!response.ok) {
const errorBody = await response.json().catch(() => null);
const message = errorBody?.error || 'Failed to unlink account';
throw new Error(message);
}
}
export async function initiateOIDCLink(providerSlug: string): Promise<void> {
const response = await fetch(getApiPath(`oidc/link/${providerSlug}`), {
method: 'POST',
credentials: 'include',
headers: {
'x-csrf-token': await getCsrfToken(),
},
});
if (!response.ok) {
const errorBody = await response.json().catch(() => null);
const message = errorBody?.error || 'Failed to initiate account linking';
throw new Error(message);
}
const data = (await response.json()) as { redirectUrl: string };
window.location.href = data.redirectUrl;
}