React, Next.js, Firebase를 사용한 Google 소셜 로그인(2) - 이메일/비밀번호

앞선 포스팅에 이어지는 글입니다.

https://dolgogae.tistory.com/70

React, Next.js, Firebase를 사용한 Google 소셜 로그인(1) - 환경세팅

---

환경

• OS: macOS
• IDE: vs code
• node: v20.6.0

---

0. firebase 설치

npm install firebase

1. 회원가입

로그인에 앞서 회원가입을 만들수 있다.

const registerUser = (e) => {
    e.preventDefault();
    if (password !== cPassword) {
      return toast.error(`비밀번호가 일치하지 않습니다.`);
    }
    setIsLoading(true);

    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log('user: ' + user);

        setIsLoading(true);

        toast.success('등록 완료');
        router.push('/login');
      })
      .catch((error) => {
        setIsLoading(false);
        toast.error(error.message);
      })
}

firebase의 createUserWithEmailAndPassword를 사용해서 만들어 줄 수 있다.

• auth: 이전에 만든 firebase 코드를 이용한 Authentication 객체
• email / password: onSummit의 UI로 받아온 id/password 값

위의 registerUser는 onSummit이나 onChange나 이벤트를 통해 호출되는 함수이고

이벤트를 통해서 넘겨주는 값들이 email, password가 될 수 있다.

 

마지막으로 firebase의 Authentication > Users로 가면 정상적으로 회원가입한 유저들을 확인이 가능하다.

2. 로그인

firebase는 로그인 서비스를 간단하게 만들어줄 수 있다.

DB는 firebase에서 관리를 해주고, 우리는 그 라이브러리를 통한 firebase api만 사용해주면 된다.

'use client'
// any import
import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
import { auth } from '@/firebase/firebase';

const LoginClient = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isAutoLogin, setIsAutoLogin] = useState(false);

  const router = useRouter();
  
  // any code

  const loginUser = (e) => {
    // summit 이벤트가 일어날때 default를 하지 않는다.
    e.preventDefault();
    setIsLoading(true);

    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        setIsLoading(false);
        toast.success('로그인에 성공했습니다.');
        redirectUser();
      })
      .catch((error)=> {
        setIsLoading(false);
        toast.error(error.messsage);
      });
  }


  return (
   	// login ui
  )
}

export default LoginClient

signInWithEmailAndPassword라는 firebase 라이브러리를 사용해주면

위처럼 몇줄의 코드로 간단하게 로그인이 구현된다.

 

아래 return에서 onSummit을 사용해서 loginUser를 호출해주면 된다.

• auth: 이전에 만든 firebase 코드를 이용한 Authentication 객체
• email / password: onSummit의 UI로 받아온 id/password 값

3. 비밀번호 변경

  const resetPassword = (e) => {
    e.preventDefault();
    setIsLoading(true);
    
    sendPasswordResetEmail(auth, email)
    .then(() => {
      setIsLoading(false);

      toast.success('비밀번호 업데이트를 위해서 이메일을 체크해주세요.');
    })
    .catch((error) => {
      setIsLoading(false);

      toast.error(error.message);
    })
  }

비밀번호 변경도 위와 비슷하게 sendPasswordResetEmail 라이브러리를 통해서 변경이 가능하다.

 

앞서 설명했던 것과 비슷하기에 자세한 설명을 생략하겠다.