TIL.231207 팀프로젝트 중간점검

📌아웃소싱 프로젝트 중간 점검

• WBS & Tasks
  • 로그인/회원가입, 이용중인 유저정보 관리(firebase-authentication)

🖥️firebase Authentication을 이용한 사용자 인증(회원가입)

💡사용자 인증 기능을 구현하기 전에, Firebase 콘솔에서 Authentication기능을 꼭 활성화 해야한다.

//firebase.js
...
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
	...
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

firebase.js파일을 만들고 Authentication 관련 코드를 추가해서 이제 다른 파일에서 auth를 import 해주는 것으로 쉽게 auth 기능을 구현하는 것이 가능해졌다.

그 이후 간단하게 정적컴포넌트를 먼저 작성한 후 createUserWithEmailAndPassword 함수를 이용해서 이메일과 패스워드를 입력하여 계정을 생성할 수 있다.

createUserWithEmailAndPassword(auth객체, 이메일, 패스워드)

firebase공식문서에 친절하게 사용방법이 적혀있다👍

⬇️회원가입코드

import {createUserWithEmailAndPassword } from 'firebase/auth';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nickName, setNickName] = useState('');

 const { mutate: setQuery } = useSetQuery({
    document: 'user'
  });
  
   const signUp = async (e) => {
    e.preventDefault();
    try {
      const userCredential = await createUserWithEmailAndPassword(AUTH, email, password);
      const uid = userCredential.user.uid;
      alert('회원가입이 완료되었습니다.');
      setIsLogin(true);
      setQuery({ fieldId: uid, data: { avatar: null, uid, nickName } });
    } catch (error) {
      const errorCode = error.code;
      const errorMessage = error.errorMessage;
      alert('중복이거나 사용할 수 없는 이메일 입니다.');
    }
  };

Firebase 콘솔에서 확인해보면, 정상적으로 유저 정보가 저장된 것을 확인할 수 있다.

☑️마치며

Firebase의 공식문서가 워낙 친절해서 천천히 읽어보면 구현하는게 죽을만큼 힘들지는 않았다!항상 죽을만큼 힘들었지만 이번에는 죽을만큼은 아니다😋 다음은 로그인 기능구현과 토글링이 남았다 아자아쟈!!!!!!!!!!