"use client";

import { initializeApp, getApps } from "firebase/app";
import { firebaseConfig } from "./config";
import { getAuth } from "firebase/auth";
export const firebaseApp = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
export const auth = getAuth(firebaseApp);

// サーバーサイドでのみ実行されるコードを強制
// https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment
import "server-only";

import { headers } from "next/headers";
import { initializeServerApp } from "firebase/app";

import { firebaseConfig } from "./config";
import { getAuth } from "firebase/auth";

export async function getAuthenticatedAppForUser() {
  throw new Error("not implemented");
}

type FirebaseConfig = {
  apiKey: string;
  authDomain: string;
  projectId: string;
  storageBucket: string;
  messagingSenderId: string;
  appId: string;
};

// 環境変数を読み込み、存在しない場合はエラーをスローする関数
function getEnvVariable(key: string): string {
  const value = process.env[key];
  if (value === undefined) {
    throw new Error(`環境変数 ${key} が設定されていません`);
  }
  return value;
}

const config: FirebaseConfig = {
  apiKey: getEnvVariable("NEXT_PUBLIC_FIREBASE_API_KEY"),
  authDomain: getEnvVariable("NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN"),
  projectId: getEnvVariable("NEXT_PUBLIC_FIREBASE_PROJECT_ID"),
  storageBucket: getEnvVariable("NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET"),
  messagingSenderId: getEnvVariable("NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID"),
  appId: getEnvVariable("NEXT_PUBLIC_FIREBASE_APP_ID"),
};

// デプロイ時に引用符("")を削除してクリーンな文字列にする必要がある
Object.keys(config).forEach((key) => {
  const configKey = key as keyof FirebaseConfig;
  const configValue = config[configKey] + "";
  if (configValue.charAt(0) === '"') {
    config[configKey] = configValue.substring(1, configValue.length - 1);
  }
});

export const firebaseConfig = config;

import { GoogleAuthProvider, signInWithPopup, onAuthStateChanged as _onAuthStateChanged, User } from "firebase/auth";
import { auth } from "@/lib/firebase/clientApp";

// 認証状態の変化を監視する関数
// ユーザーがサインインまたはサインアウトしたときにコールバック関数が呼び出される
export function onAuthStateChanged(cb: (user: User | null) => void) {
  return _onAuthStateChanged(auth, cb);
}

// Googleアカウントでサインインする関数
export async function signInWithGoogle() {
  const provider = new GoogleAuthProvider();

  try {
    await signInWithPopup(auth, provider);
  } catch (error) {
    console.error("Googleでのサインイン中にエラーが発生しました", error);
    throw error; // エラーを呼び出し元に伝播
  }
}

// サインアウトする関数
export async function signOut() {
  try {
    return auth.signOut(); // Firebaseのサインアウトメソッドを呼び出す
  } catch (error) {
    console.error("サインアウト中にエラーが発生しました", error); // サインアウトに失敗した場合のエラーハンドリング
    throw error; // エラーを呼び出し元に伝播
  }
}

mport { initializeApp, cert, getApps } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";

const serviceAccount = require("/firebaseSecretKey.json");
export const firebaseAdmin =
  getApps()[0] ??
  initializeApp({
    credential: cert(serviceAccount),
  });

export const auth = getAuth();

npm i next-auth

openssl rand -base64 32

# Next Auth
NEXTAUTH_SECRET=rDo15EMKxXGIkjDfbkgoBWgKFg4PwoeLnYzPY6RYNSs=

'use client';

import { SessionProvider as NextAuthSessionProvider } from 'next-auth/react';

export interface SessionProviderProps {
  children: React.ReactNode;
}

const SessionProvider = ({ children }: SessionProviderProps) => {
  return <NextAuthSessionProvider>{children}</NextAuthSessionProvider>;
};

export default SessionProvider;

import { GoogleAuthProvider, signInWithPopup, onAuthStateChanged as _onAuthStateChanged, User, UserCredential } from "firebase/auth";
import { auth } from "@/lib/firebase/client";

// 認証状態の変化を監視する関数
// ユーザーがサインインまたはサインアウトしたときにコールバック関数が呼び出される
export function onAuthStateChanged(cb: (user: User | null) => void) {
  return _onAuthStateChanged(auth, cb);
}

// Googleアカウントでサインインする関数
export async function signInWithGoogle(): Promise<UserCredential> {
  const provider = new GoogleAuthProvider();

  try {
    const userCredential = await signInWithPopup(auth, provider);
    return userCredential;
  } catch (error) {
    console.error("Googleでのサインイン中にエラーが発生しました", error);
    throw error; // エラーを呼び出し元に伝播
  }
}

// サインアウトする関数
export async function signOut() {
  try {
    return auth.signOut(); // Firebaseのサインアウトメソッドを呼び出す
  } catch (error) {
    console.error("サインアウト中にエラーが発生しました", error); // サインアウトに失敗した場合のエラーハンドリング
    throw error; // エラーを呼び出し元に伝播
  }
}

