Firebase Authentication で認証状態になったときだけ閲覧できるページを作るという記事で React Router V5 のときの認証状態によるリダイレクトを実装したが、V6 になって同じ書き方ではできなくなったので、公式サイトの方法で実装する。

フロントエンドを React、バックエンドを Go で Sign In With Google （レガシーな Google Sign-In ではなく新しいほう）を実装する。

React Router が v6 になっていたので、新しい記述方法に対応する。

React でビューとロジックを分離するためにカスタムフックを作成する。

認証状態のときのみ閲覧できるページを作りたかったが Fireabase Authentication に少し癖があったのでメモする。

Go で multipart/form-data を受信するには ParseForm() ではなく MultipartForm() を使う必要がある。

ビュー側で「次へ」ボタンを押下するとサーバーサイドで次のページのデータを取得する、というもののやり方がわからなかったが、zenn でやり方を共有してくれていた人がいたので実装してみた。

React で無限スクロールを自力実装したくて調べたら React Hooks を使っているサンプルが出てきたので、まず React Hooks を習得するためにクラスを書き換える。

前回の続きで、ページングを実装する。

自分が作りたいものを実現するためにどうしてもクライアントサイドで Firestore のデータを読み込む必要にかられたので React でデータ読み込みを実装する。