Sign up for our live Camera Kit office hour on July 17 @ 9:30am (PT) / 4:30pm (GMT)

Environment Variables and Camera Kit Web

alex_doudnikov
alex_doudnikov Posts: 14 🔥
edited May 2023 in General #1

Hi Team,

Currently working on a Next.js project and was hoping to get the API keys working through environment variables.

I have found that anytime I set the API key "dynamically" camera kit throws "client.js:1 ConfigurationError: Unsafe apiToken"

I had this occur when I was working on an Angular project before as well.

My setup is as follows:
.env.development contains CAMERAKIT_APITOKEN = "[token key here]"
index.tsx contains const cameraKit: CameraKit = await bootstrapCameraKit({ apiToken: process.env.CAMERAKIT_APITOKEN!, });

It would be nice to use the environment variables instead of hard coding the token to work between staging and prod.

I assume it is set this way to not allow the token to change after compiling or something.

Any way to get it working?

Thanks, Alex

Tagged:

Answers

  • alex_doudnikov
    alex_doudnikov Posts: 14 🔥

    Solved,

    Because my app is delivering the variable to the client it requires the prefix "NEXT_PUBLIC_" in front of the env variable.

  • stevenxu
    stevenxu Posts: 612 👻

    @alex_doudnikov Thanks for closing the loop! My apologies for the delay as I'm catching up. Thanks again!