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
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 loadingUpdates and Solutions
It turns out that I need to call
server.js
and request theenv
variable:server.js
is like this: