9

Can anybody help me please? I try build a web application with Flutter, based on Google Firebase Auth and Cloud Firestore. The project on Android works fine, i can work with users and can get data from my Cloud Firestore database. I've maked a second app(webapp) do all the steps described in Firebase documentation (webapp is registred, hosted on Firebase), inserted all the dependencies in pubspec.yaml

dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.3 firebase_core: ^0.4.4+3 firebase: ^7.3.0 firebase_auth: ^0.16.0

modified the index.html like so:

<body> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="/__/firebase/7.14.3/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="/__/firebase/7.14.3/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> <!-- This script installs service_worker.js to provide PWA functionality to application. For more information, see: https://developers.google.com/web/fundamentals/primers/service-workers --> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('flutter_service_worker.js'); }); } </script> <script> var firebaseConfig = { apiKey: "XXXXXXXXXX-6EL5qIBxWjurRQMcK3pf9W-o", authDomain: "xxxxxxxx.firebaseapp.com", databaseURL: "https://xxxxxxxx.firebaseio.com", projectId: "xxxxxxxx", storageBucket: "xxxxxxxx.appspot.com", messagingSenderId: "xxxxxxxx6198", appId: "1:xxxxxxxx16198:web:cde3457e8dc734d045d227", measurementId: "X-XXXXXXXXXX" }; firebase.initializeApp(firebaseConfig); firebase.auth(); firebase.analytics(); </script> <script src="main.dart.js" type="application/javascript"></script> </body>

but when i try Sign-In or register, Android Studio throws this error message:

TypeError: Cannot read property 'app' of undefined at Object.app$ [as app] (http://localhost:53262/packages/firebase/src/top_level.dart.lib.js:72:56) at firebase_auth_web.FirebaseAuthWeb.new.[_getAuth] (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:42:27) at firebase_auth_web.FirebaseAuthWeb.new.signInWithCredential (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:197:34) at signInWithCredential.next (<anonymous>) at runBody (http://localhost:53262/dart_sdk.js:43135:34) at Object._async [as async] (http://localhost:53262/dart_sdk.js:43163:7) at firebase_auth_web.FirebaseAuthWeb.new.signInWithCredential (http://localhost:53262/packages/firebase_auth_web/firebase_auth_web.dart.lib.js:196:20) at firebase_auth.FirebaseAuth.__.signInWithCredential (http://localhost:53262/packages/firebase_auth/firebase_auth.dart.lib.js:324:90) at signInWithCredential.next (<anonymous>)

What this exception means? What do i wrong? Thanks a lot for any help!

Improve this question

4 Answers 4

Reset to default
10

I had the same problem, wasted a lot of time on it. The main reason for this problem atleast for me was with the cloud_firestore dependency. For me it turned out that it was just some issues with firebase security stuff because I was using a VPN to access internet, and chrome debug browser that ussually pops up doesn't allow to install an extension. For me everything was fine but I was just being blocked from accessing some firebase stuff. To try if this is the case for you run flutter run -d chrome --release and copy the localhost url and paste it in the normal browser not the popup. If everything works fine then you had the same problem as me, if not then maybe you have a different issue then. Hope this saves someone's time.

Remember your index.html file should be configured correctly, should also include every firebase dependency you have on pubspec.yaml. Below is and example of a well configured index.html, just the body tag:

<body id="app-container"> // firebase-app.js should go first. <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script> <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js">. </script> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "xxxxxxxxxxxxx", authDomain: "xxxxxx.firebaseapp.com", databaseURL: "https://xxxxxx.firebaseio.com", projectId: "xxxxx", storageBucket: "xxxxx.appspot.com", messagingSenderId: "xxxxxxx", appId: "1:xxxxxxxxx:web:xxxxxxxxxx", measurementId: "G-NYEW95QM" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); </script> <script src="main.dart.js" type="application/javascript"></script> </body>

And my pubspec.yaml file looks like this:

cupertino_icons: ^1.0.0 firebase_auth: ^0.18.2 cloud_firestore: ^0.14.2 provider: ^4.3.2+2 flutter_spinkit: ^4.1.2+1 simple_animations: ^2.2.3 firebase_core: ^0.5.1 intl: ^0.16.1 folding_cell: ^1.0.0 charts_flutter: ^0.9.0 flip_card: ^0.4.4 progress_dialog: ^1.2.4 image_picker_web: ^0.1.0+2 url_launcher: ^5.7.8 image: ^2.1.18 animator: ^2.0.1 timeago: ^2.0.28 uuid: ^2.2.2 font_awesome_flutter: ^8.10.0 bubble: ^1.1.9+1 google_fonts: ^1.1.1
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hi thanks for the tip. I have the same problem, could you solve the problem to work in debug mode ?
@gbaccetta, Making sure the firebase depencies in your pubspec.yaml file match with the one on the index.html and being updateded should work in debug mode too.
3

You need fix dependencies.

dependencies: flutter: sdk: flutter firebase_auth: firebase_auth_web:
Improve this answer

Comments

0

Try running flutter doctor to see if you have 'Chrome - develop for the web' in the summary

[√] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.18363.1198], locale en-US) [√] Android toolchain - develop for Android devices (Android SDK version 29.0.3) [√] Chrome - develop for the web <- THIS [√] Android Studio (version 4.0) [√] Connected device (3 available)

If not try following the steps in this answer to switch to flutter beta channel and create the right files.

You may have to enable web support for your app as shown here

Improve this answer

Comments

0

I recently have the same issue, turns out that google had updated the firebase_auth plugin a few days ago after updating the package in pubspec.yaml to the latest version solved the issue.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.