Adding Firebase SDK In Unity WebGL builds!

Are you looking to develop a WebGL Unity App and you want to use Unity but just found out the Firebase SDK doesn't work? This might solve your problems!
- - - - - - - -
Firebase WebGL library I made: github.com/rot...
Firebase WebGL Implementation example: rotolonico.git...
Add Firebase Javascript SDK: firebase.googl...
Interacting with browser scripting in WebGL: docs.unity3d.c...
- - - - - - - -
| Check out the full Firebase Chat playlist: • Chat messaging system ...
| My Cloud Functions tutorial: • Firebase Cloud Functio...
| My Firebase Realtime Database Rules tutorial: • Firebase Rules Tutoria...
| Fullserializer library: github.com/jac...
| Download this video's code: github.com/rot...
| My video on Firebase Realtime Database Rules: • Firebase Rules Tutoria...
| My video on doing REST API requests to Firebase Realtime Database in Unity: • How to use Firebase Da...
- - - - - - - -
| Check out my Machine Learning in Unity playlist: • An introduction to Neu...
| Check out my Firebase playlist: • How to use Firebase Da...
| Join my coding discord: / discord
- - - - - - - -
#firebase #unity #webgl

[@uNicoDev]

A few updates on the video: 1) The library now also supports Cloud Firestore basic requests (along with Auth, Storage and Cloud functions) 2) I will copy-paste John Louis-Strakes Lopez's comment on updates on the WebGL build: Earlier in 2021 Unity made some modifications to their WebGL library, and a few things in this video became outdated. When applying the below tweaks, however, everything should work as expected: Instead of saying unityInstance.Module.sendMessage(... in your JSLib, you want to say "window.unityInstance.sendMessage(....". There's no need to include 'Module', and your browser is going to throw a hissy fit because it can't identify unityInstance. In addition, you need to make sure your script.onload function in index.html looks like this: script.onload = () => { createUnityInstance(canvas, config, (progress) => { progressBarFull.style.width = 100 * progress + "%"; }).then((unityInstance) => { window.unityInstance = unityInstance; loadingBar.style.display = "none"; fullscreenButton.onclick = () => { unityInstance.SetFullscreen(1); }; }).catch((message) => { alert(message); }); In other words, you need to incorporate the following line: window.unityInstance = unityInstance; This is now fixed and incorporated in the library!

[@ankitwarkade6920]

after doing all this I got the error message in the text field

[@tomcruise1387]

​@@ankitwarkade6920 SOLVED: yes the error I had was: Error: No Firebase App '[DEFAULT]' has been created. Then I had another error, Firebase.FireCloud IS NOT A FUNCTION After 9 hours of deep diving I found out you don't have to use the script-module version in html. Only use and everything will work. also if you use the last version of it will not work. It only work with version 8.10

[@diver1235]

Hi, i got this error in console: exception thrown: TypeError: Cannot read properties of undefined (reading 'SendMessage'),TypeError: Cannot read properties of undefined (reading 'SendMessage') at _SignInWithEmailAndPassword

[@blasterfoundry5535]

@@diver1235 it happened to me too. I fixed it by writing "window.unityInstance = unityInstance;" inside the "script.onload" of the index.html of my build. You have to write it after the semi-column of "fullscreenButton.onclick". Hope it helped!

[@uNicoDev]

​@@diver1235 Every now and then Unity changes stuff on how this integration works! This is really annoyting, but I suggest looking at this page for updating the implementation: docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html (I think now you just have to do unityInstance.SendMessage instead of doing .Module). You might need to update all the jslib files with this new syntax.

[@farrael_]

Videos like these are a rare gem. Just when you need it most. Very nice job and objective explanation, mate. So much content in 25 minutes.

[@samuelhuber8639]

Its been 2 years, and this is still the best solution out there! Your library is so extensive and well thought out, you could sell it. Thanks a lot

[@moltoni]

I cant begin to explain how useful your code has been. Thanks a lot!! Awesome work!

[@alfredomercado2970]

This is freakin awesome mate! Good job very straight forward.

[@brianaleon4516]

Hey mate! amazing workaround, it is still functional in 2023!

[@filippofrattapasini961]

We should make a statue of you. Thanks from a fellow italian for your amazing work!

[@GwenCinoS]

Hello there! Amazing! But do you think it's still working? Because I take the plug to test it, and just when I build the plugin test scene... I have a lot of errors in WebGL

[@hadyhesham1203]

Great Library , thanks so much for saving us hours of work !

[@abudriaz9678]

I am trying to run your git project I build the auth scene, when I clicked the sign up button I got the error firebase not defined

[@squer1000]

Man are you even real :O , big thumbs up for making this!

[@ascode2films691]

i don't know if I'm doing anything wrong, but I'm stuck here: firebase.database is not a function. It's coming from the firebasedatabase.jslib when I try to post a JSON Key. Like stated on the Github page I'm using 9.14.0/firebase-app-compat.js, but it's still not working. Any help would be appreciated

[@moreugamestudio4820]

any news about this ?

[@KastroLoL]

oh! you rock man! it was awesome! thank you for that

