[쇼핑몰 프로젝트] 5. Firebase Auth로 로그인 기능 구현하기

1. Firebase Authentication

1.1. firebase 초기세팅

📍 clientApp.ts

// lib/firebase/clientApp.ts
import firebase from "firebase/compat/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/analytics";
import "firebase/performance";

// Your web app's Firebase configuration
const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

export const initFirebase = () => {
  if (!firebase.apps.length) {
    firebase.initializeApp(clientCredentials);
    console.log("😀 Firebase was successfully init");
  }
};

• firebase에서 필요한 것들로만 가져와서 clientCredentials로 initialize한 firebase를 변수(initFirebase)에 할당한다.
• 이후 이것을 이용해 로그인할 수 있도록 auth()를 호출해 export해 준다.

2. 공급업체

로그인 업체를 설정해야한다.

업체 설정 경로
Firebase > Console > 해당 project 선택 > Authentication

이번 포스팅에선 개로그인에 자주 쓰이는 구글과 email형식만 를 다뤄보도록 하겠습니다.
이 외에 이메일, 핸드폰 번호 등의 다른 방법들을 사용해 보고 싶다면, 공식 사이트를 참고하세요.