DEV Community

Cover image for Handling sensitive client-side API keys in Next.js
Carlo Gino Catapang
Carlo Gino Catapang

Posted on • Updated on • Originally published at codegino.com

Handling sensitive client-side API keys in Next.js

How to avoid exposing API keys to the browser

TL;DR

Create an API handler which will call the external API with the sensitive API key, then call that handler from the client-side.

The problem

Here's an example of how to call an API with a required API key.

const API_URL= 'https://www.test.com/api'
const API_KEY = 'some-secret-key'

useEffect(() => {
  fetch(`${API_URL}/hello?apiKey=${API_KEY}`)
  // ...
}, [])
Enter fullscreen mode Exit fullscreen mode

Of course, we don't want it to be hardcoded or committed to the repo; As a workaround, we can create an environment variable.

const API_URL = proccess.env.NEXT_PUBLIC_EXTERNAL_API_HOST
const API_KEY = proccess.env.NEXT_PUBLIC_API_KEY;

useEffect(() => {
  fetch(`${API_URL}/hello?apiKey=${API_KEY}`)
  // ...
}, [])
Enter fullscreen mode Exit fullscreen mode

If you're wondering why variables start with NEXT_PUBLIC_ you can refer to this blog

Using the above example will surely help us not leak the API key in our codebase; however, it is still accessible to the client-side.

Go to the Network tab in the browser, and you'll see the API key in the request headers.

Keep in mind that client-side code needs to be treated as publicly accessible by anyone.

Solution

As mentioned in the TL;DR section, we can prevent the exposure of API keys if the code is running on the server.

The good thing is that Next.js is not only a client-side framework but is also used to run server-side code, which means no need to create a new backend service for this use case.

Check this documentation to learn about creating an API in Next.js.

Here's the general steps

  1. Remove the NEXT_PUBLIC in the variable name(e.g. NEXT_PUBLIC_API_KEY to API_KEY)
  2. Create a handler named hello.js under pages/api.
  3. Move the API call to the handler with the updated environment variable.
export default async function handler(req, res) {
  const data = await fetch(
    `https://www.test.com/api/hello?apiKey=${process.env.API_KEY}`,
  ).then(response => response.json());

  res.json(data); // Send the response
}
Enter fullscreen mode Exit fullscreen mode

The handler above is accessible via localhost:3000/api/hello in a local environment or https://www.ourhost.com/api/hello in production. OR simply via /api/hello.

useEffect(() => {
  fetch(`/api/hello`)
  // ...
}, [])
Enter fullscreen mode Exit fullscreen mode

The API key should not be visible in the browser as the external API call executes from the server.

Conclusion

This article might be anti-climactic as the solution is very similar to all other solutions we've seen so far. However, it is worth mentioning that in Next.js, forwarding an API call to the server is straightforward since Next.js can be both used in the frontend and backend.

If you find this useful and you want to support me

Buy Me A Coffee

Discussion (6)

Collapse
lyrod profile image
Lyrod

You do not need to use window.location.origin ๐Ÿ˜‰

Collapse
codegino profile image
Carlo Gino Catapang Author • Edited on

Yeah. thanks for pointing that out.

Content updated. Appreciate the feedback.

Collapse
lyrod profile image
Lyrod

However, if you do not add "/" at the begining, the browser will fetch for "currentPath/yourUrl". So if you host the page on /random-route, it will fetch /random-route/api/hello

You need this /

Thread Thread
codegino profile image
Carlo Gino Catapang Author

Not sure what you mean by that. But it's working for me even if I start it with api or /api.

Thread Thread
lyrod profile image
Lyrod

Because you're fetching from index.js right?

Thread Thread
codegino profile image
Carlo Gino Catapang Author

Yep. Will update code to be resilient to change. Thanks.