[Auth] Firebase Auth 세션/로컬 스토리지 사용하기

Firebase Auth

Firebase의 Auth에서 제공하는 Social Login 기능을 통해서 간단하게 로그인 기능을 구현할 수 있다.
하지만 새로고침을 하거나 탭/창을 전환할 때마다 로그인 정보가 사라지게 되므로, 사용자 정보를 어딘가에 저장해두어야 한다.

이때 사용할 수 있는 방법은 크게 두가지가 있다.

---

1) Firebase의 setPersistence 메소드 사용하기

Firebase Auth에서는 인증 상태 지속성을 위한 메소드를 제공한다.
아래와 같이 setPersistence의 두번째 인자로 borswerSessionPersistence 또는 browserLocalPersistence를 입력하면, 로그인 완료 시 각 스토리지에 Firebase User 객체가 저장된다.

import { getAuth, setPersistence, signInWithEmailAndPassword, browserSessionPersistence } from "firebase/auth";

const auth = getAuth();
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // Existing and future Auth states are now persisted in the current
    // session only. Closing the window would clear any existing state even
    // if a user forgets to sign out.
    // ...
    // New sign-in will be persisted with session persistence.
    return signInWithEmailAndPassword(auth, email, password);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });

---

2) 로그인 상태가 변경될 때마다 웹 스토리지에 저장하기

setPersistence를 사용하지 않고 원하는 데이터만 웹 스토리지에 저장할 수 있다.
여기서 스토리지란 세션스토리지 또는 로컬스토리지를 사용 가능하다.

우리 팀은 이 방법으로 구현했는데, 이유는 Firebase User 객체는 우리 프로젝트에서 사용하지 않는 불필요한 데이터가 포함되어 있었기 때문이다.
또한 이메일, 토큰에 대한 정보, full name 등을 모두 포함하기 때문에 보안상으로도 관리하기 까다로울 것이라고 생각했다.

이때 사용할 수 있는 Firebase 메소드는 onAuthStateChaged이다.
말 그대로 사용자 정보가 변경될 때 마다 (로그인/로그아웃) 콜백함수를 실행한다.

user가 존재할 때 (로그인 되었을 때), 로컬 스토리지에 원하는 정보를 저장하면 된다.

// App.tsx

function App() {
  authService.onAuthStateChanged((user) => {
    if (user) {
      localStorage.setItem(
        'user',
        JSON.stringify({
          uid: user.uid,
          displayName: user.displayName,
          email: user.email, // github의 경우 이메일 공개 여부에 따라 null로 할당되기도 함.
          photoURL: user.photoURL,
        }),
      );
    }
  });

  return (
    <>
      <Global styles={reset} />
      <Router />
    </>
  );
}

---

💡 로컬 스토리지를 사용한 이유

	Local Storage	Session Storage
공유 범위	오리진이 같은 탭, 창 전체에서 공유됨.	오리진이 같은 브라우저 탭, iframe에서 공유됨. 다른 탭, 창에서는 공유되지 않음.
지속성	브라우저를 껐다 켜도 남아 있음.	페이지를 새로고침 해도 남아 있음. 탭이나 브라우저를 종료하면 사라짐.
사용처	지속적으로 필요한 데이터 저장	일시적으로 필요한 데이터 저장
예시	자동로그인	일회성 로그인, 입력 폼 저장, 비로그인 장바구니

우리 팀의 사이트는 머무는 시간이 길어 탭/창 이동이 이루어질 가능성 있고, 일단 회원가입 하면 주기적으로 방문하는 사용자가 많을 것으로 예상된다.
따라서 자동 로그인을 구현할 수 있는 로컬 스토리지를 사용하는 것이 좋을 것이라고 생각했다!

다른 사이트를 직접 살펴봤을 때에도, Google, Naver, MS 등등 모두 자동로그인을 위해 사용자 정보를 로컬 스토리지에 저장하고 있었다.
다만,, 암호화하여 식별 불가능한 상태로 저장하고 있다는 것을 알 수 있었다.

❗️ 로컬스토리지는 JavaScript 코드로 접근 가능하기 때문에 XSS(크로스 사이트 스크립팅)에 취약할 수 있다.
따라서 민감한 정보를 제외하고 public profile에 대한 정보만 저장할 수 있도록 해야한다.

---

Reference
인증 상태 지속성  |  Firebase
Firebase에서 사용자 관리
localStorage와 sessionStorage