1

I am buidling an app that uses OpenAI's API (with Next.js and Vercel). In order to make it work, I can let the frontend make the API call directly. However, doing so will expose the API key to the browser (I know it's never safe to store secrets in the frontend side). Thus, I'm wondering what is the easiest way to run a backend service and make the api call? Since the only goal is to hide my API key, I would prefer a super lightweight solution. Thanks guys.

I tried using Environment Variables in Vercel, however it seems still require a backend service.

William Jin
  • 21
  • 1

3 Answers3

1

If you're looking for a solution that doesn't involve creating a serverless function and you don't anticipate calling your function more than 2 million times, I would recommend considering Firebase Cloud Functions. It provides an easy implementation and deployment process. Additionally, instead of managing environment variables (.env files), you can adjust permissions for domains that are allowed to call your Cloud Function directly in the Firebase settings.

Firebase Cloud Functions are lightweight and offer a straightforward way to achieve your goal without the need for complex infrastructure setup. You can quickly set up and deploy your function, and then define which domains are authorized to invoke it. This approach eliminates the need for managing environment variables separately and simplifies the overall setup process.

Overall, Firebase Cloud Functions offer a convenient and efficient solution for implementing your desired functionality without the overhead of creating and managing a separate serverless function.

Ayush Master
  • 41
  • 2
0

You can follow these steps to hide KEYS using nextjs and vercel :

  1. create an API route or serverless function in next that will act as backend service.This will be responsible for securely storing and handling the API key.
  2. Store API keys as an env variable: In Vercel, you define env variables that can be accessed within your Next application. Store your API key as an env variable in Vercel.
  3. Make use of env variable in your serverless function with 'process.env' make sure you obtain the key in this serverless function.
  4. Make the API call from the serverless function: Within the serverless function, use the API key to make the API call to OpenAI's API. This way, the API key will not be exposed to the frontend.

let me know if this resolves your query :)

ksd030687d
  • 298
  • 2
  • 12
0

You could proxy the api-key or

integrate oauth2 user authentication using something like auth0, okta, nextauth or many others to secure your api routes,

Or you could use encrypted relays.

rmourey26
  • 11
  • 3