How to deal with sensitive env variables on react context?
Answered
Greater Pewee posted this in #help-forum
Greater PeweeOP
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.
Answered by Asian black bear
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.
6 Replies
Asian black bear
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.
Answer
Greater PeweeOP
Oh, i think i get it. Do you mean return env variables with route handlers?
Asian black bear
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.
Greater PeweeOP
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.
Chub mackerel
also make sure to not name your "secret" environment variables with
NEXT_PUBLIC_ - it will expose them in the client bundle