TIL) 스파르타 개발일지 23-01-27

firebase에서 세션처리하기.

먼저 파이어베이스에서 제공되는 인증처리의 경우를 알아보자.

파이어베이스에서는 3가지의 인증처리 경우가 있다.

local, session, none

인증 상태를 변경하기 위해서는 파이어베이스에서 제공 되는 setPersistence 라는 메서드를 통해서 변경하면 된다.

아래는 파이어베이스 공식문서의 예문이다.

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;
  });

 

Try. 이 코드를 나의 프로젝트에 리펙토링하기.

관련 정보가 많이 없어서 조금 많이 헤매였는데, 생각보다 간단했다.

 

기존 로그인 요청방식은

 

signInWithEmailAndPassword를 호출하여,

로그인한 유저의 이메일과 패스워드를 받아오고 네비게이터로 유저를 메인페이지(/)로 넘겨주었다..

//세션처리 전
signInWithEmailAndPassword(authService, userEmail, userPassword)
.then(() => {
  //       setUserEmail('');
  //       setUserPassword('');
  //       navigate('/');
  //     })
  //     .catch((err) => {
  //       if (err.message.includes('user-not-found')) {
  //         alert('회원이 아닙니다. 회원가입을 먼저 진행해 주세요.');
  //       }
  //       if (err.message.includes('wrong-password')) {
  //         alert('비밀번호가 틀렸습니다.');
  //       }
  //     });
  // };

 

 

변경 후에는 getAuth 함수 호출, 이후 setPersistence를 통해서 세선처리 후

리턴 값으로 signInWithEmailAndPassword를 보내면 된다.

   //세션처리 후
const auth = getAuth();
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    setUserEmail('');
    setUserPassword('');
    navigate('/');
    return signInWithEmailAndPassword(auth, userEmail, userPassword);
  })
  .catch((error) => {
    if (error.message.includes('user-not-found')) {
      alert('회원이 아닙니다. 회원가입을 먼저 진행해 주세요.');
    }
    if (error.message.includes('wrong-password')) {
      alert('비밀번호가 틀렸습니다.');
    }
    console.log('error: ', error);

  });
}

 

"시행 착오는 착오가 아니다." 라는 기억에 남는 멘트가 있었는데, 조금 마음이 뭉클했다.