~Firebase Authentication2~ TypeScript & React & Firebase で何かつくってみる18

2020年5月24日 18:41

認証が入ったことで権限を実装できるようになったはず.
そちらを進めようかとも思うがその前に Authentication まわりの雑多な試行錯誤をメモしておく.

Sign Out

前回 firestore.rules の効果を試すためにアカウント削除までやったのだが, よく調べたらサインアウトする API があった.
しかしそれは匿名認証の解説では一切触れられていない.
その理由は実際に作ってみてわかった.

ユーザーのログアウトを行うには、signOut を呼び出します。

以下のような小さな関数を作り, ボタンによってサインイン・サインアウトができるようにしてみた.

const signIn = () => {
 firebase.auth().signInAnonymously().catch(error => {
   console.log(`signIn() error : ${error.code}, ${error.message}`);
 });
}
const signOut = () => {
 firebase.auth().signOut().catch(error => {
   console.log(`signOut() error : ${error.code}, ${error.message}`);
 });
}

signOut() はパスワード認証の解説ページに書かれていたが, 匿名認証であってもサインアウトはできた.
実際にサインアウトしてみると firebase.auth().onAuthStateChanged() コールバック関数が null を返してきた.
サインアウト後に firestore にアクセスできないことも確認できた.

「なるほどこれが正しいやり方か」

と一瞬は思ったのだが, 気がつくと Firebase Console 上に匿名アカウントがたくさんできていることに気づく.

どうも匿名アカウントは使い切りのようだ. 一度サインアウトしたら二度と同じアカウントでサインインはできない.
・・・いや頑張ればできるかもしれないが, API はそのようにできていない.

匿名認証の仕組みをよくよく考えてみればそれも当然かも知れない.
詳しい人が見ればアホなことやっているように見えるだろうが, 私はこういうことを手を動かして確かめるのは嫌いではない.

「ユーザー情報をリセットしたいときには使えるかな」

とも思ったが, それならいっそ「アカウント削除」の方がデータベースにゴミが残らないのでよい. つまり匿名認証にサインアウトはいらない.

ちなみにアカウント削除は.firebase.auth().currentUser.delete() で実行できるようだ.

ユーザー情報の変更

ユーザーに関する情報は firebase.auth().currentUser から常に最新の情報を得ることができる. 上記の delete() を始めとするユーザー情報操作APIもここを起点に呼び出せる.

上記サイトにはメールアドレスやパスワードの設定方法が書かれているが, 匿名認証でも使いそうなのは delete() 以外ではプロフィール更新くらいか.

updateProfile メソッドを使用して、ユーザーの基本的なプロフィール情報（ユーザーの表示名とプロフィール写真の URL）を更新できます。

これでユーザーの表示名を変えてみる.
プロフィール写真も使ってみたいが, 登録できるのはURLだけで保存先を別に考える必要があるため今回は保留とする.

src/App.tsx

 const updateDisplayName = (name: string) => {
   const currentUser = firebase.auth().currentUser;
   currentUser?.updateProfile({
     displayName: name,
   }).then(() => {
     setUser(null);
     setUser(firebase.auth().currentUser);
   }).catch(error => {
     console.log(`updateProfile() error : ${error.code}, ${error.message}`);
   });
 }

App() 内に以下のような関数を作って, UIからの変更を firebase へ送信する.
この処理で 2点ほどつまずいた.

・当初, 変更に成功したら onAuthStateChanged() から通知が来ると勝手に思っていた. しかし onAuthStateChanged() のトリガはサインイン・サインアウトだけらしい.
結果は戻り値の Promise で受け取る・・わけでもなく, 成功したときには既に firebase.auth().currentUser に反映されている, という仕組みらしい.

・上記の setUser() は React.useState() によって作った状態変更関数だが, 素直に setUser(firebase.auth().currentUser) だけ呼び出しても再描画が起こらない. currentUser の実体が変わっていないらしく Reactが変更に気づいてくれないようだ.
一度 null で上書きすることで解決したがちょっと居心地が悪い.

ひとまずユーザー名が変更できることを確認する.

うまくいってそうだが, Firebase Console から確認する手段は見つからなかった. まぁページ再読込しても残っているしきっとうまくいってるのだろう.

内容が薄い気もするが, そこそこの量になったのでここまでとする.

この記事が気に入ったらサポートをしてみませんか？