0

I'm working on a school project using vanilla HTML, CSS, and JS. When compete, we're expected to have the repo working via GitHub Pages. It's above and beyond the scope of the assignment, but I wanted to connect to a Firebase Firestore database.

The question is, how do I hide the API key/information, using only vanilla HTML, CSS, and JS (no frameworks), and have a working GitHub Pages demo for the instructor to mark?

I've looked at a number of websites and YouTube videos, but every tutorial I've come across is either using a framework or some stack of packages that would go against the 'rules' of the assignment. I can use a .env file, but to my understanding, because the repo is public the key would be public.

Any advice would be greatly appreciated.

  • 1
    https://docs.github.com/en/github/authenticating-to-github/removing-sensitive-data-from-a-repository – j08691 Mar 31 '21 at 17:54
  • 1
    What information are you referring to? Note that Firebase's configuration block is explicitly intended to be included in your client-side application, and is in fact required for that code to be able to find its Firebase resources on the server. See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public/37484053#37484053 – Frank van Puffelen Mar 31 '21 at 18:18
  • That's a good lead, thanks Frank. I'll dive deeper into those articles. Essentially, as as student, my knowledge of how GitHub Pages is working is limited. I'm assuming my best bet is to, perhaps, write a .env file and make the repo private. I can still test the live site using GitHub Pages but any sensitive info in the .env file should be invisible to regular users just browsing my Pages site or looking at the sources tab in the inspect window. Correct? –  Apr 04 '21 at 17:41

1 Answers1

0

The answer is .env files (sort of).

If you're building a frontend project and you're connecting the front end directly to your database, your credentials will be visible.

The correct way to handle keys is to put them in your backend API. Of course, when I asked this question, I wasn't "there yet".

Your backend API can have a public endpoint that listens to incoming requests. You don't need to include your database credentials in the request coming from your frontend app. It hits your backend api at its public endoint where your backend code then handles the incoming request. On your backend you have the connection to your database with the necessary credentials. This is how you are supposed to build it.

For beginners, you might want to try Google Firebase. With Firebase you can create Firebase Functions. With these, you can create a simplified API endpoint to target with your front-end requests. It triggers the Firebase Function to run, and inside this function, you can store your private keys/credentials. Because your Firebase Functions run on your own secure backend, the client never sees the keys.

If you're learning or familiar with Vue3, here's a good article to check out: https://www.bezkoder.com/vue-3-firebase/#more-9260