Nuxt Secret Keys and reCaptcha

Question

I'm using nuxt.js using the universal mode for pre-rendered html pages and have my secret key from Google reCaptcha.

Where in the nuxt.js application is the best place to store secret your keys? Do they do in the env object in nuxt.config.js?

export default {
  env: {
    secret: process.env.SECRET
  }
}

Also how does this work when the application is generated with nuxt generate and the aplication is client side? The env file stays on the server and never exposed to the client or does everything get compiled and packaged to send to the client?

user_7974638 · Answer

If you have Nuxt 2.13+, you can use privateRuntimeConfig in nuxt.config.js. There you can link to your .env, and the key will be injected to server, and not be visible in frontend.

privateRuntimeConfig should hold all env variables that are private and that should not be exposed on the frontend. This could include a reference to your API secret tokens for example.

More info in the Nuxt Blog

user_13882030 · Answer

You shouldn't store your secret key on the client. The purpose of the secret key - validation the user's response. You need to store it on the backend with appropriate code for verification (https://developers.google.com/recaptcha/docs/verify)

Nuxt Secret Keys and reCaptcha

2 Answers