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

sabrinaesaquino profile image

Conjuring Cursed Halloween Tales with Qdrant's Dark Arts

Sabrina -

balrajola profile image

Top 10 Modern JavaScript Patterns for 2025

balrajOla -

akpvt profile image

CMS: Payload CMS

akpvt -

sudhanshu_developer profile image

Mastering State Management with the useCallback( ) Hook in React.

Sudhanshu Gaikwad -