技術記事

micomia株式会社の井上です。今回はAuth系について解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Auth系とは

Authとは、新規登録(Create Account)やログイン(Login)、アカウント削除(Delete Account)に関するものを指します。

2. Auth系の実装方法

まず、Auth系の実装には基本的にTextFieldが2つとButtonが必要なのでそれらを実装します。

TextFieldとButtonの実装に関しては別の記事で詳しく紹介しているのでぜひそちらをご覧ください。

Text Fieldとは？｜初心者向けのFlutterFlow徹底解説

Buttonとは？｜初心者向けのFlutterFlow徹底解説

まずは新規登録から実装していきます。

2-1. 新規登録の実装方法

ButtonにActionを追加します。新規登録はCreate AccountというActionになっているのでAdd ActionでFirebase AuthenticationのCreate Accountを追加します。

今回はメールアドレスをパスワードでアカウント作成できるようにしたいのでAuth ProviderはEmailに設定します。

Email Fieldはメールアドレスを入力する方のText Fieldを指定します。今回はText Field1を選択します。

もう一つのText Fieldはパスワード入力欄にしたいのでText Fieldの設定でPassword FieldをONにします。

先ほどのCreate Accountを実装しているButtonのAction設定に戻って、Password FieldのところにPassword Field 1を設定します。

その下のConfirm Password Fieldは確認のためにパスワードを再度入力してもらうためのものです。こちらを追加したい場合はText Fieldをもう一つ追加して先ほどと同じようにPassword FieldをONにします。

その後、Create AccountのAction設定に戻って、Confirm Password FieldのところにText Fieldを設定します。

これで、ユーザードキュメントが自動で作成されます。

今回はメールアドレスとパスワードのみなので自動で格納されますが、さらにユーザーネームなどを入れたい場合はもう一つText Fieldを増やして、Created DocumentにあるSet FieldsでAdd Fieldから設定します。

usersコレクションに入れているユーザーネームを格納するフィールド(今回はdisplay_name)を選択し、Widget Stateから先ほど追加したText Fieldを選択します。

2-2. ログインの実装方法

次にログインを実装していきます。

新規登録と基本的に変わらないので2-1を理解できている方は非常にわかりやすいと思います。

まずButtonのActionとしてFirebase AuthenticationのLog Inを選択します。

Auth Provider新規登録と同じくメールアドレス(Email)で設定します。

Email FieldはText Field1、Password FieldはPassword Field 1で設定します。

これでログインすることができます。ログインできなかった場合は自動的にエラー分が表示されます。

2-3. Delete Accountの実装方法

次にDelete Account(アカウント削除)を実装していきます。

アカウント削除にメールアドレスとパスワードは不要ですが、このボタンを押したときにアカウント削除がされるとします。

Firebase AuthenticationのDelete Userを選択します。

これでアカウントが削除されます。

3. さいごに

今回はAuth系について解説していきました。Auth系はアプリを作る上で欠かせない処理になっているのでぜひ本記事を参考にしながら実装してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら