Call a GIF API from JavaScript without exposing your key

Call a credentialed GIF API from server-side JavaScript, then return the approved result fields to your authenticated frontend. A key embedded in a browser bundle is visible to everyone who loads it, even when the source code is minified.

The following Node.js example uses GIFs.so and Zod. It assumes you have installed Zod and set GIFS_API_KEY in the server environment after creating a verified account.

Validate the data boundary

import { z } from "zod";

const resultSchema = z.object({
  items: z.array(
    z.object({
      id: z.string(),
      title: z.string(),
      gifUrl: z.url(),
      thumbnailUrl: z.url(),
      mp4Url: z.url().nullable(),
    })
  ),
  nextOffset: z.number().nullable(),
  total: z.number(),
  sponsors: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
      url: z.url(),
      sponsored: z.literal(true),
    })
  ),
});

export async function searchGifs(query) {
  const key = process.env.GIFS_API_KEY;
  if (!key) throw new Error("GIFS_API_KEY is required");
  const url = new URL("https://gifs.so/api/rest/gifs");
  url.searchParams.set("query", query);
  url.searchParams.set("limit", "12");
  const response = await fetch(url, {
    headers: { "x-api-key": key },
    signal: AbortSignal.timeout(8000),
  });
  if (!response.ok) {
    throw new Error(`GIF search failed: ${response.status}`);
  }
  return resultSchema.parse(await response.json());
}

This intentionally validates only the fields used by a minimal picker. Add the remaining sponsor creative and media fields from OpenAPI when your UI needs them. Preserve sponsorship disclosure in the frontend.

Add application behavior around the helper

Validate and bound user input before calling this function. Protect the route that uses your shared key; an unrestricted proxy lets strangers consume your account’s allowance. Apply your application’s own per-user limits as well as handling provider limits.

Distinguish a timeout from an empty result. An empty items array is a successful search; a thrown error means the request did not produce a usable response. On 401, fix access. On 429, wait rather than immediately retrying.

For pagination, keep nextOffset with the query that produced it. For browser typing, ignore responses from superseded queries. See the React picker design and retry guidance before turning a single request into a production search experience.

Keep reading

APIs Engineering

Build a React GIF picker with predictable search state

Structure query state, pagination, cancellation, selection, and keyboard behavior before styling a GIF grid.

September 5, 20262 min read

APIs Search

How to compare GIF API providers with a repeatable scorecard

Evaluate real query relevance, media support, limits, access terms, and operational behavior before committing to a provider.

September 5, 20262 min read

The following Node.js example uses GIFs.so and Zod. It assumes you have installed Zod and set GIFS_API_KEY in the server environment after creating a verified account.

Validate the data boundary

import { z } from "zod";

const resultSchema = z.object({
  items: z.array(
    z.object({
      id: z.string(),
      title: z.string(),
      gifUrl: z.url(),
      thumbnailUrl: z.url(),
      mp4Url: z.url().nullable(),
    })
  ),
  nextOffset: z.number().nullable(),
  total: z.number(),
  sponsors: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
      url: z.url(),
      sponsored: z.literal(true),
    })
  ),
});

export async function searchGifs(query) {
  const key = process.env.GIFS_API_KEY;
  if (!key) throw new Error("GIFS_API_KEY is required");
  const url = new URL("https://gifs.so/api/rest/gifs");
  url.searchParams.set("query", query);
  url.searchParams.set("limit", "12");
  const response = await fetch(url, {
    headers: { "x-api-key": key },
    signal: AbortSignal.timeout(8000),
  });
  if (!response.ok) {
    throw new Error(`GIF search failed: ${response.status}`);
  }
  return resultSchema.parse(await response.json());
}