How to access private api keys in a component in a NextJS application

Question

What is the best practice for accessing a private apiKey in a nextjs component?

I have a component that needs to take an apiKey as a prop:

<Component
    apiKey={apiKey}
/>

Currently I am keeping that apiKey in an env.local file without the NEXT_PUBLIC_* prefix.

In env.local

API_KEY="abcdefghijk"

I'm trying to figure out the best way to get the apiKey in my component without exposing it to the client. The only way I've managed to get it working is by creating an api route which will grab the apiKey on the server side and return it as a response.

In route.ts

export async function GET(request: Request) {
  return Response.json({ apiKey: process.env.API_KEY })
}

Back in my Component

const [apiKey, setApiKey] = useState("")

useEffect(() => {
  fetch("/api/MyRoute").then(async (response) => { 
       const data = await response.json();
       setApiKey(data["apiKey"])
    });
  }, []);

This doesn't feel like the right way to do this to me at all, any suggestions on a better practice?

If you do it in the client it will be public anyway! What are you using this for? — vzsoares
– vzsoares, Commented Sep 12, 2024 at 19:12

cihanolmalibu · Accepted Answer · 2024-09-12 19:20:27Z

0

If you call your apiKey inside a server component, it will run entirely on the server and can safely access environment variables without exposing your apiKey to the client.

// app/page.js
import { Component } from './Component'

export default async function Page() {
  const apiKey = process.env.API_KEY
  
  return (
    <Component apiKey={apiKey} />
  )
}

And also instead of passing the API key to the client at all, you could create API routes that perform the necessary operations server-side:

export default async function handler(req, res) {
  const apiKey = process.env.API_KEY
  // Use the apiKey to perform the operation
  res.status(200).json({ result })
}

So simply if you can perform all operations that require the API key on the server, that's generally the safest approach.

answered Sep 12, 2024 at 19:20

cihanolmalibu

93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Melv1nS Over a year ago

Yeah ideally I would do this, but my problem is the component I'm using is a complex custom component from a third party. So that component is the one taking the apiKey as the prop and then using the apiKey to do operations on the server-side. The whole reason I'm using the third party component is to avoid the hassle of having to build it myself.

cihanolmalibu Over a year ago

Maybe you can try to use API Route Proxy, instead of returning the API key directly, create an API route that acts as a proxy for the third-party component's operations. I am still not sure if its the exact solution for it tho but also you can check for the docs of the third party to customize how it retrieves the apiKey and safety recommendations.

Collectives™ on Stack Overflow

How to access private api keys in a component in a NextJS application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related