Use environment variables

[dhmacs]

How can I pass environment variables? I would like to pass some api key and secrets both to api and frontend lambdas, how can I do that?

I tried like this but it doesn't work:

# serverless.yml
myApp:
  component: serverless-next.js
  inputs:
    env:
      API_KEY: demo

[danielcondemarin]

@Macs91 Use next's build time configuration . This is the recommended approach for managing environment config. in your pages.

[dhmacs]

@danielcondemarin I tried it, but I see that it leaks env variables to the client... Given that I intend to store secrets I can't use that 😬

[danielcondemarin]

@danielcondemarin I tried it, but I see that it leaks env variables to the client... Given that I intend to store secrets I can't use that 😬

Ohh I see. Sorry I wasn't entirely clear how build time env. works. Sounds like there is scope then for injecting env. variables via serverless.yaml. Reopening ...

[danielcondemarin]

@Macs91 Could you share how you're accessing the env. config. in the page? i.e. on getInitialProps I'm guessing?

[dhmacs]

Yes, the secret will be accessed from getInitialProps.. I dug a bit more, and it seems that only the env variables that are explicitly referenced on client side code are visible in the bundle, so basically env variables are not exposed unless they are explicitly included in client side code?

So If I don't want the env variable to get included in the bundle maybe it's enough to use it under this condition:

if (!process.browser) {
   console.log("my secret", process.env.SECRET);
}

Ok so maybe this way it can work, but we have to be careful to make sure the env variable are not referenced inside the client bundle.

[danielcondemarin]

@Macs91 Sounds incredibly easy to leak the secure config. by accident., so I'll be adding support for runtime only env. configuration via a serverless.yml input. Stay tuned 😄

[dhmacs]

Yep I thought that too 😅 When env variables are set only on the lambda it's much harder to leak secrets by mistake. Thanks 👍

[danielcondemarin]

@Macs91 Found out today Lambda@Edge doesn't support environment variables :/

Hopefully this will be supported / available soon! But for now you'll have to workaround it by using the build time config. with care. I'll keep the issue opened.

[dhmacs]

Bummer! I didn't know that.. Hopefully they will announce support at re:Invent 😁

[danielcondemarin]

Bummer! I didn't know that.. Hopefully they will announce support at re:Invent 😁

That's what I'm hoping. All I can do for now is ask for it 🙂

[gbwashleybrown]

Oh no... is there still no way to do this? I used NextJS and this component to handle a simple contact form but I'd like to not leak the email address the form sends the submission to.... Anyway to handle this? If not then this has practically killed my app with this dead in the water :(