export interface User {
  id: string;
  name: string | null;
  email: string | null;
  image: string | null;
}

import { create } from "zustand";
import { User } from "../types";

interface AuthState {
  user: User | null;
  setUser: (user: User) => void;
  clearUser: () => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null }),
}));

import { signInWithGoogle } from "@/lib/firebase/auth";
import { signIn as signInByNextAuth } from "next-auth/react";

export const useSighIn = () => {
  const signIn = async () => {
    try {
      const userCredential = await signInWithGoogle();
      const idToken = await userCredential.user.getIdToken();
      await signInByNextAuth("credentials", {
        idToken,
        callbackUrl: "/",
      });
    } catch (error) {
      console.error("ログイン処理中にエラーが発生しました", error);
    }
  };

  return { signIn };
};

"use client";

import { useSignIn } from "../hooks/useSignIn";

const LoginButton = () => {
  const { signIn } = useSignIn();

  return (
    <button type="button" onClick={signIn}>
      Googleでログイン
    </button>
  );
};

export default LoginButton;

// # 処理フロー
// ## このファイルの前段階
// （クライアントサイド：ログインが行われるとFirebaseでユーザー認証が行われ、idTokenが発行される）
// （クライアントサイド -> サーバーサイド：クライアントサイドで発行されたidTokenをNextAuthに渡す）
// ## このファイル内
// 1. サーバーサイド：Next Authの設定ファイルの中で、Firebaseのadminを利用してidTokenの検証が行われる。 
// 2. サーバーサイド：検証が成功したらFirebaseからidTokenが持つ情報（Email, UID、トークンを発行した認証サーバー、発行日時、有効期限）が取り出される。
// 3. サーバーサイド：その情報をJWTというトークン形式で、渡される。
// 4.JWTからユーザー情報（Email、UID）を取り出してセッションに格納。（セッションはサーバーサイドのもの。セッションIDはクライアントサイドのもの）
// #一問一答
//  * Q:結局このファイルって何？
// A:結局、`export default NextAuth(authOptions);`で、authOptionsを用いてNextAuthの設定をするファイル。
// * Q:どこで動くの？
//A:Next.jsのAPIルートはサーバーサイドで実行される。このファイルは`app/api/auth~`なので当然API。
// * Q:CredentialsProviderとは何？
// A: Next Authが提供する認証プロバイダの一つ。https://next-auth.js.org/configuration/providers/credentials。ユーザー名とパスワード、2 要素認証などの任意の資格情報を使用してサインインを処理できます。
// * Q:[...nextauth]とは？
// A:Dynamic Routeでの書き方。/api/auth/以下のすべてのルートが、このroute.tsファイルで処理される。

import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";

import CredentialsProvider from "next-auth/providers/credentials";

import { auth } from "@/firebase/admin";

import { JWT } from "next-auth/jwt"; // JWT型をインポート
import "@/features/auth/types/next-auth"; 

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      credentials: {}, // NextAuthでログインフォームを作る時に使用する
      authorize: async ({ idToken }: { idToken: string }, _req) => { //ここ修正
        // authorizeには受け取ったidTokenを検証しユーザー情報を返すロジックを書く必要がある。
        // ここではクライアントから受け取ったidTokenを検証し、ユーザ情報を取得している
        if (idToken) {
          try {
            // firebaseのadminでidTokenを検証。成功したらユーザー情報(decoded)を返す。
            const decoded = await auth.verifyIdToken(idToken);

            return { ...decoded };
          } catch (err) {
            console.error(err);
          }
        }
        return null;
      },
    }),
  ],
// セッションの保存形式をJWTと定める。
  session: {
    strategy: "jwt",
  },
// JWTトークンからユーザー情報を取得してセッションに格納するための関数。
  callbacks: {
    async jwt({ token, user }: { token: JWT; user?: any }) { //ここ修正
      // jwtコールバック
      // jwtコールバックは、JWTトークンが作成または更新されるたびに呼び出されます。
      // authorizeコールバックで取得したユーザ情報をJWTトークンに含める処理
      return { ...token, ...user };
    },
    async session({ session, token }) {
      // sessionコールバック
      // sessionコールバックは、セッションが作成または更新されるたびに呼び出されます。
      // JWTトークンのユーザー情報（Email,UID）を取り出してセッションに格納する。
      session.user.emailVerified = token.emailVerified;
      session.user.uid = token.uid;
      return session;
    },
  },
};

export default NextAuth(authOptions);

import NextAuth, { DefaultSession } from "next-auth";
import { JWT } from "next-auth/jwt";

declare module "next-auth" {
  interface Session {
    user: {
      // Firebaseの認証情報
      uid: string;
      emailVerified?: boolean;
    } & DefaultSession["user"];
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    // Firebaseの認証情報
    uid: string;
    emailVerified: boolean;
  }
}

    "typeRoots": ["./src/types"],

import NextAuth from "next-auth";
import { authOptions } from "./auth-options";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };