Auth [회원가입,로그인]

설치

-  npm install --save firebase@^7.24.0

 

 

<인증설정>

 

 

 

 

<데이터베이스 설정>

 

 

<데이터베이스 구조>

 

 

 

 

 

 

import firebase from "firebase/app";
import "firebase/auth"; //인증기능
import "firebase/database"; //데이터베이스기능
import "firebase/storage"; //스토리지기능
//
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
    apiKey: "AIzaSyBk7qzaczfXcTtfMgLxtgcclr1TWzAP5b4",
    authDomain: "chat-app-df8be.firebaseapp.com",
    projectId: "chat-app-df8be",
    storageBucket: "chat-app-df8be.appspot.com",
    messagingSenderId: "417787919150",
    appId: "1:417787919150:web:69077b93cc9bed18fd18bf",
    measurementId: "G-HVS8EW2SD8",

    databaseURL: "https://chat-app-df8be-default-rtdb.asia-southeast1.firebasedatabase.app"

};

//데이터베이스 생성시 URL을 config 부분에 추가한다




// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// firebase.analytics(); : 통계보여주는부분

export default firebase;

 

 

 

 

 

function RegisterPage() {

  const onSubmit = async (data) => {//회원가입 (form 제출시 유효성체크)
    try {
      let createdUser = await firebase
      .auth()
      .createUserWithEmailAndPassword(data.email, data.password);
       //firebase에서 아이디생성후 결과값을 반환해줌


     await createdUser.user.updateProfile({ //회원가입된 유저 정보추가하기
        displayName: data.name,
        photoURL: `http://gravatar.com/avatar/${md5(
          createdUser.user.email
        )}?d=identicon`,
      });

//Firebase 데이터베이스에 저장해주기(users 테이블 - createdUser.user.uid - name,image 순으로 저장 )

await firebase.database().ref("users").child(createdUser.user.uid).set({
name: createdUser.user.displayName,
image: createdUser.user.photoURL,
 });
    } catch (error) {
      setErrorFromSubmit(error.message);
    }
  };

  return (
    <div className="auth-wrapper">
      <form onSubmit={handleSubmit(onSubmit)}>
           생~략 
          <input type="submit"  />  
      </form>
    </div>
  );
}

export default RegisterPage;

 

 

 

  const onSubmit = async (data) => {//로그인
    try {
      setLoading(true);

     await firebase.auth().signInWithEmailAndPassword(data.email,data.password)
      setLoading(false); //회원가입 진행시 button 불능 
    } catch (error) {
      console.log(error.message)
      setLoading(false); //회원가입 진행시 button 불능 

    }
  };

 

 

 

 

 

<인증부분 저장>

<데이터베이스 저장>

 

 

 

 

 

 

 

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기  |  Firebase Documentation (google.com)

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기  |  Firebase Documentation

웹사이트에서 Firebase 인증 시작하기  |  Firebase Documentation (google.com)

웹사이트에서 Firebase 인증 시작하기  |  Firebase Documentation