[nextJS] FirebaseError: Firebase: Error (auth/invalid-api-key)

위와 같이 firebase/auth를 이용해  login페이지를 만들던 도중 발생한 에러이다.

firebase콘솔에서 프로젝트를 만들고 웹에 적용하려고 firebaseInit.ts 파일을 하나 만들어서 firebaseConfig 에 값을 넣어줬는데 이때 env파일로 키값들을 넣어준다.

nextjs의 경우 ssr하는 부분은 nodejs로 되어있어 .env파일에서 NEXT_PUBLIC을 안붙여줘도 되지만 그밖에 파일들에서 env 값들을 가져오려면 NEXT_PUBLIC을 붙여줘야된다.

고로 아래와 같이 NEXT_PUBLIC를 붙인 env키값으로 작성하면 된다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FB_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_FB_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FB_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FB_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FB_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FB_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FB_MEASUREMENT_ID
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Cloud Storage and get a reference to the service
export const storage = getStorage(app);
// Initialize Firebase Authentication and get a reference to the service
export const auth = getAuth(app);
// Initialize Realtime Database and get a reference to the service
export const database = getDatabase(app);