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

이전에 프로젝트 생성한 것에 이어 파이어베이스를 통해 회원가입 기능을 구현해보려고 한다.

프로젝트 생성 및 연결 방법은 아래 게시물을 참고하면 된다.

[Firebase] 파이어베이스 프로젝트 설정 (React + Firebase v9)

---

1️⃣ 아래 화면에서 자신의 프로젝트를 선택한 후, 왼쪽 메뉴에서 빌드 - Authentication을 클릭한다.

 

2️⃣ [시작하기] 버튼을 클릭하고 이메일/비밀번호로만 회원가입을 진행할 예정이기 때문에 [이메일/비밀번호] 버튼을 클릭한다.

 

3️⃣ 이메일/비밀번호 사용설정을 허용하고 저장한다.

 

4️⃣ src/firebaseApp/config.ts에 getAuth()를 통해 초기화하고 다른 파일에서 사용할 수 있게 export한다.

(추후에 FireStore도 사용할 예정이라 같이 초기화를 진행해줬다.)

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_FIREBASE_APPID,
}

const app = initializeApp(firebaseConfig)
const appAuth = getAuth()
const appFireStore = getFirestore(app)

export { appAuth, appFireStore }

 

5️⃣ hooks폴더에 useSignUp.ts 파일을 생성하고 회원가입 관련한 Hook을 만든다.

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

import { useState } from 'react'

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

export default useSignUp

 

- 회원가입을 진행하는 signUpHandler 함수를 생성한다.

아직 에러가 없으니 error state를 null로 변경하고, 회원가입이 진행 중이니 isPending state를 true로 변경한다.

// ... 생략

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

export default useSignUp

 

- 파이어베이스에서 제공하는 createUserWithEmailAndPassword() 메서드에 가입자의 이메일과 패스워드를 전달하여 새 계정을 만든다.

- 회원 가입 성공: user에 대한 정보를 콘솔에 출력

- 회원 가입 실패: error state를 에러 메세지로 변경 / isPending state를 false로 변경

(appAuth는 firebaseApp/config.ts 파일에 만든 것을 import 하였다.)

import { useState } from 'react'
import { createUserWithEmailAndPassword } from 'firebase/auth'

import { appAuth } from 'firebaseApp/config'

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

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

    createUserWithEmailAndPassword(appAuth, email, password)
      .then((userCredential) => {
        const { user } = userCredential
        console.log(user)
 
        if (!user) throw new Error('회원가입 실패')
      })
      .catch((err) => {
        setError(err.message)
        setIsPending(false)
      })
  }

  return { error, isPending, signupHandler }
}

export default useSignUp

 

- 파이어베이스에서 제공하는 updateProfile()를 통해 사용자의 닉네임(displayName)을 업데이트한다.

그리고 useSignUp 훅에서 { error, isPending, signupHandler }를 리턴한다.

- 프로필 업데이트 성공: redux에 user 정보를 저장 / 에러가 없으므로 error state를 null로 변경 / 회원가입이 되었으므로 isPending state를 false로 변경

- 프로필 업데이트 실패: error state를 에러 메세지로 변경 / isPending state를 false로 변경

import { useState } from 'react'
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'

import { appAuth } from 'firebaseApp/config'

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

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

    createUserWithEmailAndPassword(appAuth, email, password)
      .then((userCredential) => {
        // ... 생략

        updateProfile(user, { displayName })
          .then(() => {
            dispatch(authActions.user({ displayName, email, uid: user.uid }))
            setError(null)
            setIsPending(false)
          })
          .catch((err) => {
            setError(err.message)
            setIsPending(false)
          })
      })
      .catch((err) => {
        // ... 생략
      })
  }

  return { error, isPending, signupHandler }
}

export default useSignUp

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

📍 firebase는 회원가입 성공 시 자동 로그인이 되기 때문에 redux에 user 정보를 저장한 것이다.

 

6️⃣ 회원가입 Form에서 useSignUp 훅을 import하고, 

form의 onSubmitHandler가 발생할 때 signupHandler 함수를 통해 회원가입이 진행된다.

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

const SignUp = () => {
  const { error, isPending, signupHandler } = useSignUp()
  const [displayName, setDisplayName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  
  // ... 생략

  const submitHandler = useCallback(
    (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      signupHandler(email, password, displayName)
      console.log(displayName, email, password)
    },
    [displayName, email, password, signupHandler]
  )

  return (
    // ... 생략
  )
}

export default SignUp

 

7️⃣ 콘솔창에 다음과 같이 출력되고, 파이어베이스 사이트에서 회원 정보가 저장된 것을 확인할 수 있다.

---

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

- createUserWithEmailAndPassword() 메서드

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

 

- updateProfile() 메서드

Firebase에서 사용자 관리