18

I'm trying to implement sign-in function with Firebase Authentication in Flutter for Web app. I can already use Firestore to store/ extract data in the same app without signing-in.

When executing the app, it shows the error "NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'"

I think the error is caused by calling auth() method.

Can you please advise how I should fix it? Or, is Firebase Authentication not supported Flutter for web yet??

Imported firebase.dart. https://firebase.google.com/docs/reference/js/firebase

import 'package:firebase/firebase.dart';

Initialized an object with auth() and called sign-in method from the parameter.

final Auth _auth = auth();

Future<UserCredential> signIn(String email, String password) async {
  final UserCredential user = await _auth.signInAndRetrieveDataWithEmailAndPassword(email, password);
  return user;
}
Hirotaka Nishimiya
  • 351
  • 1
  • 3
  • 10
  • Did you debug your app to see if the value that you're passing to _auth is indeed null? Are you sure you're connected with your app to the database, i.e: no mistakes in the app_name, having google-services.json in the app folder. – Ryk Jul 19 '19 at 14:44
  • Ryk, thanks for the comment. Actually it's not possible for me to confirm whether _auth is indeed null or not, because the app is crashed when just calling `auth()`... Is there any way to confirm it? Yes, I can fetch and put data with firestore from the app. I don't use google-services.json nor GoogleService-Info.plist, because the app is for web. Instead of that, I call `initializeApp()`. (https://firebase.google.com/docs/reference/js/firebase#initialize-app) – Hirotaka Nishimiya Jul 20 '19 at 14:08
  • do you use a package from pub? if you use package firebase from pub, you should also insert firebase-app.js to your page. I don't use flutter for web, so I don't know where to place the script on your app. – oon arfiandwi Jul 22 '19 at 13:23
  • Oon, thank you. Yes, I use a package from pub and also insert firebase-app.js to my index.html. `` – Hirotaka Nishimiya Jul 27 '19 at 15:00
  • FYI. I also found a discussion in Reddit below. But I cannot find the difference between my code and this code... https://www.reddit.com/r/FlutterDev/comments/ccqgz0/flutter_web_firebase_authentication/ – Hirotaka Nishimiya Jul 27 '19 at 15:04

4 Answers4

38

You need include this in your index.html file too:

<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
Travis Reeder
  • 38,611
  • 12
  • 87
  • 87
2

In my case I had to refresh the cache, reload/hot reload dart with R is not enough, so go on chrome and press CTRL+SHIFT+R at the same time to clear the cache.

Antonin GAVREL
  • 9,682
  • 8
  • 54
  • 81
1

It is because you are not calling the function, in this case: authStateChanges, in your index.html file. In addition to adding the script: <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>, you also need to add import { authStateChanges } from "https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"; to your Firebase SDK imports section (<script type="module">...).

Oprimus
  • 1,652
  • 3
  • 11
  • 20
0

For anyone who might have also been in my situation. I realized I added this line <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script> twice so I deleted one, saved, and run flutter clean.

nivla360
  • 973
  • 14
  • 21