Skip to main content

Framework guide: protect the API key

Angular is a frontend framework: all your application code is downloaded and executed in the user’s browser. Any value included in the bundle — including a API key set to constant or environment.ts — is visible to anyone who opens the developer tools or inspects network traffic.
@markpdf/angular should never be set with your actual API Flash key PDF to Markdown pointing directly to https://api.markpdf.tech. It always goes through its own backend that stores the server-side key.

Arquitectura recomendada

MarkpdfService is configured with baseUrl pointing to your backend, not the public API:
app.config.ts
Your backend exposes that route and forwards the request to the real API using the SDK of Node.js (or another SDK if your backend is not Node) with the key saved as a server secret.

Proxy backend example (Express + @markpdf/sdk)

server/routes/markpdf.ts
Angular calls /api/markpdf/convert, your Express backend calls the actual API. The browser never sees YOUR_API_KEY.

Configure MarkpdfService to talk to your backend

app.config.ts
MarkpdfService internally constructs normal HttpClient requests — you can combine it with your app’s own auth interceptors (JWT, session cookies) just like any other Angular HTTP service.

Error interceptor

app.config.ts
markpdfErrorInterceptor normalizes error responses from your backend (provided you forward the status and body { error: string } as in the Express example above) to instances of MarkpdfClientError, consistent with those documented by Error Handling.

Authenticate the end user against your backend

MarkpdfService does not manage user sessions — that is the responsibility of your own app. Combine it with your usual auth interceptor:
app.config.ts
This pattern (no secret frontend → own backend with API key → API public) is the same as what Next.js recommends for Route Handlers, only in Angular the “own backend” is explicitly a separate service instead of being integrated into the same project.