Tools: Hide API Keys from Your Frontend — No Backend Required

The problem in detail ## How Mongrel.io solves this ## Step-by-step walkthrough ## 1. Create an API ## 2. Create a route ## 3. Add an HTTP source ## 4. Configure authentication ## 5. Publish the route ## 6. Call it from your frontend ## Supported authentication types ## Before and after ## Get started If you have ever built a frontend that calls a third-party API, you have faced this problem: the API requires a key, but putting that key in your JavaScript means anyone can see it. The usual fix is to build a backend proxy — a small server that holds the key and forwards requests on your behalf. It works, but now you have a server to write, deploy, and maintain. For many projects, especially prototypes, side projects, and JAMstack sites, that is a lot of overhead for what should be a simple API call. Mongrel.io lets you skip the backend entirely. It acts as a server-side proxy that injects your credentials at request time, so your API keys never appear in your frontend code. Here is what the insecure pattern looks like. You want to call a weather API, so you write something like this: That API key is now visible to anyone who opens the browser's network tab. Even if you move it to an environment variable like VITE_API_KEY or NEXT_PUBLIC_API_KEY, build tools inline those values into your JavaScript bundle. The key still ships to the browser. Mongrel.io sits between your frontend and the external API. The flow looks like this: Your API keys are encrypted with AWS KMS at rest and only decrypted inside the Lambda function at request time. You never write or deploy any backend code. Here is how to set it up. In the Mongrel.io dashboard, start by creating an API. This is a container for your routes — think of it like a project. Give it a name and an optional description. Inside your API, create a new route. Give it a request path — this becomes the URL your frontend will call. For example, if you set the path to /weather/forecast, your endpoint will be available at https://your-subdomain.mongrel.io/weather/forecast. Add a source to your route and select HTTP as the type. Enter the URL of the external API you want to call, for example https://api.weather.example/forecast. This is where the magic happens. On your HTTP source, open the authentication section and select the type that matches what the external API expects. Select the appropriate type and fill in your credentials. For an API key sent as a header, you would enter the header name and the key value. Mongrel.io encrypts these values immediately. They are stored encrypted and only decrypted at request time inside the Lambda function. Once your route is configured, hit publish. Mongrel.io validates your configuration and makes the endpoint live. Now your frontend can call the Mongrel.io endpoint with no credentials at all: The API key never appears in your code, your git repo, or the browser network tab. Mongrel.io supports five authentication methods, covering the most common patterns used by third-party APIs: For OAuth/OIDC, Mongrel.io handles the entire token lifecycle: exchanging credentials, caching tokens, and refreshing them when they expire. You just provide the token URL, client ID, client secret, and scope. Here is the comparison side by side. Before — API key exposed in your frontend: After — calling through Mongrel.io: Your API key never appears in your frontend code, your git repo, or the browser network tab. Mongrel.io is free to get started. Create an account, set up your first route, and stop shipping API keys in your frontend. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: const response = await fetch("https://api.weather.example/forecast?city=Sydney", { headers: { "X-API-Key": "sk_live_abc123def456" } }); const data = await response.json(); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const response = await fetch("https://api.weather.example/forecast?city=Sydney", { headers: { "X-API-Key": "sk_live_abc123def456" } }); const data = await response.json(); CODE_BLOCK: const response = await fetch("https://api.weather.example/forecast?city=Sydney", { headers: { "X-API-Key": "sk_live_abc123def456" } }); const data = await response.json(); CODE_BLOCK: const response = await fetch( "https://your-subdomain.mongrel.io/weather/forecast?city=Sydney" ); const data = await response.json(); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const response = await fetch( "https://your-subdomain.mongrel.io/weather/forecast?city=Sydney" ); const data = await response.json(); CODE_BLOCK: const response = await fetch( "https://your-subdomain.mongrel.io/weather/forecast?city=Sydney" ); const data = await response.json(); CODE_BLOCK: // Your API key is visible in the browser const response = await fetch("https://api.weather.example/forecast", { headers: { "X-API-Key": "sk_live_abc123def456" } }); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // Your API key is visible in the browser const response = await fetch("https://api.weather.example/forecast", { headers: { "X-API-Key": "sk_live_abc123def456" } }); CODE_BLOCK: // Your API key is visible in the browser const response = await fetch("https://api.weather.example/forecast", { headers: { "X-API-Key": "sk_live_abc123def456" } }); CODE_BLOCK: // No API key anywhere in your frontend code const response = await fetch( "https://your-subdomain.mongrel.io/weather/forecast" ); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // No API key anywhere in your frontend code const response = await fetch( "https://your-subdomain.mongrel.io/weather/forecast" ); CODE_BLOCK: // No API key anywhere in your frontend code const response = await fetch( "https://your-subdomain.mongrel.io/weather/forecast" ); - Key theft — anyone can extract the key and use it from their own code - Billing abuse — a stolen key can rack up charges on your account - Rate limit exhaustion — automated abuse can burn through your quota, breaking the experience for legitimate users - Your frontend calls your Mongrel.io endpoint — no API key in the request - Mongrel.io receives the request and decrypts your stored credentials - Mongrel.io calls the real API with your credentials injected server-side - The response is returned to your frontend - Sign up at app.mongrel.io - Read the docs - Learn more about authentication