A Unity package that makes use of the Firebase Javascript SDK to implement the basic Realtime Database functions on WebGL builds
- 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.
- Call any of the basics Firebase Javascript SDK functions from the FirebaseBridge.cs class
- Build for WebGL
- 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...
- 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>
- 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";
// ...
- Realtime Database
- Authentication
- Cloud Functions
- Storage
- Firestore