[@upwarestudios2090]

EXCELLENT!! This exactly what I was looking for. Thank you very much!!

[@DanyMaorMico]

How can I update data and not just read data?

[@christiankarlsilveirasiebj2452]

Is this approach still working in 2024 with Unity 2022+?

[@theAAGfilms]

Hey @uNivoDev, I realize it's been a few years since you uploaded this video, but I have a question: I am running into a problem that I don't see anyone having and it has to do with how you call the library in your c# file. When I run the program, I get this error: EntryPointNotFoundException: GetJSON assembly: type: member:(null). The only solution I could find online was to mess with the [DllImport("__Internal")] and replace it with the name of the library, but that just made it so that the library couldn't be found. Do you or anyone watching this have any idea how to get around this issue?

[@uNicoDev]

No, I didn't encounter this problem, I just implemented the imports from these docs: docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html

[@ChiefDev]

Any updates?

[@SanketJadhav-y5i]

Hi uNicoDev Thankyou for the amazing tutrorial, as explained , I have followed everything also created Test App on Firebase, and copied the web code and pasted it in index.html after building the WEBGL app, but then too "firebase is not defined" is appearing, tried different ways then too the same error popups up ..

[@lefeezy]

You're awesome! Thanks for sharing this!

[@marioshadjiaros2856]

Hello Nico can you explain how can we use Firebase storage with WebGL. I'm trying to run the example in your project but I failed. Thanks in advance.

[@andhikadimas6345]

