0

I am developing a web application using NextJS. I am using firebase, sentry.io and infinite scroll in my project. When the application first runs, my data from the backend comes as server side. If the user scrolls, my new data is necessarily brought as a client side. I defined my key in the .env.local file with the prefix NEXT_PUBLIC since this API will be requested on both client and server sides.

  1. Wouldn't defining it as NEXT_PUBLIC show my api url in the network?

I need to collect events with firebase for user actions. I have to access Firebase as client side. That's why I define my keys with the NEXT_PUBLIC prefix. For example: NEXT_PUBLIC_API_KEY In such a case, my api key will appear on the network again. Isn't this a security issue?

  1. How can I hide Firebase API Key?

I collect the errors that occur in the project with sentry.io. Likewise, I need to access sentry.io as a client side. When I perform the above scenario, users will access my API key.

  1. If the secrets we define as NEXT_PUBLIC become public, what is the logic of defining them?

I need to request client-side for Infinite scroll and firebase, how can I secure the secrets I use at this point? I will deploy my projects with docker. Where should I specify these env variables?

Caner
  • 504
  • 3
  • 17
  • If you use the API keys in client code they will be visible anyway in the browser. It doesn't matter if you expose them with `NEXT_PUBLIC_` or not. – juliomalves Jul 31 '22 at 11:16
  • The question you should ask is, are the API keys sensitive? If so, then your client code shouldn't be using them in the first place. The alternative is to proxy your client requests through an API route where you can safely use the API keys without exposing them. – juliomalves Jul 31 '22 at 11:18
  • Then there is no logic to using env on client side. Do I have to leave keys on for firebase and sentry.io? – Caner Jul 31 '22 at 11:21
  • Sorry, I didn't see it a while ago. Thank you. – Caner Jul 31 '22 at 11:26
  • Let's find out what the PUBLIC means here. Public keys are supposed to be public, but private keys are not. So if it turns out you need to pass around private keys to frontend, it's recommended to implement them in the backend. NOTE: a key can be public or private, you need to figure that part out first. – windmaomao Jul 31 '22 at 14:12
  • 1
    I'm not sure which keys you're exactly asking about, but if it's about Firebase's configuration data, keep this in mind: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – Frank van Puffelen Jul 31 '22 at 15:01

1 Answers1

0

Well you can use Google Cloud Secret Manager to store your keys and you can use the Client Library to fetch the keys as you want.

References:

Seif Mahdy
  • 146
  • 8
  • Do you know any other free way? – Caner Jul 31 '22 at 11:14
  • Unfortunately no, this is my way to go when working with secret keys. If you're new to Google Cloud you can create a new account and get 300$ for 90 days to play with them as you want. – Seif Mahdy Jul 31 '22 at 11:22