ゲストログイン機能

[yushi32]

• [x] ゲストログイン機能
  • Firebase Authenticationの匿名認証機能を利用
• [x] ゲストユーザー用の初期データを作成するサービスクラスを作成
• [x] usersテーブルにroleカラムを追加
  • ゲストユーザーを識別し、一括で一定期間後に削除するため
• ゲストユーザーのアクセス制限
  • [x] LINE連携ボタンをクリック時、モーダルを表示して本会員登録へ誘導
  • [x] Firebase上で匿名ユーザーを永久ユーザーへ変更（Googleアカウントに紐付ける）
  • [x] DBのroleカラムをguestからgeneralへ
  • [ ] 本会員への移行処理が完了した後、その旨をモーダルに表示

[yushi32]

匿名ユーザーを永久ユーザーへ変更した後、モーダルの表示内容が動的に遷移しない

• FirebaseのonAuthStateChanged関数は認証状態の変化を検知して更新されたuserオブジェクトを受け取っていて、これをcurrentUserステートにセットしグローバルに管理している。
• linkWithPopup関数で匿名ユーザーを永久ユーザーに変更するとonAuthStateChanged関数が発火してuserオブジェクトが更新される。
• これによってcurrentUserも更新され、モーダルで表示しているコンポーネントも再レンダリングされるはずだが、表示内容が変わらない。
• 手動でコンポーネントを再レンダリングすると、表示内容が変わる。
• Dockerコンテナの再起動後や別のブラウザで動作確認を行うと、期待通りに表示内容が変わる場合もある。
• linkWithPopup関数だとonAuthStateChanged関数が発火しないという情報もあり。
  • https://topaz.dev/recipes/7828a3dc2849ea5720fb

[yushi32]

解決?

onAuthStateChanged関数のコールバック関数に以下を追加することで解決したかも。

const nextOrObserver = async (user) => {
  if (!user) {
    setLoading(false);
    return;
  }

  // このif文を追加
  if (!user.isAnonymous) {
    setCurrentUser(user);
  }

  setLoading(true);
  setCurrentUser(user);
  setLoading(false);
};

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, nextOrObserver);
  return unsubscribe;
}, []);

[yushi32]

現状整理

• 1つ前のコメントで解決したかに見えたけど、その後ページをリロードして再度動作確認をするとUIが動的に遷移しなくなった。
• その後、以下のコード（1つ前のコメントで追加した分を省いたコード）で何度でもUI遷移に成功する。

const nextOrObserver = async (user) => {
  if (!user) {
    setLoading(false);
    return;
  }

  setLoading(true);
  setCurrentUser(user);
  setLoading(false);
};

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, nextOrObserver);
  return unsubscribe;
}, []);

• しかし、別タブで再度動作確認をするとUI遷移しない...。
• この2つのタブの差が何かを調べるために検証ツールのネットワークタブを比べてみたところ、以下のことがわかった。

ネットワークタブから分かったこと

• 「本登録を行うボタン」を押す → ポップアップに遷移 → アプリに戻ってきてUIが動的に遷移する場合は、上の画像のようなリクエストが発生していることが分かった。
• このリクエストがない場合は、UIが動的に遷移しないことも確認。

?_rsc=英数字5文字ってなに？

ChatGPT に聞いてみた。

• ?_rsc=英数字5文字とは、React Server Component のレスポンスを取得するためにサーバーからクライアントにデータを非同期的に取得するためのリクエストらしい。
• つまり、React Server Component からのデータ取得が発生/成功していないために、UI遷移がトリガーされないのでは？
• UI遷移のトリガーはグローバルステートcurrentUserであり、useFirebaseAuth.jsには`'use client'をつけていないので、ここからのデータフェッチが行われていないことが原因の可能性はありそう。
• useFirebaseAuth.js内で React Hooks を使用しているので RSC ではないと思われる。
• ただ、どうすれば常にRSCへのリクエストを発生させられるかは分からない。

[yushi32]

さらなる調査結果

• 結局原因は分からず。
• RSC が原因っぽいけど、問題が起こっているGuestUserAnnoucementコンポーネントで呼び出しているはクライアントコンポーネントだし、src/home/page.jsにも'use client'が記述されているのでこちらもクライアントコンポーネント。
• なので、どの RSC にリクエストを送っているのか見当がつかない。
• また、さらに複数タブで検証を重ねたが、1回目ですぐUI遷移が成功する時もあれば、新しく開いたタブで何回試しても成功しない時もあった。
• 成功しないタブの場合、成功するタブでもう一度UI遷移を成功させてから試すとUI遷移に成功し、その後も成功するようになるケースがあった。
• タイミングによっては成功する（ブラウザ起動後の初回アクセス時、Docker コンテナの立ち上げ直後など）し、安定させる目処がつかないので一旦ブランチを push して vercel のプレビュー環境で検証することにする。

[yushi32]

期待する遷移

1. ヘッダーの「LINEアカウント連携」ボタンをクリックすると、以下のようなモーダルが表示される。
2. 「本登録を行う」ボタンをクリック後、Googleアカウントの認証ポップアップに移動する。
3. 使用する Google アカウントを選択するとポップアップが閉じ、アプリに戻ってきた後にモーダルが以下のように遷移する。

現状は3.でモーダルが更新されず、1.のままになってしまう場合がある。