Is this not working anymore? I install all assets from the github, fix all errors from UnityIntances issue and Pointer_stringify issue. Implement it just like in the example scene but never get my Data from Database :((

[@suai-w8y]

how you fix UnityIntances issue and Pointer_stringify issue.?

[@josephziadeh8414]

Hello sir, I am using unity 2020, and followed every step of your tutorial but keep getting unityInstance is not defined every time I build, is there a solution to this ?

[@uNicoDev]

Yeah with some templates when you build for webgl the unity instance is called "gameInstance" instead; I believe this is not consistent in my codebase. I believe there was an issue reported on the github page of this project: github.com/rotolonico/FirebaseWebGL/issues/3

[@mariotcarreon]

Thank you this video really helped a lot! :D

[@flipcrafty]

hi mate! havent seen you in awhile! hope you are having a good day!

[@uNicoDev]

Thanks man, you too!

[@GuidoSalimbeni]

Hello Domenico, I am new to your channel and I found it very useful. I am starting a chat in Unity and I am not sure if I should go with the Firebase SDK or trying to develop it using the Firebase Rest API. It is a simple project and I would like to have it available as a webgl first. I can see here you found a work around, at the same time can you tell me the drawback of developing it without the SDK? What are the main advantages of using the SDK? Is it that with rest API I cannot get instance updates?

[@wisdomkhan]

Great work. Smart work.

[@muffafaYoutube]

how can I store object rotation and other things (save-load system) in firebase? how should serialize them?

[@ayylmao.mp3]

Hi, I noticed there is some Auth stuff in the repo, but I'm not sure if it's possible to get the firebase auth user token (getIdTokenResult()) from the js sdk to the unity side. I'd like to use custom claims in the token to verify access to paid features in my game. I'll take a more in-depth look later this week, but if you know I'd appreciate the info, thanks!

[@aboodriazy3387]

how did you add the firebase in you unity webgl project you did not explain it

[@dezhung90]

I got firebase is not defined (in firebase.database() lines). Could you help?

[@Volks24Records]

same, did you find a solution ?

[@nilbaro7346]

Same, did someone already find a solution for this?

[@egeorcun8083]

Still same or i can not do it. Please help

[@JevLogin]

This is strange... but it doesn't work. Can you please show me now in 2023 how to build a WEBGL build? I took your project, substituted my data, it doesn't work...

[@JevLogin]

An abnormal situation has occurred: the PlayerLoop internal function has been called recursively. Please contact Customer Support with a sample project so that we can reproduce the problem and troubleshoot it.

[@mathtabla2356]

Make sure SendMessage is "SendMessage" not "sendMessage"

[@Kraaven2026]

I DID THIS

[@penart.creativ4490]

Is it safe to save config data in html? what if people took it through the impact browser?

[@MrCitizenphil]

Thank you for the video it was really helpful. However I am having an issue trying to reference the database reference in code, I was previously using "private static DatabaseReference _ref;" but this is not permitted under WebGL - do you know how I can do this for WebGL, please?

[@briansoderberg1594]

Hi, I'm new to the game here... I'm having issue with index.html errors. Could someone post the full index.html that currently works for the app in this video? Thanks!

[@abudriaz9678]

what different we have to do to firestore stuff instead of realtime database

[@Sadeq_Laith]

Thanks, it is very helpful. would you add cloud storage in future?

[@MyMinfo]

DO you have any recommendations for Firebase and Unity PC game?

[@ronbarak8524]

Is there a way to use firebase Rest API not on webgl (unity)?

[@kalechips965]

This is awesome - nice job! Is there any reason to put our Post requests in coroutines?

[@daniyalniazi1771]

Im actually happy he made a mistake in the end. This guy actually made everything without a mistake and without testing anything....WTF MAN EITHER THIS IS SCRIPTED OR YOUR SKILLS ARE JUST OUT OF THE WORLD

[@akashmew]

how to make google analytics to work with the webgl build ???

[@rickloyd8208]

Thanks sounds clear and easy, I will give it a try! UPD: It's really working and very easy to implement. They also have remote config (alpha) but I am missing crashalitcs. I can handle the error but I would prefer to see them in crashalitics tab. So probably I will need to create my own custom event and send error message as a parameter (however, Firebase do not let us to see all those events, unless we will use big data). Any suggestion for workaround?

[@bhupiistersingh4097]

Thanks for the efforts you have put. I tried implementing the same logic few months back and was successful on most of the part. One thing that I wanted to make possible was to make google user login and have a call back of some kind. Is there a way to open login window in pop up and close it after login and continue with the application?

[@almn-leader]

Thx man!

[@moreugamestudio4820]

make it work?

[@nattyboyz]

Thank you very much, you save me a lot of time!!!!

[@mrbinggrae5954]

Do you know how to do GoogleLogin in Unity Webgl?

[@JevLogin]

Хорош! 😅 You is really cool man! 🎉 Я как раз вчера над этим голову ломал 😂 Странно... Почему firebase ещё до сих пор не сделали сами, хоть у них уже стоит ссылка на webgl in plugins

[@BrontoKroxig]

If this will work with Firestore it will be awesome! ^^

[@nikhilsood6530]

I want to if you can show how to enable service worker on WebGL as we need it for FCM.

[@zeonmatrix3270]

Can we use firebase analytic like this ?

[@louismastbooms5048]

This is all localhost. How do I host it online with firebase hosting

[@javiercasado4277]

hi, I have a question how do I transform the JSON into a unity object list?

[@javiercasado4277]

How to transform a JSON dictionary into a user array? JSON --> ``` { "1": { "date": "03-03-2021", "points": "10", "username": "karen" }, "2": { "date": "03-03-2021", "points": "1", "username": }, "3": { "date": "03-03-2021", "points": "4", "username": "Javu" }, } ``` my c# class --> ``` public class User { public string username; public int points; public string date; public User() { } public User(string username, int points, string date) { this.username = username; this.points = points; this.date = date; } }```

[@jorgeluispuchavanegas8186]

Thank you! Your work is very helpful. Could you work with coroutines? because I have to present data before starting some functions

[@uNicoDev]

Thanks for the feedback! I had done a video specifically on coroutines in the past, but might be outdated: kzbin.info/www/bejne/iHOTfWCfodKIhtU&ab_channel=uNicoDev

[@dhanrajsinhgohil9342]

Very helping!

[@abhayverma9466]

hii , can any one guide how to get all the child in particular format

[@mathtabla2356]

This is so helpful

[@walaoRIKi]

Interesting, Thanks!

[@nasir-siddique]

Thanks a lot! I thought there is no work around except the REST API.

[@waymanharris1284]

Thank you!

[@n1x381]

I literally love u

[@ccaolrss]

this could work for firebase firestore? btw, thanks for the tutorial

[@uNicoDev]

Hey, sorry for the really late reply but yeah I just added support for Firestore in the library if you still need it

[@ccaolrss]

@@uNicoDev thank you

[@KrayZ_Kat]

Man ... Really I need how to upload images and download to unity with REST API please T_T ... that's all i need ... I've been trying for months man with CLoud functions and all that but ...well ... anyway ty. PS: And i'm working on pc games ... sdk way won't work i think...

[@bhupiistersingh4097]

If nothing works for you, best way is to encode your image into a base64 string and save that in firebase database via REST API.

[@KrayZ_Kat]

@@bhupiistersingh4097 Thanks !!! I'll try. Thanks again for the advice.

[@kordeyrow]

Good job!

[@tlz1303]

Thank you!! :) In Version 2020.2.4f1 had a problem that "unityInstance" was not defined. I fixed it by modifying the WebGL template and setting window.unityInstance to unityInstance when it gets created. Does anyone know why unityInstance is undefined? (Or if someone has the same problem feel free to ask)

[@inessaid1245]

I have the same problem. Can you please explain how you fixed it more?

[@mhmde3]

I had the same problem and i have fixed it, in unity 2020.1 and later new system was released and if you noticed there is less files in the template and build folders, basically you have to define the unityInstance your self in the index.html file: replace this in the create function, and every thing should work correctly createUnityInstance(canvas, config, (progress) => { var script = document.createElement("script"); var unityInstance; progressBarFull.style.width = 100 * progress + "%"; }).then((ui) => { unityInstance = ui;

[@tettogreen]

Flawless)

[@osmanaktas77]

thats fucking good bro

[@oleksandrakeehl8095]

Ah, I want to marry you :'D This was amazing, thank you so much

[@Toadi_]

Brain Size: Massive

[@cristianjuarez1086]

theres literally 0 documentation on your work, which is odd because its a really great one :/

[@nikhilsood6530]

Sad, couldn't like the video more than once.