Flutter web and Firebase authentication TypeError: Cannot read property 'app' of undefined
Question
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!
4 answers
solution1
10 2020-10-31 05:42:55
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
solution2
3 2020-05-24 13:34:28
You need fix dependencies.
dependencies:
flutter:
sdk: flutter
firebase_auth:
firebase_auth_web:
solution3
0 2020-12-01 01:31:59
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
solution4
0 2022-08-15 17:36:15
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.