【Flutter・Firebase】NoSuchMethodError: 'message' method not found ・ FirebaseのAuthentication（認証）がうまくいかない

# 環境

Flutter (Channel beta, 1.18.0-11.1.pre, on Mac OS X 10.15.4 19E287, locale ja-JP)

# 発生したエラー

FirebaseのAuthentication（認証）を利用してユーザー登録機能を実装し試したところ以下のエラーが発生

``` 
NoSuchMethodError: 'message' method not found
Receiver: Instance of 'JSNoSuchMethodError'
Arguments: []
```

# 関係するコード

```index.html
<!DOCTYPE html>
<html>
  <head>
  // 省略
  </head>
  <body>
    // 省略

    // FirebaseのSettings > 全般 > マイアプリでは、ここから
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>
    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        // 省略
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>
    // ここまでをindex.htmlに追加するように記載されている。

    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>
```

```main.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

// 省略

class _MyAuthPageState extends State<MyAuthPage> {

  // 省略

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Column(
            children: <Widget>[
              TextFormField(
                // 省略
              ),
              TextFormField(
                // 省略
              ),
              RaisedButton(
                onPressed: () async {
                  try {
                    // 省略
                  } catch (e) {
                    setState(() {

                      // この部分でエラー発生
                      infoText = "登録NG：${e.message}";

                    });
                  }
                },
                // 省略
              ),
              Text(infoText)
            ],
          ),
        ),
      ),
    );
  }
}
```

# 調査
`e` に対してmessageが無いということなので、そもそも `e` には何が入っているのか調べてみようと、試しに `e` のみを呼んでみると 

```
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth`
```

うーん、どうやら上手くfirebase.authが読み込めてないっぽい。

とりあえず、このエラー文を使って `flutter such as null firebase.auth` の文章でググった。

すると、本家flutterのissueをトップに発見！（このissueはauthではなくstorage使おうとしている）
https://github.com/flutter/flutter/issues/37079

「解決方法はstackoverflowを見よ！」とのことで、以下が該当のstackoverflow
https://stackoverflow.com/questions/57242045/flutter-web-tried-to-call-a-non-function-such-as-null-dart-global-firebase-s

ふむふむ、自分のコードにはないscriptがあるなー

```
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-storage.js"></script>
```

おそらくfirebase-auth.jsが必要なんだろうということで、
念の為 `firebase authentication firebase-auth.js` の文章でググると公式リファレンスが出てきた。
https://firebase.google.com/docs/web/setup?hl=ja

読み進めると「必要なら追加してね！」との文章が！

```
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/6.2.0/firebase-auth.js"></script>
```

# 解決方法

というわけでscriptを追加。

```index.html
<!DOCTYPE html>
<html>
  <head>
  // 省略
  </head>
  <body>
    // 省略

    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>

    // この1行を追加！
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>


    <script>
      var firebaseConfig = {
        // 省略
      };
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>
```

無事に新規登録できた！

# 補足
Firebaseの各機能を使いたいたびにscriptを追加するのが面倒な場合は以下のようなコードを1行書けばOK。

```
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase.js"></script>
```

※ただし、本番環境アプリには非推奨とのこと。（Firebase公式リファレンスより）

# おわりに

『もっと簡単にできる方法あるよーーー！』
『ここ間違っているよーーー！』
等ございましたらコメントいただけると幸いです！

Twitterアカウント
・本垢： https://twitter.com/jiko797torayo
・Flutter用： https://twitter.com/tora3flutter