mediumSecurityNext.js

The leaked secret

A developer asked an AI assistant to call a paid third-party weather API from a Next.js client component. The suggested code works immediately in local development, but it also ships the team's API key to every visitor's browser.

weather.ts

'use client';

const WEATHER_API_KEY = process.env.NEXT_PUBLIC_WEATHER_API_KEY;

export async function getForecast(city: string) {
  const res = await fetch(
    `https://api.weatherstack.com/current?access_key=${WEATHER_API_KEY}&query=${city}`
  );
  return res.json();
}

What's the actual security problem here?

The function is declared async but never awaited by its caller.

city is not URL-encoded, allowing a path traversal attack against the weather API.

The NEXT_PUBLIC_ prefix bundles the API key into client-side JavaScript, exposing it to anyone who opens devtools. Third-party paid keys should never carry that prefix.

fetch should use POST instead of GET to keep the API key out of server logs.