Hide your Firebase config with .gitignore in Flutter web projects

When adding Firebase to a Flutter app, we need to add google-services.json on Android and GoogleService.plist on iOS.

A similar setup is required on web. We can copy this script from the Firebase project settings, and add it to the body tag of the generated index.html file:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-project-id>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-messaging-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

However, all the values inside firebaseConfig are better stored inside a separate file. This can be very useful for public open source projects, so that we don't share our Firebase config details with the whole world. 😉

Code with Andrea is free for everyone. Help me keep it that way by checking out this sponsor:

Faster mobile builds; faster deliveries with Codemagic CI/CD: Do not waste valuable developer resources, replace manual intervention and build, test and deliver mobile apps 20% faster with CI/CD for mobile.

To solve this, we can move the generated firebaseConfig variable into a ./firebase-config.js file in our project (make sure to use export):

export var firebaseConfig = {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-project-id>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-messaging-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
};

We can then import this in the index.html file:

<script src="./firebase-config.js"></script>

<!-- https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file -->
<script type="module">
  // Your web app's Firebase configuration
  import { firebaseConfig } from './firebase-config.js';
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

Finally, we can hide the config file from git, by adding it to .gitignore:

# web
web/firebase-config.js

Viola! We can now commit and push, safe in the knowledge that firebase-config.js will remain private to us.

NOTE: This does not prevent end-users from seeing the configuration variables, because once the web app is loaded, it's easy to inspect all the loaded Javascript code. Still, it's useful to not commit this code when sharing open source projects, as I have done here.

Happy coding!