Using secret keys in client component NextJS 14+
Answered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
I have client components that needs secret API keys to work and I want to keep those keys private and not accessible by javascript.
For example if I use something like google maps in my app, putting my API key in env variable and access it inside a client component means prefix it with NEXT_PUBLIC.
But I don't want to since I don't want to expose the client publicly. How can I keep the key secret and still use it in my client component.
Route handlers won't work in this case (google maps) cause the package doesn't proxy the map requests and if I fetch the key from a route handler, I will be able to see it in the network tab of the browser.
Do you have any suggestion on how to do this correctly ?
For example if I use something like google maps in my app, putting my API key in env variable and access it inside a client component means prefix it with NEXT_PUBLIC.
But I don't want to since I don't want to expose the client publicly. How can I keep the key secret and still use it in my client component.
Route handlers won't work in this case (google maps) cause the package doesn't proxy the map requests and if I fetch the key from a route handler, I will be able to see it in the network tab of the browser.
Do you have any suggestion on how to do this correctly ?
Answered by Asian black bear
You should be able to filter requests by domain on the settings for Google Maps.
6 Replies
Asian black bear
You should be able to filter requests by domain on the settings for Google Maps.
Answer
Asian black bear
In that case it doesn't matter that you make your API key public since it won't be usable outside of your domain if I'm not mistaken.
@Northeast Congo Lion I have client components that needs secret API keys to work and I want to keep those keys private and not accessible by javascript.
For example if I use something like google maps in my app, putting my API key in env variable and access it inside a client component means prefix it with NEXT_PUBLIC.
But I don't want to since I don't want to expose the client publicly. How can I keep the key secret and still use it in my client component.
Route handlers won't work in this case (google maps) cause the package doesn't proxy the map requests and if I fetch the key from a route handler, I will be able to see it in the network tab of the browser.
Do you have any suggestion on how to do this correctly ?
Normally you can get different API keys for use privately and publicly (the public has a lot less scope). An example is stripe give you a secret key and a publishable key. Same with any feature flagging service. Different for each. Maybe google have similar?
It looks liken they don't but follow this guide to ensure it is restricted:https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key
Northeast Congo LionOP
Thanks for your help guys, @Asian black bear @adam.birds I can filter requests by domain on Google Maps.
Works like a charm