How does API authentication works with only public key on javascript?

Question

English is not my first language. I'll do my best to explain my self.

---

I am creating an API to be used by clients via Javascript. The client should include on his website something like this:

<script>
    var my_api = { 
        public_key: "123456"
    };
</script>
<script async src="https://api.example.com/v1/init.js"></script>

So... how can I use a Public Key to verify the client's website?

I know I can get the referer and compare it in with the key on my database, but:

(a) If the referer may be faked, a public key won't be useful because is already public

And (b) if the referer can't be faked, Why would I use a public key? Is not enougth with the referer?

I can't ask the client to encrypt something to varify if he have the right key if anybody can knows the key...

I have only created APIs with both private and public key (or only private) in the past.

Finally, I want it all be installed on client's website by copy/pasting few lines of JS code (that's why I want only use public key).

I know it is possible because that's how Google Ads works, I just need help to figure out the way.

---

Note: I searched for other topic on the forum but I couldn't find any answer, just thing related the SSH and nodeJS. I am developing a simple API with PHP and pure JS.

Answer 1

The problem that you might run into with putting the api key on their website is that it could be viewed by anyone and used. Use a Process environment variable on the system they are using to host their site. You can use this resource for information: https://hackernoon.com/how-to-use-environment-variables-keep-your-secret-keys-safe-secure-8b1a7877d69c