Google Cloud Keyfile.json

[rcolepeterson]

I am trying to authenticate with Google Cloud via a Next API route.
GCP needs the path to the key JSON file. Not the values in the file, but the actual file.
So links to tutorials re: base64 and secrets etc. won’t work. (I don’t think)

GCP - API
const client = new vision.v1.ImageAnnotatorClient({ projectId, keyFilename });

keyFilename = path to actual keyfile.JSON.

I can’t make this work once deployed. Locally … no prob.
My workaround is to host my GCP vision function on Google cloud. Would like to get all on to Vercel.

Any thoughts? LMK if i am way off base and I just don't know what I am doing.
I think this is a similar issue
vercel/next.js#13624

I have tried - let keyFilename = path.resolve("./keyfile.json");
Again works locally.

Thanks
Cole

[ash-vd]

This works for me:
const storage = new Storage({ projectId: 'myID', keyFilename: path.resolve('./google_key.json') });

My google_key.json is in the root of my project.

[remjx]

It is bad practice to put keys in the deployed repo. How is your json file getting into the project folder?

[agcty]

I had the exact same issue some weeks ago but luckily there's a pretty easy workaround:

const credential = JSON.parse(
  Buffer.from(process.env.GOOGLE_SERVICE_KEY, "base64").toString()
);

const visionClient = new vision.v1.ImageAnnotatorClient({
  projectId: "my-project-id",
  // important
  credentials: {
    client_email: credential.client_email,
    private_key: credential.private_key,
  },
});

The important part is that you need to base64 encode your google service account key. Take this as a reference: https://cloud.google.com/iam/docs/creating-managing-service-account-keys

Then you need to add this key to your .env.local file in the form of GOOGLE_SERVICE_KEY=base64_encoded_key
and also do the same in the vercel dashboard.

Instead of a keyfile you basically save the file's content as an env var, then inside your code you decode the base64 string and parse it to an actual json object which you can then use to authenticate. The google API documentation is not that good when it comes to examples like this.

[nikbeznosikov]

thank you very much. I spent 2 days on trying to figure out this with Google content api inside next.js app...

[Oyinkansolight]

Just 2 days, I wasn't so lucky 🥲. Happy for you.

[stella0000000]

😍😍😍😍😍

[sunech]

Thanks, this was of great help. Had to tweak it a bit to get it to work for me though. So to clarify to anyone else having issues:

1. base64 encoded the entire JSON file from Google
2. Removed the line breaks from the base64 and saved the entire string as an environment variable
3. The private key in my json contained \n line breaks, which caused the JSON.parse to fail. Therefore replaced the \n line breaks on the fly:

const credential = JSON.parse(
  Buffer.from(process.env.GOOGLE_SERVICE_KEY, "base64").toString().replace(/\n/g,"")
)

[kiJu2]

감사합니다. 덕분에 큰 도움이 되었습니다 =)

[leerob]

Hey folks, good news. We've made handling private keys much easier in two main ways:

1. You can now copy paste your .env file directly into the the input! (source)
2. When you paste in private key secrets, we'll automatically convert \n to new lines (source)

[owolfdev]

Hi Lee. I tried this and works great.

I am having an issue with getting google cloud storage to work on Vercel. I hard-coded all of the credentials needed, added them to the .env. Works fine locally. Does not work on the Vercel deployment, even though I added the evironment variables with the technique you described above.

Oliver

[Oyinkansolight]

@owolfdev what I did when deploying to Vercel was that I split the key into parts because the issue was that Vercel couldn't take such a long key as an env variable value, so I then concatenate in my project.

const GOOGLE_SERVICE_KEY = process.env.GOOGLE_SERVICE_KEY_1 + process.env.GOOGLE_SERVICE_KEY_2;

const credential = JSON.parse(
Buffer.from(GOOGLE_SERVICE_KEY, "base64").toString()
);

Hope that is the issue you're facing.

[rcolepeterson]

Do this

import { Storage } from "@google-cloud/storage";

const storage = new Storage({
projectId: "your-project-id",
credentials: {
client_email: process.env.GCS_CLIENT_EMAIL,
private_key: process.env.GCS_PRIVATE_KEY?.split(String.raw\n).join("\n"),
},
});

https://dev.to/derick1530/learn-how-to-upload-files-to-google-cloud-storage-bucket-using-nextjs-api-route-173f

[rcolepeterson]

This solution still does not work for me when deploying via Vercel. :(
Works locally.
I have moved my google code to a gcloud function.

[abdtriedcoding]

Still facing same issue. vercel giving error while giving env key🤷

[pjarnfelt]

With Google Cloud's Application Default Credentials, some API's are looking for a json file.
https://cloud.google.com/docs/authentication/provide-credentials-adc#on-prem
The way to set process.env variables, doesn't suffice in this case. We need to be able to set a link to JSON file. How can we do this most easily?