회원가입, 로그인, 로그아웃 기능 구현

kimyz·2023년 11월 30일

각 기능 구현하기

회원가입

파이어베이스에 있는 인증 기능을 통해서 회원가입 기능을 구현하였다.
createUserWithEmailAndPassword 메서드를 이용하면 간단하게 할 수 있다.

import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'

const [email, setEmail] = useState('')
const [password, setPassword] = useState('')

async function onSubmit(event) {
	// ...
  	try {
    	const auth = getAuth(app)
        // auth 정보, 이메일 그리고 비밀번호 값을 매개 변수로 던져준다.
        await createUserWithEmailAndPassword(auth, email, password)
    } catch (error) {
    	// 에러처리
    }
}

로그아웃

로그아웃은 signOut 이라는 메서드를 사용하여 구현했다.

로그인 상태 인식하기

파이어베이스 Auth 기능에는 onAuthStateChanged 라는 메서드가 있다.
로그인, 로그아웃 함수에 따라서 로그인 상태에 대한 변화를 체크할 수 있도록 옵저버를 추가하는 기능을 한다.
(참고: https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#onauthstatechanged)

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setIsAuthenticated(true)
      } else {
        setIsAuthenticated(false)
      }
      setInit(true)
    })
  }, [auth])

로그인 또는 로그아웃을 하게 되면 isAuthenticated 상태를 업데이트 하게 되고, 그에 따라 화면도 바뀌게 된다.

또한 상태값을 참조하여 <로그인 된 상태>에서는 로그인 / 회원가입 창을 보지 못하게 하고
<로그인이 되지 않은 상태>에서는 로그인 / 회원가입 화면만 보게 할 수 있었다.

// 전체를 아우르는 컴포넌트에서 상태값에 따라 다른 화면을 보여주게 함
<div className='layout'>
    {isAuthenticated && init && (
         <>
             <SideBar />
             <main className='main'>{children}</main>
         </>
    )}
	{!isAuthenticated && init && <SignPage />}
</div>
     
// 로그인, 회원가입 컴포넌트에 대한 페이지는 로그인 된 경우에는 보이지 않게 함
const router = useRouter()
if (getAuth(app)?.currentUser && router.pathname === '/sign') router.push('/')
else return <SignForm />