Retrieving API keys on the frontend of NextJS app in production

[taylor-lindores-reeves]

Obviously API keys are secret, so we need to be able to ensure that they're not accessible to the public. But sometimes we will need to fetch from an API using frontend code, and we will need the API key when doing so. However, due to not being in a NodeJS environment, we cannot use process.env.

Therefore, I am not able to access environment variables stored on the server. What is best practice for retrieving API keys on the frontend (specifically in a Next.js app) ?

[willemliu]

I believe the docs describe how to do it pretty well: https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Do you explicitly need the API at the client-side? Or can it also work if you implement getServerSideProps and fetch your data there. Because that would prevent any keys from leaking to the client.

[taylor-lindores-reeves]

I see... Yes I looked at those docs, but my set-up currently looks like this:

module.exports = withCSS(
  withSass({
    webpack(config) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 100000,
              name: "[name].[ext]",
            },
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./"],
            },
          },
          {
            loader: "sass-resources-loader",
            options: {
              sourceMap: true,
              resources: ["./components/scss/_variables.scss"],
            },
          },
        ],
      });

      return config;
    },
  })
);

So I am wondering, would the env set up look like this?

module.exports = withCSS(
  withSass({
    env: {
      customKey: "my-value",
    },
    webpack(config) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 100000,
              name: "[name].[ext]",
            },
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ["./"],
            },
          },
          {
            loader: "sass-resources-loader",
            options: {
              sourceMap: true,
              resources: ["./components/scss/_variables.scss"],
            },
          },
        ],
      });

      return config;
    },
  })
);

Also with regards to getServerSideProps, I am not sure I fully understand it yet so I haven't implemented it. It's about time I did learn it though, do you have any good resources on implementing it like you say, with fetching?

[willemliu]

The env config you suggested looks right.
And for resources on getServerSideProps. I think the official docs are really good: https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

[rafaelalmeidatk]

You shouldn't make protected API calls in the client-side: no matter what you do, the private key will always be exposed.

My suggestion is to use API Routes to create your own API route and make the request to the protected API inside it, this way you can safely use your private key without exposing it to the client

[taylor-lindores-reeves]

Lol sorry about that 🙈 Yes it is on the same domain route. How would I go about doing that then?

[rafaelalmeidatk]

If you only need to make this API call in the server (getServerSideProps) and never in the client then @willemliu's answer is more correct, you can do the protected API call directly in gSSP.

Btw your API route shouldn't return the private key, it would be exposing it to everyone, the suggestion was to make the protected API call inside your API route.

[taylor-lindores-reeves]

@rafaelalmeidatk I am still struggling to figure out how exactly to get back the json response from the server, which again, is why I feel like there needs to be more comprehensive resources on this. It's not working for me..

And with regards to the protected API call, do you mean storing it in the db and retrieving? Or using some sort of hashing algorithm?

[willemliu]

@leafyshark look at this file: https://github.com/willemliu/static-next/blob/master/pages/ssr/%5Bslug%5D.tsx
It implements getServerSideProps. Within that function it runs another function (getPretendApiData) which lives elsewhere. In this example it is actually exported from a file which also serves as API route. But that's not important as that function could live anywhere else.

Take a look at getPretendApiData. It looks a bit complex. But all it does is simply do GraphQL requests to a GraphQL server.

[willemliu]

In your case you could actually make your mongoose request directly from within your getServerSideProps function.