#secrets from env file defined in Next config defined leaking in client.

45 messages · Page 1 of 1 (latest)

glacial python
#

I am using Nextjs 13.4.3, I have defined variables in next config coming from env file like:

const nextConfig = {
  env: {
    //Google MAPS API KEY
    PLACES_API_KEY: process.env.PLACES_API_KEY,
  },

the issue is it is getting leaked in the client, what can be solution?

sharp crescentBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

frosty dirge
glacial python
#

cant share the code as it contains secrets, but it is like this:

.env

#Google MAPS API KEY
PLACES_API_KEY="Key"

next config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    //Google MAPS API KEY
    PLACES_API_KEY: process.env.PLACES_API_KEY,
  },
  images: {
    domains: [
    ],
  },
};

module.exports = nextConfig;
gritty iris
#

I have never used nextConfig for defining env variables. Can't you just access them from app by:

process.env.ENV_VARIABLE
frosty dirge
#

Code where you are using the api ke

frosty dirge
#

I wasn't even sure why you were using config for env variables

gritty iris
# glacial python I am using Nextjs 13.4.3, I have defined variables in next config coming from en...

Try to create /src/constants/env.ts file, and make your env variables type-safe:

const PLACES_API_KEY = process.env.PLACES_API_KEY ?? null
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3000"

export {PLACES_API_KEY, BASE_URL}

If you import non-prefixed constant in client component it will be null since it's not exposed to the client, and in server components it will work as usual but will be type-safe. No need for using next.config.js.

glacial python
#

the next verison is 13.4.3 so there are no server components

gritty iris
#

if you are using app router there are

glacial python
#

the code is very old, i came up with this solution of:
shifting all the code which needs env to api folder, then hitting it to get the data

but thats just alot of manual work

#

any other alternative?

glacial python
gritty iris
#

Yes I believe it's the first version in which it is stable

glacial python
#

i am using pages directory btw

#

so i dont have any src folder

#

creating a high level constants file will work?

gritty iris
#

I think it will

glacial python
#

i still can find my key in the sources folder

#

by doing this:

export const PLACES_API_KEY = process.env.PLACES_API_KEY;

axios
    .get(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${PLACES_API_KEY}`
    )
gritty iris
#

can you share your entire file where you are using the key

glacial python
#

.env

PLACES_API_KEY=key

constants.js

export const PLACES_API_KEY = process.env.PLACES_API_KEY;

customHook.js

import { PLACES_API_KEY } from "@/constants";

 axios
    .get(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${PLACES_API_KEY}`
    )
#

this is it

#

keys getting exposed

glacial python
#

any thing?

frosty dirge
#

if you're sure it'll be there

#

If you're not sure, then this is the best solution

frosty dirge
glacial python
#

let me share the next config file

frosty dirge
glacial python
#

so basically what i want is

i want to call an api from client using a env variable but don't want that variable to he leaked on the client side

#

is it possible, or not, i dont think so

frosty dirge
glacial python
#

got it, thanks

#

for now sticking to shifting the code to api folder

frosty dirge
#

Summary:

  • Variables were getting leaked to client because it was a hook running on client side
frosty dirge
light bane
glacial python
#

so thats where was the issue