Classify each credential and configuration value. Identify which files, page payloads and browser requests the frontend build produces.

1. Keep private provider credentials on a server you control. Use a backend endpoint that authenticates the user and authorises the requested operation.

2. Limit public browser configuration to values intended for public use, such as a public API base URL or a provider-designated publishable key.

3. Review framework exposure prefixes and public configuration namespaces, including Vite, Next.js and Nuxt conventions used by the project.

4. Inspect a production build and browser network traffic for credentials. Do not rely on minification, disabled source maps or an obscure variable name to hide a secret.

5. If a private credential was published, revoke or rotate it and review its usage. Removing it from the newest build does not erase older cached copies.

A frontend may safely know the address of a public API. For example, set VITE_API_BASE=https://api.example.com in the intended build environment and read it from browser code. That value is public by design.

const apiBase = import.meta.env.VITE_API_BASE;
const response = await fetch(`${apiBase}/v1/public-status`);
if (!response.ok) {
  throw new Error('The status service could not be reached.');
}

A private provider token belongs in an authenticated server endpoint that performs a specific authorised operation. Do not create a VITE_SECRET variable and expect its name to hide the value. Inspect the generated files and browser network requests after a production build, including page payloads and source maps.

Expected result: Visitors can see the API base address but never receive the server’s provider credential. The backend still refuses unauthorised operations, even when someone calls it directly without using your frontend.

Confirm the browser can complete the authorised workflow without receiving the server credential. Test that the backend refuses another user’s data or an unapproved operation.

A proxy endpoint that forwards arbitrary destinations or operations can still expose the provider account indirectly. Validate and restrict the operation on the server.

• Building Next.js with the right public environment values
• Setting Nuxt public and private runtime configuration
• Rotating an application secret without breaking active traffic
• Making client-side routes work after a browser refresh

• Vite environment variables
• Next.js environment variables
• Nuxt runtime configuration