[Firebase] 파이어베이스 로그인/로그아웃 기능 구현 (React + TypeScript + Firebase v9)

이전에 프로젝트에서 파이어베이스를 통한 회원가입을 구현하였고

오늘은 이어서 로그인/로그아웃 기능을 구현해보려고 한다.

회원가입 구현 방법은 아래 게시물을 참고하면 된다.

[Firebase] 파이어베이스 회원가입 기능 구현 (React + TypeScript + Firebase v9)

---

1. 로그인 기능 구현

1️⃣ src/hooks 폴더에 useLogin.ts를 생성한다.

 

2️⃣ 에러 정보를 저장하는 error state와 서버와의 통신 상태 정보를 저장하는 isPending state를 생성한다.

import { useState } from 'react'

const useLogin = () => {
  const [error, setError] = useState(null)
  const [isPending, setIsPending] = useState(false)
}

export default useLogin

 

3️⃣ 로그인을 진행하는 loginHandler 함수를 생성한다.

아직은 에러가 없으니 error state를 null 로 변경하고, 로그인이 진행 중이므로 isPending state를 true로 변경한다.

// ... 생략

const useLogin = () => {
  // ... 생략
  const signupHandler = (email: string, password: string, displayName: string) => {
    setError(null)
    setIsPending(true)
  }
}

export default useLogin

 

4️⃣ 파이어베이스에서 제공하는 signInWithEmailAndPassword() 메서드에 email과 password를 전달하여 로그인한다.

- 로그인 성공: redux에 user 정보를 저장 / 에러가 없으므로 error state를 null로 변경 / 로그인이 되었으므로 isPending state false로 변경

- 로그인 실패: error state를 에러 메세지로 변경 / 로그인 과정이 완료되었으므로 isPending state false로 변경

📍 redux 관련한 내용은 따로 추가하지 않을 예정이다.

import { useState } from 'react'
import { signInWithEmailAndPassword } from 'firebase/auth'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'

import { appAuth } from 'firebaseApp/config'
import { authActions } from 'store/auth-slice'

const useLogin = () => {
  // ... 생략

  const loginHandler = (email: string, password: string) => {
    // ... 생략

    signInWithEmailAndPassword(appAuth, email, password)
      .then((userCredential) => {
        const { user } = userCredential
        dispatch(authActions.user({ displayName: user.displayName, email, uid: user.uid }))
        setError(null)
        setIsPending(false)

        if (!user) throw new Error('회원가입 실패')

        navigate('/')
      })
      .catch((err) => {
        setError(err.message)
        setIsPending(false)
      })
  }

  return { error, isPending, loginHandler }
}

export default useLogin

 

5️⃣ 로그인 Form에서 useLogin 훅을 import하여 form의 onSubmitHandler가 발생할 때 로그인 과정이 진행된다.

import { useCallback, FormEvent } from 'react'
import useLogin from 'hooks/useLogin'

const Login = () => {
  const { error, isPending, loginHandler } = useLogin()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  
  // ... 생략

  const formSubmitHandler = useCallback(
    (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      loginHandler(email, password)
    },
    [email, loginHandler, password]
  )

  return (
    // ... 생략
  )
}

export default Login

---

2. 로그아웃 기능 구현

로그아웃 기능 구현도 사실 로그인 기능 구현과 메서드만 다를 뿐 로직이 똑같다.

그래서 자세한 설명은 위 로그인 기능 구현을 참고하면 될 것 같다.

 

📍 src/hooks 폴더에 useLogout.ts를 생성하고

파이어베이스에서 제공하는 signOut() 메서드를 통해 auth를 전달하여 로그아웃한다.

import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { signOut } from 'firebase/auth'

import { appAuth } from 'firebaseApp/config'
import { authActions } from 'store/auth-slice'

const useLogout = () => {
  const dispatch = useDispatch()
  const [error, setError] = useState(null)
  const [isPending, setIsPending] = useState(false)

  const logoutHandler = () => {
    setError(null)
    setIsPending(true)

    signOut(appAuth)
      .then(() => {
        dispatch(authActions.user(null))
        setError(null)
        setIsPending(false)
      })
      .catch((err) => {
        setError(err.message)
        setIsPending(false)
      })
  }

  return { error, isPending, logoutHandler }
}

export default useLogout

---

💡 파이어베이스에서 제공하는 로그인/로그아웃 메서드는 아래 사이트에서 확인할 수 있다.

Javascript를 사용하여 비밀번호 기반 계정을 사용하여 Firebase에 인증