Hiding secrets from the frontend / client side

[hems]

I have the following page and secret server function

page with getServerSideProps

module.exports.env = {
  SECRET: '..."
}

page with getServerSideProps

import secretMethod from 'server/secretMethod'

export default function MyPage(props) {
...
}

export function getServerSideProps() {

  const props = await secretMethod()

  return { props }
}

secretMethod.js

import axios from 'axios'

export default function secretMethod() {
  const secret = process.env.SECRET

  // do something with the secret

  return {...}
}

The question is: How to avoid that process.env.SECRET being exposed to the client side?

According to this answer on Stack Overflow the way to achieve that is to NOT USE next.config.js and instead of a .env file on the repository.

Of course you don't want to push the .env files to git otherwise the secrets could be leaked, to avoid that, you can add those files to .gitignore and add the SECRET ENV VARS on your server's environment.

[jamesmosier]

I'd strongly recommend using Next's newer built in environment variable support. This will ensure that server secrets stay on the server and client secrets stay on the client.

---

With that said, if you are using the next.config.js environment variable support then the variables you use will only be exposed if you expose them in client code. If you are only using process.env.SECRET in your secretMethod and that method is only used in getServerSideProps then it will not be exposed to the client.

[hems]

i just read that page, thanks for linking it here.

my main issue with next.js approach is that on my workflow we have a “staging” environment but it seems there is no easy way to make next.js differentiate “staging” from “production”.

Since Next.js will set NODE_ENV to production when building i need to have my own ENV VAR / logic on next.config.js in order to handle those different environments and load different environment vars accordingly

[ghost]

@jamesmosier if I get right what the docs say, the only way to use environment variables both on the server and on the client is by prefixing them with "NEXT_PUBLIC_", which will make them hardcoded on the client.

So the environment variables do not give us a straightforward way to have a "global" secret.

Passing secrets from the server to the client is the only way.