Next.js Discord

Discord Forum

Environmental variables in client

Unanswered
Cairn Terrier posted this in #help-forum
Open in Discord
Cairn TerrierOP
So am using "react-map-gl" and it requires a access token/api key to be passed as a prop to the map component. When I try to access the token from "process.env" it doesn't work. I'm thinking maybe I can't access process.env because this is a client component. So how do I get or use the key/token?

17 Replies

Cairn TerrierOP
Would they still be secure though?
@Cairn Terrier Would they still be secure though?
joulev
No. You need to expose it in the client for that library to work, and anything exposed in the client is not secure
Cairn TerrierOP
Thought so, thank you for the help. So I don't really have a choice on that do I?
If it is a public token, just expose it normally. If it’s a secret token maybe consult the map box documentation on how to proceed
Cairn TerrierOP
No its secret but haven't found much in the docs further then vanilla JS
Asian paper wasp
For the record, that's an access token. So it is pseudo-secret.
But adding NEXT_PUBLIC_* env var is your best bet, since obviously, the map needs to init on the client side
Cairn TerrierOP
Alright thank you for the advice! I guess I'll try to just lock it down to my specific URL at least
Asian paper wasp
Found this BTW, not sure if that helps.
https://docs.mapbox.com/accounts/guides/tokens/#url-restrictions
Cairn TerrierOP
Is this something I can add? Was thinking about trying this but wasn't sure if it would work with next
But all other points are applicable and you should follow them
Cairn TerrierOP
Ok thank you I will, is something like this at all applicable?
Asian paper wasp
He was most likely referring to these: