DEV Community

Cover image for 📢Stop adding API_KEY to tutorials. Do this...
Ayobami Ogundiran
Ayobami Ogundiran

Posted on

📢Stop adding API_KEY to tutorials. Do this...

There are so many tutorials out there that add API_KEY to code.

And some other people now use their keys. Don't do that again.

📢 Do this instead 👇

const API_NAME = "myAPI";
const API_KEY = prompt ("Enter your API_KEY:");
Enter fullscreen mode Exit fullscreen mode

This gives you the chance to test your code and learners can create their API_KEY to test it.

Note: This is only for the browser 👋.

You can further explain the normal way to do it and why you do it that way not to confuse learners.

Thank me later 🤩.

Top comments (3)

thomasbnt profile image
Thomas Bnt

I use dotenv for keys and others sensitive data 💪🏼

codingnninja profile image
Ayobami Ogundiran

How did you use dotenv in the browser?

thomasbnt profile image
Info Comment hidden by post author - thread only accessible via permalink
Thomas Bnt • Edited

I'm not using dotenv in browser, but useful for projects and to build a website like on Netlify.

I prefer to use localStorage with an HTML input, for that.
There is an example to get your stats.

Preview of my project about get profile stats in one page

In my form, I'm getting the input of the key :

        <label for="lastfm_key">Enter your key</label>
        <input type="password" autocomplete="false" v-model="key" placeholder="key" id="lastfm_key">
        <button @click="saveKey" class="save">Save</button>
        <button @click="deleteKey" class="delete">Delete</button>
Enter fullscreen mode Exit fullscreen mode

And I register it in the localStorage like this :

 methods: {
   saveKey() {
      if (this.key === "") {
        alert("Please enter your key.")
      localStorage.setItem("lastfm_key", this.key)
Enter fullscreen mode Exit fullscreen mode

If you are curious about this code, you can check that here 🥳

Also created a post about this project

Some comments have been hidden by the post's author - find out more