[Trello 클론 해보기] Firebase로 로그인/로그아웃 구현

🔥 Firebase란?

`Firebase` 는 Google 이 제공하는 백엔드 플랫폼(BaaS)!

서버를 직접 만들지 않아도 인증, DB, 스토리지 등을 바로 쓸 수 있습니다. 즉, 백엔드 서버를 직접 구축하지 않아도 기본적인 서비스 기능을 빠르게 구현할 수 있는 것이 특징입니다.

 

우리가 직접 로그인 구현하면 보통 

• OAuth 처리 (구글 로그인)
• 토큰 발급
• 세션 관리
• 보안 처리

코드를 직접 작성하여 사용하는데요. 특히 OAuth의 경우, 구글/카카오 등 외부 인증 서버와 통신해야 하기 때문에 구현 난이도가 높은 편입니다.

그런데 이 모든 걸 파이어베이스 API 연결만 해주면 전부 대신 해줄 수 있습니다. Firebase는 위 과정을 내부적으로 처리하고, 우리는 결과 데이터만 받아서 사용하면 됩니다.

 

저는 이 프로젝트에서 로그인/로그아웃 기능(구글 소셜로그인)과 배포부분을 파이어베이스로 진행해보려고 합니다. 

---

Firebase 연결하기

https://firebase.google.com/?hl=ko

Firebase | Google's Mobile and Web App Development Platform

---

1. 파이어베이스 Go to console에 프로젝트 만들기

Firebase 콘솔에서 새로운 프로젝트를 생성하면, 해당 프로젝트 단위로 인증/DB/스토리지 등이 관리됩니다.

---

2. 웹 앱에 Firebase 추가

프로젝트 생성 후 웹 앱을 등록하면, 해당 앱에서 사용할 설정 정보(firebaseConfig)를 바로 발급받게 됩니다.

---

3.  프로젝트에 npm 설치, Firebase SDK 추가

---

로그인/로그아웃 기능 구현해보기 

로그인
버튼 클릭→ signInWithPopup→ Firebase 인증→ user 정보 반환→ Redux 저장→ UI 변경
👉 Firebase가 인증 과정을 처리한 뒤, 로그인된 사용자 정보를 userCredential 객체로 반환합니다.
로그아웃
버튼 클릭→ signOut→ Firebase 세션 삭제→ Redux 초기화→ UI 변경
👉 Firebase 내부 세션과 클라이언트 상태(Redux)를 모두 초기화해야 완전한 로그아웃이 됩니다.

1. Firebase 연결

📁 firebase.ts : 이 React 앱이 어떤 Firebase 프로젝트를 쓸지 지정합니다.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
};

export const app = initializeApp(firebaseConfig);

• initializeApp(): Firebase 프로젝트와 연결하는 함수 - 이 함수가 실행되면서 현재 React 앱이 Firebase 서비스들을 사용할 수 있게 됩니다.
• firebaseConfig:  Firebase 콘솔에서 발급받는 키 - 해당 프로젝트를 식별하기 위한 설정 정보이며, 어떤 Firebase 프로젝트를 사용할지 결정합니다.

Modular SDK (v9 이상): 현재 사용한 방식은 필요한 함수(getAuth, initializeApp 등)만 골라서 가져오는 방식입니다. Firebase v9부터는 '트리 쉐이킹(Tree Shaking)'을 지원해서, 사용하지 않는 기능은 빌드할 때 제외되어 앱 용량이 가벼워집니다!

---

2. 로그인 방법 활성화

이번 프로젝트에서는 구글 소셜로그인을 진행해보려합니다. 코드를 작성하기 전에 Firebase 콘솔에서 설정을 우선적으로 진행해야합니다. 

Firebase 콘솔 > Authentication > Sign-in method 메뉴에서 [Google]을 '사용 설정'으로 변경해야 합니다. 

이 설정을 하지 않으면, 코드에서 GoogleAuthProvider를 사용해도 인증이 동작하지 않습니다.

---

3. Authentication 객체 생성

📁 BoardList.ts

const auth = getAuth(app);
const provider = new GoogleAuthProvider();

• getAuth(app): 인증 기능 사용 준비 - Firebase 앱(app)에 연결된 인증 인스턴스를 생성합니다.
• GoogleAuthProvider(): 구글 로그인 사용하겠다는 선언 - 어떤 로그인 방식을 사용할지 지정하는 단계입니다.

---

4. 로그인 구현

const handleLogin = () => {
  signInWithPopup(auth, provider)
    .then(userCredential => {
      dispatch(
        setUser({
          email: userCredential.user.email,
          id: userCredential.user.uid,
        })
      )
    })
    .catch(error => {
      console.error(error);
    })
}

 

1. 팝업 열림 (구글 로그인 창) 
2. 사용자 로그인
3. Firebase가 사용자 정보 반환

- userCredential.user : Firebase가 주는 사용자 객체 (포함 정보: email / uuid (고유 ID) / displayName 등)

- dispatch(setUser({...})) : Firebase 자체는 상태 관리는 해주지 않기 떄문에 직접 Redux에 저장해주어야합니다.

---

5. 로그아웃 구현

const handleSignOut = () => {
  signOut(auth)
    .then(() => {
      dispatch(removeUser())
    })
}

1. Firebase 세션 삭제 : 현재 로그인된 사용자 인증 상태를 Firebase에서 제거
2. Redux 상태 초기화 : 클라이언트에서 관리하던 사용자 정보 제거

-> 둘 다 해야 완전 로그아웃된다고 할 수 있습니다!

---

6. Redux로 로그인 상태 관리

📁 userSlice.ts

사용자의 email과 id를 저장하거나 삭제하는 액션을 정의합니다.

- 초기 상태

const initialState = {
    email: '',
    id: ''
}

- 로그인 시

setUser: (state, action) => {
    state.email = action.payload.email;
    state.id = action.payload.id;
}

Firebase에서 받은 사용자 정보를 Redux store에 저장

- 로그아웃 시

removeUser: (state) => {
    state.email = '';
    state.id = '';
}

사용자 정보를 초기화하여 로그아웃 상태로 변경

---

7.  로그인 여부 판단

📁 useAuth.ts

export function useAuth() {
    const {id, email} = useTypedSelector((state) => state.user);

    return {
        isAuth: !!email, // email이 있으면 true, 없으면 false
        email,
        id
    }
}

현재 사용자가 로그인 상태인지(isAuth) 쉽게 확인하기 위해 커스텀 훅을 만들었습니다.

---

8. UI에서 로그인 상태 반영

📁 BoardList.ts

{
  isAuth
  ?
  <GoSignOut onClick={handleSignOut}/>
  : 
  <FiLogIn onClick={handleLogin}/>
}

• 로그인 상태 -> 로그아웃 버튼
• 로그아웃 상태 -> 로그인 버튼

전체코드는

https://github.com/lvyest/Trello-Clone

GitHub - lvyest/Trello-Clone

여기에서 확인하실 수 있습니다.