Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide API keys using Vanillas JS

Is this possible? I'm doing a Frontend mentor challenge that connects and pulls Github user information after searching for a user. Everything works and is connected. I'm ready to push my code and submit my project but I would like to hide my API keys. I'm fairly new to JS, is there a way to do this without NodeJS? I've removed the keys themselves but this is where I am fetching the API data.

class Github {
  constructor() {
    this.client_id = CLIENT_ID_GOES_HERE;
    this.client_secret = CLIENT_SECRET_GOES_HERE;
  }

  async getUser(user) {
    const profileResponse = await fetch(`https://api.github.com/users/${user}?client_id=${this.client_id}&client_secret=${this.client_secret}`);

    const profileData = await profileResponse.json();

    console.log(profileData);

    return {
      profileData,
    };
  }
}
like image 222
Jchapa Avatar asked Nov 18 '25 21:11

Jchapa


1 Answers

Is not possible, any javascript key used on the client-side has to be public, you should use your Github secrets on the server-side only, using node-js and environment variables to avoid adding it to a public repository.

https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa

like image 177
Link Strifer Avatar answered Nov 21 '25 09:11

Link Strifer



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!