회원가입 구현하기 (feat. firestore)

1) Firestore 설정하기

firebase authentication은 우리가 원하는 모든 회원 정보를 담을 수 없다.

firestore를 써서 집주소를 저장해보자.

• 파이어베이스 대시보드 → Firestore로 이동
• shared/firebase.js 에서 firestore 설정

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";


const firebaseConfig = {
  // 인증 정보!
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth();
export const db = getFirestore(app);
export default app;

2) 회원가입

백엔드 api가 없이도 할 수 있도록 firebase authentication을 사용하지만 백엔드 api를 사용한다고 해서 순서가 달라지진 않는다. (구현 방식은 다를 수 있음)

중요한 부분은

1. 회원 정보를 받고,

2. 회원가입을 위한 서버 요청을 하고,

3. 응답(토큰 등)을 받아온다.

이 순서 이다.

그 외의 처리는 그때 그때 사용하는 것에 따라, 프로젝트 요구사항에 따라 달라질 수 있다.

• firebase Authentication과 firestore를 사용한 회원 가입하기
  
  1. firebase.js에 만들어둔 auth, firestore 가져오기

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // 인증정보!
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth();
export const db = getFirestore(app);
export default app;

1. auth.createUserWithEmailAndPassword()로 가입 시키기

import { createUserWithEmailAndPassword } from 'firebase/auth';
import './App.css';
import { auth, db } from './shared/firebase';

function App() {
  const signup = async () => {

    const user = await createUserWithEmailAndPassword(auth, "devdev@aaa.com", "devdev123!");
    console.log(user);
  }

  return (
    <div className="App">
      
      <button onClick={signup}>회원가입</button>
    </div>
  );
}

export default App;

3. 가입에 성공했다면 firestore에 유저 정보를 바로 업데이트

import { createUserWithEmailAndPassword } from 'firebase/auth';
import './App.css';
import { auth, db } from './shared/firebase';
import {collection, addDoc} from "firebase/firestore";

function App() {
  const signup = async () => {

    const user = await createUserWithEmailAndPassword(auth, "devdev@aaa.com", "devdev123!");
    console.log(user);

    const user_data = await addDoc(collection(db, "users"), {user_id: "1111", name: "perl"});
    console.log(user_data.id);
  }

  return (
    <div className="App">
      
      <button onClick={signup}>회원가입</button>
    </div>
  );
}

export default App;