[React] Firebase 회원가입 기능 구현하기

 

로그인 기능을 구현할 땐 signInWithEmailAndPassword 함수를 사용했지만,

회원가입 기능 구현시엔 createUserWithEmailAndPassword 함수를 사용한다.

 const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      alert(`회원가입 성공! ${userCredential.user.email}`);
      navigate('/');
    } catch (error) {
      switch (error.code) {
        case 'auth/invalid-email':
          setError('유효하지 않은 이메일 형식입니다.');
          break;
        case 'auth/email-already-in-use':
          setError('이미 등록된 계정입니다.');
          break;
        case 'auth/weak-password':
          setError('비밀번호를 다시 확인해주세요.(예: 최소 6자 이상, 문자, 숫자, 특수문자 포함)');
          break;
        default:
          setError('회원가입에 실패했습니다. 다시 시도해주세요.');
      }
    }
  };

createUserWithEmailAndPassword는 Firebase Authentication을 통해 이메일과 비밀번호로 새로운 사용자를 생성하는 함수다. 이 함수는 Firebase의 auth 객체를 사용하여 새로운 계정을 만들고, 이를 통해 사용자를 Firebase 인증 시스템에 등록한다.

 

매개변수

• auth: Firebase 인증 객체. getAuth()로 생성된다.
• email: 새로 생성할 계정의 이메일 주소.
• password: 새로 생성할 계정의 비밀번호. 비밀번호는 최소 6자 이상이어야 한다.

Promise: 성공 시 userCredential 객체를 반환한다.

이 객체에는 user 속성으로 Firebase에서 생성된 사용자 정보가 포함된다.

 

에러 처리

• auth/email-already-in-use: 이미 해당 이메일로 계정이 존재할 때 발생하는 오류
• auth/invalid-email: 이메일 주소 형식이 잘못되었을 때 발생한다.
• auth/weak-password: 비밀번호가 너무 짧거나 보안 수준이 낮을 때 발생한다.

비밀번호 최소 길이는 기본적으로 6자 이상이어야 하며,

더 강력한 비밀번호 정책을 원하면 백엔드 또는 클라이언트에서 추가적으로 검증할 수 있다.

 

최종 코드

import React, { useState } from 'react';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../firebase';
import { useNavigate } from 'react-router-dom';

function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const navigate = useNavigate();

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      alert(`회원가입 성공! ${userCredential.user.email}`);
      navigate('/');
    } catch (error) {
      switch (error.code) {
        case 'auth/invalid-email':
          setError('유효하지 않은 이메일 형식입니다.');
          break;
        case 'auth/email-already-in-use':
          setError('이미 등록된 계정입니다.');
          break;
        case 'auth/weak-password':
          setError('비밀번호를 다시 확인해주세요.(예: 최소 6자 이상, 문자, 숫자, 특수문자 포함)');
          break;
        default:
          setError('회원가입에 실패했습니다. 다시 시도해주세요.');
      }
    }
  };

  return (
    <div>
      <h2>회원가입</h2>
      <form onSubmit={handleSignUp}>
        <input
          type="email"
          placeholder="이메일"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="비밀번호"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">가입하기</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
};

export default Signup;

 

회원가입된 계정은 Authentication > 사용자에서 확인할 수 있다.