#How to deal with sensitive env variables on react context?

9 messages · Page 1 of 1 (latest)

quiet pine
#

Hi guys, i'm developing a Web3 application and trying to save some variables on React State, but i read on Next docs, that variables on client components should be prefixed with NEXT_PUBLIC, but i have some variables that are sensitive, like Private Keys and etc. How to deal with it? I'm using latest NextJS version. Should i use server components? I'm new to these new Server/Client components features. Thanks.

gentle mesaBOT
#

🔎 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)

flat gazelle
#

Use sensitive environment variables such as secrets only in server-side code. If your client-side code needs to access them, proxy their requests through route handlers.

quiet pine
#

Oh, i think i get it. Do you mean return env variables with route handlers?

flat gazelle
#

No, that would make them accessible and you leaked your secrets that way.

#

If you need to do perform actions requiring private keys such as issuing an API call to an AI service you do that in a route handler and call the handler from your client-side code.

quiet pine
#

Perfect. I think i need to refactor my code to just use non sensitive information on react context. The wallet requires private key as parameter, and i think i need to do transactions that requires wallet information, on the server. Thanks! I will figure out how to do it.

night willow
#

also make sure to not name your "secret" environment variables with NEXT_PUBLIC_ - it will expose them in the client bundle

gentle mesaBOT