FlutterFlowでFirebase Authenticationのメールアドレスを更新する方法（REST編）

はじめに

Firebase Authenticationを使用して、FlutterFlowでメールとパスワードでサインアップすると、ユーザー情報はデフォルトでFirestoreに保存されます。しかし、FlutterFlowからFirestoreのメールアドレスを変更しても、ログインに使用されるFirebase Authenticationに保存されたメールアドレスは更新されません。

この記事では、FlutterFlowを使用してFirebase Authenticationに登録されているメールアドレスを REST API を使って更新する方法についてまとめています。参考ドキュメントは以下となっています。

https://firebase.google.com/docs/reference/rest/auth?hl=ja#section-change-email

また、REST以外でAuthenticationのメールアドレスを更新したい場合は、カスタムアクションでも可能です。カスタムアクションを使用した方法については、こちらの記事でまとめています。

Firebase Authenticationとは

Firebase Authenticationは、Firebaseのユーザー認証機能を提供するサービスです。

FlutterFlowではデータベースや認証方式として、Supabaseを選択することもできますが、アプリを新規作成する際にもFirebaseの場合だと、連携をサポートしてもらいながら進めることができます。また現時点ではFirebase Authenticationの方が使用できるアクション数（Send E-mail Verification Linkなど）も多くなっているため、FlutterFlowでは最も導入しやすい認証方式となっています。

Firebase Authenticationの概要とFlutterFlowとの連携方法については、こちらの記事でまとめていますので、よろしければそちらも併せてご参考ください。

メールアドレスの更新方法

更新にはRESTを使用しますので、API Callの設定から行います。

ナビゲーションメニューのAPI Callsで「+ Add」ボタンから「Create API Call」をクリックして、新規API Callを作成します。以下の表を参考にCall Definitionの各項目を設定します。

項目	設定値
API Call Name	任意の名前
Method Type	POST
API URL	https://identitytoolkit.googleapis.com/v1/accounts:update?key=YOUR_WEB_APIKEY
Headers	Content-Type: application/json

API URLに指定する「YOUR_WEB_APIKEY」の部分は、Firebaseコンソールの「プロジェクトの設定」ページにある「ウェブAPIキー」に置き換えてください。

Variablesタブで変数を2つ作成します。ここではNameを「idToken」と「email」としていますが、変数名は任意で問題ありません。

Variablesの設定ができたら、Bodyタブで「JSON」を選択してRequest bodyの設定を行います。設定値にはVariablesで作成した変数をドラッグアンドドロップでセットします。

{
  "idToken": "<idToken>",
  "email": "<email>",
  "returnSecureToken": true
}

「idToken」には、ユーザーのFirebaseAuthIDトークンを、「email」にはユーザーの新しいメールアドレスをUI側から指定していくことになります。「returnSecureToken」には、IDと更新トークンを返すかどうかをBoolean型で指定できます。

ここまで出来たら「Save」ボタンで保存しておきます。

API Callのテスト方法

作成したAPI Callのテストは、Response&TestでVariablesを指定して実行していきます。

今回のAPI Callでは、ユーザーのidTokenが必要になりますので、目視できるように一時的にFlutterFlowのUIを利用してidTokenを表示させます。

idTokenは通信や認証に使用される重要な情報であるため、適切な管理と保護が必要です。
セキュリティ的に問題が発生するような公開プロジェクトでは実施しないように注意してください。

メールアドレス更新を実行するページに、Textウィジェットを配置して、Authentication Userの「Id token(JWT token)」をTextにセットします。

画面に表示されたidTokenをコピーできるように、Textウィジェットのプロパティで、Selectableのトグルをオンにしておきます。

Test Modeで起動して、検証ユーザーのidTokenを表示させコピーしておきます。

Define API CallのResponse&Testで取得したidTokenと更新後のメールアドレスをVariablesに指定して「Test API Call」を実行します。Test Responseで「Status:200(Success)」を受け取れば更新成功です。

FirebaseコンソールでもAuthenticationに登録したメールアドレスが更新されていることが確認できます。もしデータが更新されていない場合は、リフレッシュボタンを利用するなどしてデータのリロードを実行してみてください。

アプリからの実行

作成したAPI CallをUI側から呼び出してみます。ここでは、先ほどidTokenを表示する際にも使用したページにメールアドレスの更新アクションを設定しています。

ページには新しいメールアドレスが入力できるTextFieldウィジェットと、更新を実行するButtonウィジェットを配置しておきます。TextFieldのInitial Valueには、Authentication UserのEmailを表示しています。

アクションは次のSetp1～3の手順で作成します。

1. Firebase Authenticationのメールアドレスを更新
2. API Callの実行結果を受け取る
3. Firestore Databaseのメールアドレスを更新

Step1. Firebase Authenticationのメールアドレスを更新

まずは作成したAPI Callを呼び出します。Call Nameで先ほど定義したAPI Callを選択して、VariableにidTokenとemailを指定します。idTokenにはAuthenticated UserのId token(JWT token)を、emailにはTextFieldウィジェットの値をセットします。実行結果をAction Outputとして受け取りたいので、任意のValiable Name（ここではapiResultEmail）を指定しておきます。

Step2. API Callの実行結果を受け取る

実行結果を判断するためのConditionalを追加します（通常、FlutterFlowではAPI CallのActionを作成するとConditionalは自動で作成されますが、作成されない場合は設定が必要です）。
Add Conditionalで先ほど指定したValiable NameのAction Outputsを選択し、API Response Optionsで「Succeeded」を選択します。

Step3. Firestore Databaseのメールアドレスを更新

Setp2で設定したAPI Callの実行結果がSucceededの場合は、Firestore Databaseに登録されているメールアドレスも更新しておきます。Difine ActionでFirestoreの「Update Document」を指定して、Authenticated Userの「User Reference(users ref)」を選択します。Set Fieldsで「email」を選択し、値にはForm VariableでTextFieldウィジェットをセットします。

データベースの更新が完了したら、ここではHomePageに遷移していますが、Authenticationの情報が更新されたことによりトークンが更新されていますので、ユーザーに再ログインしてもらうなど、場合によってはトークンの再取得を含めた対応が必要となります。

もしAPI Callに失敗した場合はSnack Barを表示するように指定しています。

まとめ

今回はFlutterFlowでFirebase Authenticationのメールアドレスを更新する方法についてまとめました。

Firebase Authenticationは、ユーザーの認証とセキュリティを管理するための強力なツールです。アプリの認証でメールアドレスを使用している場合は、ユーザーのニーズに合わせて Firestore Databaseのデータだけでなく、Firebase Authenticationの更新も行いたい場合が多々あると思います。FlutterFlowの利用プランによっては、API Callの設定できる数が少ないので注意が必要ですが、RESTは比較的簡単に実装できるというメリットがあります。

メールアドレスを更新にはカスタムアクションを使用する方法もありますので、そちらはまた別の記事でご紹介したいと思います😊

参考ドキュメント

https://docs.flutterflow.io/data-and-backend/api-calls

https://firebase.google.com/docs/reference/rest/auth?hl=ja#section-change-email