Passing sitekey through environment variable does not work about next-recaptcha-v3

[snelsi]

From the official NextJs documentation:

By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.

In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. For example:

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

This loads process.env.NEXT_PUBLIC_ANALYTICS_ID into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_ prefix. This inlining occurs at build time, so your various NEXT_PUBLIC_ envs need to be set when the project is built.

[snelsi]

To fix this you should be able to just rename your RECAPTCHA_SITE_KEY variable to NEXT_PUBLIC_RECAPTCHA_SITE_KEY, and remove the passing of reCaptchaKey={siteKey} param to the ReCaptchaProvider

[chriscoindeskindices]

Thank you! That worked perfectly. Might be good to make that note in the documentation for others as well. *Christopher Lam* *Vice President of Engineering, CoinDesk Indices* *Mobile*: [phone] *Email*: ***@***.*** 250 Park Avenue South, 2nd Floor New York, New York 10003 Learn more about *CoinDesk Indices* <https://www.coindesk.com/indices/> and *subscribe* <https://www.coindesk.com/newsletters/> to CoinDesk newsletters.

…

On Tue, Jan 31, 2023 at 9:27 AM Roman Zhuravlov ***@***.***> wrote: From the official NextJs documentation <https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser> : By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser. In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. For example: NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk This loads process.env.NEXT_PUBLIC_ANALYTICS_ID into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_ prefix. This inlining occurs at build time, so your various NEXT_PUBLIC_ envs need to be set when the project is built. — Reply to this email directly, view it on GitHub <#119 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A27T2ILXY6ZJEEZT72JZCU3WVFDP7ANCNFSM6AAAAAAUMWSETE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[snelsi]

Glad I could help)

Might be good to make that note in the documentation for others as well

It's already there, actually.

Here:

And here:

[petrleocompel]

Big gotcha is

This inlining occurs at build time, so your various NEXT_PUBLIC_ envs need to be set when the project is built.

So is there any better option for loading it in client?
Example usage - test site and production site (same docker image) different envs just with this siteKey.

[snelsi]

@petrleocompel
It's quite trivial to use any siteKey you need. Here's some examples:

1. Redefine some private env variable as public env variable in next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    NEXT_PUBLIC_RECAPTCHA_SITE_KEY: process.env.GOOGLE_CAPTCHA_SITE_KEY,
  },
};

2. Use build params or phase variable to handle siteKey in next.config.js:

const { PHASE_DEVELOPMENT_SERVER, PHASE_TEST } = require("next/constants");

const getSiteKey = (phase) => {
  switch (phase) {
    case PHASE_DEVELOPMENT_SERVER:
      return "dev_site_key";
    case PHASE_TEST:
      return "test_site_key";
    default:
      return "production_site_key";
  }
};

/** @type {import('next').NextConfig} */
module.exports = (phase) => {
  const siteKey = getSiteKey(phase);
  return {
    env: {
      NEXT_PUBLIC_RECAPTCHA_SITE_KEY: siteKey,
    },
  };
};

3. Define separate variable for prod and test environments, pass them to the ReCaptchaProvider as reCaptchaKey={siteKey}:

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    NEXT_PUBLIC_PROD_RECAPTCHA_SITE_KEY: "prod_site_key",
    NEXT_PUBLIC_TEST_RECAPTCHA_SITE_KEY: "test_site_key",
    NEXT_PUBLIC_DEV_RECAPTCHA_SITE_KEY: "dev_site_key",
  },
};

/recaptcha.tsx

const Layout = ({ children }) => (
  <ReCaptchaProvider
    reCaptchaKey={
      process.env.NODE_ENV === "production"
        ? proces.env.NEXT_PUBLIC_PROD_RECAPTCHA_SITE_KEY
        : proces.env.NEXT_PUBLIC_DEV_RECAPTCHA_SITE_KEY
    }
  >
    {children}
  </ReCaptchaProvider>
);

/recaptcha.test.tsx

const Layout = ({ children }) => (
  <ReCaptchaProvider
    reCaptchaKey={proces.env.NEXT_PUBLIC_TEST_RECAPTCHA_SITE_KEY}
  >
    {children}
  </ReCaptchaProvider>
);

4. Just pas different siteKey as a param to the useReCaptcha hook or ReCaptcha component:

const TestForm = () => {
  const { executeRecaptcha } = useReCaptcha("my_test_site_key");
  return <ReCaptcha reCaptchaKey="my_other_site_key" />;
};

[petrleocompel]

@snelsi Yes I know about this workaround. But I was trying to solve providing ENV variable on deployment. Not in build. (Imagine multiple environments... This file would grow depending on number of clients).
I know that i will have to provide it to ReCaptchaProvider but I asked if there is some smart way to do it via env.

[snelsi]

Most of the time, it's not a good idea to reuse the same build for different environments.

I would recommend to create a separate build for each deploy.

If you have concerns about build time / cpu usage, consider using stuff like turbopack cache / vercel remote cache

[petrleocompel]

I do not agree with you about "reusing images" that is kinda point of docker.

[petrleocompel]

Not best solution but getServerSideProps solves the problem. Providing the env variable to page and using it in ReCaptchaProvider works.