Does the API key need to be public to be used? (Discussion)

[spenserschwartz]

Hi there, I've noticed that you get a hydration error when trying to use a non-public API key in your .env file (in Nextjs, but I imagine this would happen everywhere). I'm fairly certain I've seen that this is required, but I can't find the documentation stating as much anymore. Is this by design, and what is the recommended way to protect your API? Currently, I am setting website restrictions on the API key via Google Cloud, but want to see what everyone else is doing.

[mrMetalWood]

Yes, there is no way to load the Google Maps Api in the browser without also providing the API key in the browser (which is public for everyone).

Basically there are three ways to protect your key and usage:

• Website referrer restrictions (as you already did)
• API restrictions (only allow Maps API/Places API for a specific key for example)
• Add quota restrictions for a key or an API (certain amount of requests per hour/day/user)

[spenserschwartz]

Thank you @mrMetalWood. It's a shame it's set up as so 🤷