flutter firebaseAuth アカウント作成に必要な部品

#はじめに
現在PJで使用が決まったFlutterを勉強中。アカウント作成機能とログイン機能などをつけるためにFirebaseを使用しています。
以下の投稿ではflutterでアカウント作成機能を実装するために必要なパーツを紹介します。(自分が今後見返すためのメモでもあるww)
自分もまだまだ勉強中なので、おかしなことが書いてあったらすみません、、、、

#実装環境
・使用言語：dart
・AndroidStudio 4.1.2
・m1 Macでの開発中
・アーキテクチャ：MVVM(providerを使用中)　いずれriverpodも試してみたい。。。

#アカウント作成の概要
今回の作成する方式はメールアドレスとパスワードによるアカウント作成方法になります。
Firebaseには他にもGoogle認証を使用するものや電話番号を使用した認証などがありますが、自分はやったことがないので割愛します。（いつかこれもやってみたい）

#Widgetの作成
まずはwidgetの作成です。
今後コピペで使用しやすいようにシンプルなものを作成しています。

```dart
class AccountCreatePage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return ChangeNotifierProvider<AccountCreateModel>(
        create: (_) => AccountCreateModel(),
        child: Scaffold(
          body: Center(
            child: Consumer<AccountCreateModel>(builder: (context, model, child){
                return Container(
                  padding: EdgeInsets.all(24),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextFormField(
                        controller: model.emailController,
                        decoration: InputDecoration(hintText: 'email'),
                        onChanged: (text) {
                          model.setEmail(text);
                        },
                      ),
                      TextFormField(
                        controller: model.passwordController,
                        decoration: InputDecoration(hintText: 'password'),
                        onChanged: (text) {
                          model.setPassword(text);
                        },
                      ),
                      CommonButton(
                        text: '新規アカウント作成',
                        padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
                        useIcon: true,
                        onPressed: () async {
                          try{
                            await model.signUp();
                          }
                          catch(e){
                          }
                        },
                      )

                    ],
                  )
                );
              }
            )
          )
        ),
    );
  }
}
```
"CommonButton"については自分がパーツとして別で作成したものなので、使う際には自分でパーツを作成するかお好きなスタイルのボタンを挿入してあげてください。
try, catchについても同様です。

onPressedでボタンが押下された際に呼ばれるsignUpは次のModelの作成で紹介いたしますが、setEmail, setPasswordでセットされた値をもとにアカウントを作成するメソッドになります

#Modelの作成

```dart
class AccountCreateModel extends ChangeNotifier{

  final emailController = TextEditingController();
  final passwordController = TextEditingController();

  String? email;
  String? password;

  void setEmail(String email){
    this.email = email;
  }

  void setPassword(String email){
    this.email = email;
  }

  Future<void> signUp() async {
    this.email = emailController.text;
    this.password = passwordController.text;

    //firebase authでユーザー追加
    final result = await FirebaseAuth.instance
        .createUserWithEmailAndPassword(email: email!, password: password!);

    final user = result.user;
    final uid = user!.uid;

    final doc = FirebaseFirestore.instance.collection('user').doc(uid);

    doc.set({
      'uid': uid,
      'email': email,
    });
  }
}


```
こちらのAccoutCreateModelでは前述したwidgetにて入力されたemail, passwordをもとにsignUpメソッドのcreateUserWithEmailAndPasswordでアカウントを作成するのが主な機能です。

```dart
final doc = FirebaseFirestore.instance.collection('user').doc(uid);

    doc.set({
      'uid': uid,
      'email': email,
    });
```
また上記の箇所で、作成したuidとメールアドレスを紐付けてFireStoreに追加する処理を加えています。
とても簡単ですね、、、

#まとめ
Firebaseはflutterと同じくgoogleが提供しているものなので、互換性もよくおすすめです。
自分もそこまで時間をかけることなく実装することができました。
お試しでFirebase Authを使ってみたいという方はぜひコピペして使ってみてください。