[React] Firebase 를 이용한 신규 사용자 가입 (이메일 가입)

목표

Firebase 를 이용하여 신규 사용자 가입 (이메일 가입) 구현하기.

---

구글에서 제공한 기본 코드

그대로 복붙하여봤지만 역시나 제대로 구현이 안됐습니다.. 하지만

2시간동안 지지고볶다가 겨우 완성한 기능!!! 너무뿌듯해요.

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

코드

일단 나의 문제점은.. useState를 사용하는게 익숙하지 않아서 자꾸만 멀뚱멀뚱 있다는 것입니다.

기능을 구현 해 놓지도 않고 마크업만 가지고 버튼 누르고 왜 안되지? 이러고 있었는데...

모든 값은 정의를 해야합니다..ㅠㅠㅠ

 

기본 베이스 출처 :: https://goforit.tistory.com/78 감사합니다 😭

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import React, { useState } from "react";

const auth = getAuth(app);

// 신규 사용자 가입 (이메일 방법)
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const onChange = (event) => {
  const {target: {name, value}} = event;
  if(name === "email") {
      setEmail(value)
  } else if (name === "password") {
      setPassword(value)
  }
}
const onSubmit = async (event) => {
  event.preventDefault();
  try {
    createUserWithEmailAndPassword(auth, email, password);
  } catch(error) {
      console.log(error);
  }
};

 

HTML 마크업

아직도 Form 태그의 submit 기능이 익숙하지 않았다.

<form onSubmit={onSubmit}>
    <input name="email" type="email" placeholder="Email" required value={email} onChange={onChange}/>
    <input name="password" type="password" placeholder="Password" required value={password} onChange={onChange}/>
    <input type="submit" /> 
</form>

 

깃허브 코드 전체보기

주의할 점 : 간단한 기능들을 체크하기 위한 것으로, 따로 스타일링은 되어있지 않습니다!!.

firebaseConfig 의 /.. 부분은 본인의 코드를 사용해주세요.

본인의 ADK 코드 확인방법은 이 글에서 확인해주세요!

https://june6.tistory.com/21

[React] firebase를 사용하여 구글로그인 구현하기.

 

 

 

결과

프로젝트에서 확인하기!

---

오류

https://june6.tistory.com/26