📢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:");

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 🤩.

Comments

[Thomas Bnt]

I use dotenv for keys and others sensitive data 💪🏼

[Ayobami Ogundiran]

How did you use dotenv in the browser?

[Thomas Bnt]

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 Last.fm stats.

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

 <form>
        <label for="lastfm_key">Enter your Last.fm 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>
      </form>

And I register it in the localStorage like this :

 methods: {
   saveKey() {
      if (this.key === "") {
        alert("Please enter your Last.fm key.")
        return
      }
      localStorage.setItem("lastfm_key", this.key)
    }
}

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

Also created a post about this project

Integrate Last.fm API with Vue.js

Thomas Bnt ・ Nov 5 '22 ・ 4 min read

#webdev #vue #vite #api