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

#api #tutorial #coding #webdev

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)

Collapse
 
thomasbnt profile image
Thomas Bnt •

I use dotenv for keys and others sensitive data 💪🏼

Collapse
 
codingnninja profile image
Ayobami Ogundiran •

How did you use dotenv in the browser?

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

Preview of my project about get Last.fm profile stats in one page

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>
Enter fullscreen mode Exit fullscreen mode

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)
    }
}
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

thomasbnt

Integrate Last.fm API with Vue.js

Thomas Bnt ・ Nov 5 '22 ・ 4 min read

#webdev #vue #vite #api

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

Read next

anwarachilles profile image

Custom YouTube Player Gadget with Javascript

Anwar Achilles -

finfin profile image

Things About Nonce & CSRF Token: Differences, Use Cases, and How They Work

Fin Chen -

aryan_shourie profile image

Useful JavaScript tips and tricks that you may not be aware of 💻👨‍💻

Aryan Dev Shourie -

cryptosandy profile image

How Gamification in Web Development Can Supercharge User Experience

Crypto.Andy (DEV) -