FirebaseのAuthentication使い方(flutter)  実装編

# FirebaseのAuthentication機能を使うには…
### 初めに
この記事の続きです

https://qiita.com/TT-RR/items/db20bc9f0d6f026c6e17

UIはこちらのテンプレートを使用しています

https://zenn.dev/joo_hashi/articles/fc6914a5d74629

https://www.fluttertemplates.dev/

### 1.新しくauthentication.dartを作成
```authentication.dart
import 'package:firebase_auth/firebase_auth.dart';

class Authentication{
  static final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  static User? currentFirebaseUser;
}
```

### 2.アカウント新規作成画面の実装
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986347/a69ac5dc-0f6c-cb53-5179-4847759bc6e6.png" alt="アカウント新規作成画面" width="200">

メールアドレスとパスワードを引数で受け取り、アカウントを作成。
うまくいかないときは、auth登録エラーと出力。
```authentication.dart
static Future<dynamic> signUp({required String email,required String pass}) async{
      try{
         UserCredential newAccount = await _firebaseAuth.createUserWithEmailAndPassword(
             email: email,
             password: pass
         );
         print('auth登録完了');
         return newAccount;
      }on FirebaseAuthException catch(e){
        print('auth登録エラー: $e');
        return false;
      }
  }
```

クラスの下にControllerを定義して、5つ全部が埋められているときだけアカウント作成という処理を作る。
```create_account.dart
//名前
TextEditingController nameController = TextEditingController();
//ユーザーID
TextEditingController userIDController = TextEditingController();
//自己紹介
TextEditingController selfIntroductionController = TextEditingController();
//メールアドレス
TextEditingController emailController = TextEditingController();
//パスワード
TextEditingController passController = TextEditingController();
```

if文で5つ全部が埋められているか判断し、trueならアカウントを作成。
その結果をrusultに格納し、resultがtrueならログイン画面に戻る。
```create_account.dart
ElevatedButton(
    onPressed:() async{
        if(nameController.text.isNotEmpty
            && userIDController.text.isNotEmpty
            && selfIntroductionController.text.isNotEmpty
            && emailController.text.isNotEmpty
            && passController.text.isNotEmpty
        ){
        var result = await Authentication.signUp(
            email: emailController.text, 
            pass: passController.text
        );
        if(result == true){
            Navigator.pop(context);
        }
    }
},
```

### 3.ログイン画面の実装
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986347/05c0bb96-43ef-5636-e387-1c41c61c74ba.png" alt="ログイン画面" width="200">

authentication.dartのsignupクラスの下に新しいクラスを追加して、そこにコードを追加
```authentication.dart
static Future<dynamic> signIn({required String email,required String pass}) async{
    try{
      final UserCredential _result = await _firebaseAuth.signInWithEmailAndPassword(
          email: email,
          password: pass
      );
      currentFirebaseUser = _result.user;
      print('authサインイン完了');
      return true;
    } on FirebaseAuthException catch(e){
      print('authサインインエラー: $e');
      return false;
    }
  }
```

Firebaseに格納されているメールアドレス・パスワードと一致すればtrue
```login.dart
ElevatedButton(
    onPressed: () async{
        var result = await Authentication.signIn(
            email: emailController.text,
            pass: passController.text
        );

        if(result == true){
            Navigator.pushReplacement(
                context, MaterialPageRoute(
                    builder: (context) => //行きたい画面のクラス名()
                ));
        }
    }, child: Text('ログイン')
),
```

これで実装完了!!