FirebaseWebGL

A Unity package that makes use of the Firebase Javascript SDK to implement the basic Realtime Database functions on WebGL builds

Installation

• Copy the FirebaseWebGL folder into your Unity project assets folder.
• Consider also adding the RestClient, Fullserializer and Textmeshpro folders to get the project fully up and running.
• Alternatively, you can import the latest .unitypackage from the repository releases.

Usage

1. Call any of the basics Firebase Javascript SDK functions from the FirebaseBridge.cs class
2. Build for WebGL
3. Include the Firebase app configuration in the index.html file generated by Unity (you can use this tutorial here).

const firebaseApp = firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXX.firebaseapp.com",
    databaseURL: "https://XXXXXXXXXXXXXXX.firebaseio.com",
    projectId: "XXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXX",
    appId: "X:XXXXXXXXXXXXXXX:web:XXXXXXXXXXXXXXXX",
    measurementId: "XXXXXXXXXXXXX"
});
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
// declare other services here...

4. Finally, make sure to also include the Firebase SDKs you need to use in your App (You can find a list of services here). The “modular” version from the SDK version 9 is not working. Use this “compat” version that works as a compatibility mode.

// add this lines before the final <script> tag
// add other firebase services as needed...
<script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore-compat.js"></script>

5. EXTRA STEP: Earlier in 2021 Unity made some modifications to their WebGL library. The following line (window.unityInstance = unityInstance) must now also be added in your index.html, when the unityInstance is created (after the }).then((unityInstance) => { line) so that your app can properly comunicate with Unity.

script.onload = () => {
   createUnityInstance(canvas, config, (progress) => {
   	progressBarFull.style.width = 100 * progress + "%";
    }).then((unityInstance) => {
   	// add this line :
   	window.unityInstance = unityInstance;
   	loadingBar.style.display = "none";
   	// ...

Services

• Realtime Database
• Authentication
• Cloud Functions
• Storage
• Firestore

Additional info

• You can find a working implementaiton of this package here
• For Storage, you'll also need to set up cors for your bucket. More info here or in the README.txt file in the Storage example in the project.