[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました

by bauhaus

on 3月 23, 2025

以前、お送りしてきた、以下の、Next.jsとFirebaseの認証・DBを利用した、学習記録アプリのチュートリアル記事シリーズですが、

BAUHAUS

[Next.js] 学習記録アプリ Firebase認証・DB実装（前編）

🕒️2025年1月10日

Reactのチュートリアルとして、これまで、SupabaseやFirebase連携等、色々なパターンで紹介してきた、学習記録アプリですが、今回は、Next.jsを利用して開発してみましたので、紹介いたします。GitHub上にもコードを公開してますので、よろしければ参考にしていただければと思います。https://github.com/amaya690221/pub-next-learnings-firebaseNext.jsは、Reactをベースに開発された、フロントエンドフレームワークです。ReactはJavaScript言語を用いた、Webサイト上のUIを構築するためのライブラリで、フレームワークとは、開発を...

BAUHAUS

[Next.js] 学習記録アプリ Firebase認証・DB実装（後編）

🕒️2025年1月25日

Next.jsによる学習記録アプリ、Firebase認証・DB実装の後編です。前編に続き、後編では、DBデータの更新・新規登録・削除機能の実装、ユーザーログイン、サインアップ、パスワード更新・リセット処理の実装、そしてGitHubとの連携とVercelへのデプロイ、AWS Amplifyへのデプロイについて記載しています。GitHub上にコードを公開してますので、よろしければ参考にしていただければと思います。https://github.com/amaya690221/pub-next-learnings-firebaseNext.jsは、Reactをベースに開発された、フロントエンドフレームワークです。Re...

BAUHAUS

[Next.js] 学習記録アプリ Firebase認証・DB実装（Admin SDK編）

🕒️2025年2月23日

前編・後編に渡ってお送りしてきた、Next.jsとFirebaseによる、学習記録アプリ、今回は番外編として、Firebase Admin SDKを活用してみましたので、ご紹介したいと思います。Firebase Admin SDKは、管理者レベルの操作をサーバーサイドから行うためのライブラリです。サーバー側でトークンベースのセッション管理・検証を行ったり、カスタム認証を実装したりすることが出来るものです。GitHub上にコードを公開してますので、よろしければ参考にしていただければと思います。前編・後編のコード：https://github.com/amaya690221/pub-nex...

整理の意味も含め、Zennで書籍化してみました。

Zenn

Next.js + Firebaseによる学習記録アプリチュートリアル

https://zenn.dev/amayann/books/ecf7145aa6dca9

Next.jsのチュートリアルコンテンツです。学習記録アプリをNext.js及びTypeScriptで開発していきます。また、認証機能及びDBはGoogleのFirebaseを利用、Firebase SDKに加え、サーバーライブラリのFirebase Admin SDKを使用し

今回、新たにUIをshadcn/uiで刷新してみました（今まではChakra UI）。以下のイメージです。

また、Firebase Admin SDKをより積極的に実装しています。DB操作については、これまでのFirebase SDKから、Admin SDKの実装に切り替えています。

- //import { collection, getDocs, query, where } from "firebase/firestore";
+ import { getFirestore } from "firebase-admin/firestore"; 
//クライアント SDK (`firebase/firestore`) から Admin SDK (`firebase-admin/firestore`) に移行、より強力な権限とセキュリティ機能を利用可能に

ログインやサインアップ処理もAdmin SDKで実装してみたのですが、下記の制限がある事が判明し、クライアントサイドの実装に戻しました。

Firebase Admin SDKの制限：

パスワードのハッシュに直接アクセスできない
パスワードの検証機能が提供されていない

つまり、ユーザー認証の際、パスワードを検証出来ないと言うことです（これは生成AIもそう回答してきてクライアントサイドの実装を強く推奨されたので、そうなのだと思います）。
これは別のカスタム認証システムの構築等でユーザーの妥当性を担保した上で、Firebasdeにアクセスさせると言う仕掛けが必要になると思います。

実装してみてよく分かったのは、以下内容です。

Firebase Admin SDKはあくまでも、管理者が操作する前提であり、Firebaseの管理権限を持つサーバーで実行する前提
故に非常に強力な権限を持つ。FirestoreDBのCRUDもセキュリティルールを無視して実行出来る。
ユーザーログイン、追加・更新、パスワード更新も、そのユーザーの認証を行わなくても実行出来る。
クライアントのUIからAdmin SDKが実装されたサーバAPIを利用しDB操作やユーザ認証関係の処理を行う場合は、この強力な権限を考慮の上、サーバー側で、ユーザーの正当性担保、適切な権限付与をコントロールできるカスタム認証システムの構築等が必要
そこまで実施が必要なシステム要件が無ければ、クライアントでの実装が合理的

この辺の棲み分けはこちらの記事が分かりやすかったです。

Zenn