로그인 처리

제일 먼저 구현할 기능은 로그인!
간단하게 로그인이라고만 말하지만 라우팅처리부터 회원가입, 로그인, 로그아웃 등 사용자 인증과 관련된 기능을 모두 구현한다

세부 기능 정리

1. 회원가입
   • 성공하면 로그인 페이지로 이동
   • 실패하면 하단에 에러 문구 출력
2. 로그인
   • 성공하면 Home 이동
   • 실패하면 하단에 에러 문구 출력
3. 로그아웃
4. user 인증
   • 로그인하면 user 정보 저장
   • 브라우저 닫으면 user 정보 삭제

사용자 인증 방법으로 firebase api는 jwt를 지원한다. 사실 세션 쿠키 방식을 한번 사용해 보고 싶었는데 아쉽게도 백엔드를 구현할 줄 모르고 firebase api를 사용하는 입장이라 이번 프로젝트에서는 어렵다고 판단했다.

세션 쿠키로 만들고싶은 이유는 jwt를 남용하고 있다는 생각이 들었기 때문이다. 늘 firebase auth만 사용하다보니 자연스럽게 jwt 만 사용하게 됐었는데, 세션 쿠키도 훌륭한 유저 인증 방식이라고 들었고 무엇보다 왜 jwt를 사용하는지도 모르는 채 계속 사용하는게 찜찜한 기분이 들었다. 지금은 어쩔수없이 jwt를 사용하지만 후에 node.js를 공부하고 백엔드쪽을 만지게 된다면 꼭 세션 쿠키 방식으로 리팩토링 해 볼 것이다.

아키텍처

폴더 구조

📦src
 ┣ 📂api
 ┃ ┗ 📜firebase.jsx // firebase api 모음
 ┣ 📂components
 ┃ ┗ 📜SignForm.jsx // 로그인,회원가입 form
 ┣ 📂pages
 ┃ ┣ 📜Login.jsx // 로그인
 ┃ ┗ 📜SignUp.jsx //회원가입
 ┣ 📂store
 ┃ ┗ 📜AuthContext.jsx //유저 인증 정보

라우팅

path: "/sign_in", element: <Login />
path: "/sign_up", element: <SignUp />

구현

SignForm

Login, SignUp 컴포넌트로부터 isLogin props를 받아 true이면 로그인 기능, false이면 가입 기능을 실행한다.

import React, { useRef, useState } from "react";
import { useNavigate } from "react-router";
import { createUser, loginUser } from "../api/firebase";
import Button from "./ui/Button";

export default function SignForm({ isLogin }) {
  const [user, setUser] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();
  const emailRef = useRef();
  const passwordRef = useRef();

  const btnText = isLogin ? "로그인" : "가입하기";

  const navigate = useNavigate();

  const onChangeHandler = (e) => {
    const { name, value } = e.target;
    setUser((state) => ({ ...state, [name]: value }));
  };

  const onSubmitHandler = async (e) => {
    e.preventDefault();
    setIsLoading(true);

    const response = await (isLogin
      ? loginUser(user, setError)
      : createUser(user, setError));

    response && (isLogin ? navigate("/") : navigate("/login"));
    setIsLoading(false);
    setUser({});
    emailRef.current.focus();
  };

  return (
    <form onSubmit={onSubmitHandler}>
      <input
        ref={emailRef}
        type="email"
        name="email"
        value={user.email || ""}
        onChange={onChangeHandler}
        autoComplete="off"
        placeholder="아이디"
        required
      />
      <input
        ref={passwordRef}
        type="password"
        name="password"
        value={user.password || ""}
        onChange={onChangeHandler}
        autoComplete="off"
        placeholder="비밀번호"
        minLength="6"
        required
      />
      {!isLoading && <Button text={btnText} />}
      {isLoading && <p>Sending request...</p>}
      {error && <p>{error}</p>}
    </form>
  );
}

firebase API

회원가입, 로그인은 정상적으로 수행이 끝나면 결과값을 반환한다.
인증 상태는 세션이 종료되면 삭제된다

...

// 회원가입
export const createUser = async ({ email, password }, callback) => {
  return createUserWithEmailAndPassword(auth, email, password)
    .then((res) => {
      alert("가입완료");
      return res;
    })
    .catch((error) => callback(`가입에 실패했습니다. ${error.code}`));
};

// 로그인
export const loginUser = async ({ email, password }, callback) => {
  await setPersistence(auth, browserSessionPersistence);

  return await signInWithEmailAndPassword(auth, email, password)
    .then((res) => res)
    .catch((error) => callback(`로그인에 실패했습니다. ${error.code}`));
};

// 로그아웃
export const logoutUser = () => {
  signOut(auth);
};

// 유저 관찰
export const onUserStateChange = (callback) => {
  onAuthStateChanged(auth, (user) => {
    callback(user);
  });
};

AuthContext

AuthContext에서는 user 인증 정보를 관리하고, 인증 정보를 이용해서 현재 로그인 중인지 아닌지 여부를 알려준다. context 데이터를 받아오기 위한 useContext 코드를 useAuthContext로 만들어서 컴포넌트에서는 최대한 간편하게 context 데이터를 받아올 수 있도록 했다.

import { createContext, useContext, useEffect, useState } from "react";
import { onUserStateChange } from "../api/firebase";

const AuthContext = createContext({
  user: {},
  isLoggedIn: false,
});

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState();

  const contextValue = {
    user,
    isLoggedIn: !!user,
  };

  useEffect(() => {
    onUserStateChange((user) => setUser(user));
  }, []);

  return (
    <AuthContext.Provider value={{ ...contextValue }}>
      {children}
    </AuthContext.Provider>
  );
};

export function useAuthContext() {
  return useContext(AuthContext);
}

트러블 슈팅

1. 가입할 때 400 에러 발생

POST https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyAwJOXTlirqOnTBtvnJ_gJ09C7brL29lEM 400

오타로인해 email정보를 받아오지 못해서 발생함. 오타 수정 후 해결

고민한 것

1. firebase API를 어디서 호출할 것인가

컴포넌트에서 api를 직접 호출 할 것인지, api를 관리하는 context나 redux를 만들어 간접 호출 할 것인지 고민했다. 일단은 auth api는 SignForm 컴포넌트에서만 사용되므로 굳이 context, redux는 사용하지 않기로 했고, user 인증 정보는 프로젝트 전역적으로 필요한 데이터이기 때문에 context로 관리하는 방향으로 진행했다.

그런데 이렇게 하니 SignForm 컴포넌트 코드가 좀 더러워보인다. 우선은 이렇게 두고 후에 리팩토링을 고민해 봐야겠다.

2. 브라우저를 닫으면 유저 정보가 삭제되도록 하려면

firebase api를 사용했더니 '로그아웃' api를 실행하지 않으면 user 정보가 영구적으로 존재하는 문제를 발견했다. 상황에따라 문제가 아닐 수 있겠지만 나는 브라우저가 닫히면 자동으로 로그아웃 되고 user 정보가 삭제되기를 바랬다.

firebased에서 관련 설정을 변경할 수 있는 api를 제공하는데 총 세가지 지속 유형이 있다.
1. LOCAL : '로그아웃'을 하지 않는 이상 계속 지속.
2. SESSION : 인증 상태가 세션에 한해서 지속되고 탭이나 브라우저가 닫히면 삭제됨.
3. NONE: 상태가 메모리에만 저장되고 새로 고침하면 삭제됨.

나는 세션 방식을 선택해서 원하는대로 동작시킬 수 있었다.