Secret value not shown

Question

I have a SPA with NextJs that submits a contact form to a Google Sheet, the form works fine locally but in production I get a 500 error. In my .env file I have the following:

NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL=
NEXT_PUBLIC_GOOGLE_PRIVATE_KEY=
NEXT_PUBLIC_GOOGLE_SHEET_ID=

I do have the actual secret in my .env.local file,

This is my submit.js file

import { google } from 'googleapis'
require('dotenv-flow').config()

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).send('Only POST requests are allowed!')
  }
// log to see the secret which are visible in local  
  console.log('process.env', process.env)
 console.log(
      'email process with error ',
      process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL
    )
  const body = req.body

  try {
    const auth = new google.auth.GoogleAuth({
      credentials: {
        client_email: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL,
        private_key: process.env.NEXT_PUBLIC_GOOGLE_PRIVATE_KEY?.replace(
          /\n/g,
          '\n'
        ),
      },
      scopes: [
        'https://www.googleapis.com/auth/drive',
        'https://www.googleapis.com/auth/drive.file',
        'https://www.googleapis.com/auth/spreadsheets',
      ],
    })
    const sheets = google.sheets({
      auth,
      version: 'v4',
    })

    const submittedAt = new Date().toUTCString()

    const response = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.NEXT_PUBLIC_GOOGLE_SHEET_ID,
      range: 'A1:F1',
      valueInputOption: 'USER_ENTERED',
      requestBody: {
        values: [
          [
            body.name,
            body.company,
            body.product,
            body.email,
            body.phone,
            submittedAt,
          ],
        ],
      },
    })

   
    return res.status(201).json({
      data: response.data,
    })
  } catch (error) {
    console.log(
      'email process with error ',
      process.env.NEXT_PUBLIC_GOOGLE_CLIENT_EMAIL
    )
// the log fo r this error is down below
    console.log('error.code', error)
    return res.status(error.code).send({ message: error.message })
  }
}

error.code Error: The incoming JSON object does not contain the client_email field error.code Error: The incoming JSON object does not contain the client_email field

Ps, the secret is injected via aws and is visible in the cloud monitoring logs.

Question 1, do I need to include these secrets in my Dockerfile?

Question2, is it related to CSP? (Not implemented yet)

** renew I tried setting the key in the dockerfile but it doesn't work Also tried adding csp with class component to _document.js/ or adding next configuration but it didn't work well

** renew In production/dev environment I can't read the values ​​even though it is injected from the vault

Answer 1

I found out that NEXT_PUBLIC_ should not be used here, after removing them it started working. But another secret (GTM) that should use the prefix is ​​not loading

Updates and Solutions

It turns out that I need to call server.js and request the env variable: server.js is like this:

export default function handler(req, res) {
  const publicEnv = Object.keys(process.env)
    .filter((key) => key.startsWith('NEXT_PUBLIC'))
    .reduce((acc, key) => {
      acc[key] = process.env[key]
      return acc
    }, {})

  res.status(200).json(publicEnv)
}