当サイトは、一部記事に広告を含みます

2025/08/17 2025/08/18

🔰Auth.js(旧NextAuth.js)×Firebaseで認証管理｜ログイン認証編

Web開発

1 ログイン認証にFirebaseだけでなくAuth.js(旧:NextAuth.js)を使うのはなぜ？
2 基本的な認証の流れ
3 ログイン時に生成される2つのJWT：Firebase JWTとAuthjs JWT（NextAuth JWT）の違い
4 サンプルコード（❸）
5 Firebase Authのトークン自動更新について
6 参考

ログイン認証にFirebaseだけでなくAuth.js(旧:NextAuth.js)を使うのはなぜ？

Firebase Authenticationは主にクライアントサイドのみで動作する。サーバーサイドでのセッション管理するならAuth.jsを使った方が便利だから。

参考：https://zenn.dev/link/comments/0a1aa6bc646bfe

基本的な認証の流れ

ユーザーがメール・パスワードでログイン
認証成功後、Firebase AuthenticationでIDトークン（JWT）を発行
NextAuthがIDトークンを受け取り検証・独自のJWTを新規作成

ログイン時に生成される2つのJWT：Firebase JWTとAuthjs JWT（NextAuth JWT）の違い

	Firebase JWT	Auth.js JWT
有効期限	1時間	30日（デフォルト）
用途	Firebase API呼び出し時の認証	アプリ内のセッション管理
署名	Google秘密鍵	NEXTAUTH_SECRET
内容	uid, email, firebase情報など	uid, email, name, カスタムデータなど

Firebase JWTは検証後に破棄され、Authjsが全く新しいJWTを作成。
また、Firebase JWT検証はログイン時のみで、以降はAuthjs JWTのみで認証される。

Firebase JWTは入力検証用、NextAuth JWTはセッション管理用というイメージ。

サンプルコード（❸）

// [...nextauth]/options.ts
export const authOptions: : NextAuthOptions = {
  debug: process.env.NEXTAUTH_DEBUG === 'true', // 開発環境のみデバッグ有効
  session: { strategy: "jwt", maxAge: 30 * 24 * 60 * 60 },
  jwt: { maxAge: 30 * 24 * 60 * 60 },
  
  providers: [
    CredentialsProvider({
      name: "Firebase Auth",
      credentials: {
        idToken: { label: "ID Token", type: "text" },
      },
      async authorize(credentials) {
        try {
          // Firebase JWT（IDトークン）を検証
          const firebaseJWT = await adminAuth().verifyIdToken(credentials.idToken);
          
          return {
            id: firebaseJWT.uid,
            email: firebaseJWT.email,
          };
        } catch (error) {
          console.error('IDトークンの検証に失敗しました:', error);
          return null; // Firebase JWT検証失敗
        }
      }
    })
  ],
  
  callbacks: {
    async jwt({ token, user, account }) {
      if (user) {
        // Firebase情報をNextAuth JWTに保存
        token.uid = user.id;
        token.email = user.email;
      }
      
      if (account) {
        // Firebase IDトークンも保存（オプション）
        token.firebaseIdToken = account.id_token;
      }
      
      return token; // NextAuth JWT作成
    },
    
    async session({ session, token }) {
      // Authjs JWTからセッション情報を構築
      session.user.id = token.uid;
      session.user.email = token.email;
      return session;
    }
  }
};

Firebase Authのトークン自動更新について

前述の通り、ログイン時に生成される2つのJWTは有効期限が異なります。

そのためAuth.js（NextAuth）ではセッションが有効なのに、Firebaseでは切れているという状態が起こります。（ログインはできているのにFirebaseからデータが取ってこれない、みたいな現象が起きる）

それを避けるために「Firebase Authenticationで発行したtokenを更新する」必要があります。

実装方法は下記を参照。

参考

参考にさせていただきました、ありがとうございます・・・🥺！

Next.js（App Router）でFirebase Authenticationを使う

Auth.js | Jwt：
https://authjs.dev/reference/nextjs/jwt

NEXTAUTHのJWT有効期限の設定について：
https://www.getfishtank.com/insights/manage-jwts-and-session-expiry-like-a-pro

---

記事が気に入ったら、ぜひ応援いただけると更新がんばれます☕️

エックスサーバーでWordPressを削除する方法

GitHub経由でPushしてxserverに自動デプロイする｜GitHub Actions

【所要時間たった10分】誰でも簡単！WordPressを始める5ステップ｜エックスサーバー

デジハリオンラインを受講して。現役フリーランスの本音レビュー、選んだ理由・評判・後悔していること。｜Webデザイナー講座