Progressive Web Apps with React

Hiding our API key

We need to move our API key and messagingSenderId to a separate file, and then ensure that the file is not checked into Git:

1. To do so, create a file in public/ called secrets.js. In that file, place the following:

window.apiKey = "YOUR-API-KEY”messagingSenderId = "YOUR-SENDER-ID"

Again, we're taking advantage of the globally accessible window object to store the key. For those of you new to JavaScript, note that it is not good practice to abuse the window object; only use it when absolutely necessary.

2. To use this key in index.html, we can add the following above all the other script tags:

<script src="/secrets.js"></script>

3. Then, in our Firebase initialization:

 <script>     // Initialize Firebase   var config = { apiKey: ...