[마이머니앱] 파이어베이스(DB) 사용/회원가입/로그아웃

 

import { useState } from "react";
import { useAuthContext } from "./useAuthContext";
import { fireauth } from "../firebase/config";

export const useLogout = () => {
  const [error, setError] = useState();
  const [isPending, setIsPending] = useState(false);
  const { dispatch } = useAuthContext();

  const logout = async () => {
    setError(null);
    setIsPending(true);

    try {
      //파이어베이스 로그아웃
      await fireauth.signOut();
      //로그아웃 액션 디스패치
      dispatch({ type: "LOGOUT" });

      setIsPending(false);
      setError(null);
    } catch (err) {
      console.log(err.message);
      setError(err.message);
      setIsPending(false);
    }
  };

  return { logout, error, isPending };
};

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

 

 

 

 

 

 

 

 

 

콘솔로 이동

 

오른쪽 설정 아이콘 클릭 후 

 

구성에 있는 내욕 복사하기

 

 

 

 

firebase8.5 설치(터미널)

 

 

 

 

 

firebase 폴더 내에 config.js 생성

 

import firebase from "firebase";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.VITE_API_KEY,
  authDomain: import.meta.VITE_AUTH_DOMAIN,
  projectId: import.meta.VITE_PROJECTID,
  storageBucket: import.meta.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.VITE_MESSAGEING_SENDERID,
  appId: import.meta.VITE_APPID,
};

//본인 계정의 키 등 설정값을 가지고 초기화
//firebase init
firebase.initializeApp(firebaseConfig);

//파이어 스토어 DB서비스
//init service
const firedb = firebase.firestore();

export { firedb };

 

 

인증 서비스를 추가한다. 

 

cors 확장 프로그램 꺼야함 

 

 

config.js 에서 인증서비스 추가한다. 

//파이어 스토어 DB서비스

//init service

const firedb = firebase.firestore();

const fireauth = firebase.auth(); //인증서비스

export { firedb, fireauth };

 

 

 

 

인증을 할 hooks를 만든다. (재사용을 위해서)

 

import { useState } from "react";
import { fireauth } from "../firebase/config";

export const useSignup = () => {
  const [error, setError] = useState();
  const [isPending, setIsPending] = useState(false);

  const signup = async (email, password, displayName) => {
    setError(null);
    setIsPending(true);

    try {
      // 이메일,패스워드로 가입
      const res = await fireauth.createUserWithEmailAndPassword(email, password);
      console.log(res.user);

      if (!res) {
        throw new Error("가입중 오류가 발생했습니다.");
      }
      // 유저 프로파일에 이름을 업데이트
      await res.user.updateProfile({ displayName: displayName });

      setError(null);
      setIsPending(false);
    }
    catch (err) {
      console.log(err.message);
      setError(err.message);
      setIsPending(false);
    }
  };

  return { signup, error, isPending };
};

 

 

 config.js에서 fireauth가져옴

signup 함수를 만듬

email과 password를 가지고 가입을 진행함.

 

가입이 되지 않았으면 에러 출력 

 

Signup.jsx에서 사용한다. 

import { useState } from "react";

import styles from "./Signup.module.css";

import { useSignup } from "../../hooks/useSignup";

const Signup = () => {

  const [email, setEmail] = useState(""); //이메일

  const [password, setPassword] = useState(""); //비밀번호

  const [name, setName] = useState(""); //이름

  //미리 만든 가입하기 hook 으로 가입하기 함수와 에러, 로딩 상태 가져옴

  const { signup, error, isPending } = useSignup(); //hooks 사용

  const handleSubmit = (e) => {

    e.preventDefault();

    signup(email, password, name); //signup 메소드 사용하여 가입

  };

  return (

    <form onSubmit={handleSubmit} className={styles["signup-form"]}>

      <h2>Signup</h2>

      <label>

        <span>email:</span>

        <input

          type="email"

          onChange={(e) => setEmail(e.target.value)}

          value={email}

        />

      </label>

      <label>

        <span>password:</span>

        <input

          type="password"

          onChange={(e) => setPassword(e.target.value)}

          value={password}

        />

      </label>

      <label>

        <span>name:</span>

        <input

          type="text"

          onChange={(e) => setName(e.target.value)}

          value={name}

        />

      </label>

      {!isPending && <button className="btn">가입하기</button>}

      {isPending && (

        <button className="btn" disabled>

          loading

        </button>

      )}

      {error && <p>{error}</p>}

    </form>

  );

};

export default Signup;

 

로딩중에는 가입하기 버튼 클릭할 수 없도록 한다.

그리고 로딩중일때는 버튼을 disabled로 클릭하지 못하도록 한다.

그리고 에러가 발생하면 에러를 출력한다. 

 

1. 에러 띄워보기 

 

 

비밀번호 6자 이상 입력하라고 에러 뜸 ( 이거는 내가 정한게 아니라 파이어베이스에서 제공하는 유효성검사임)

 

 

제대로 입력하면 콘솔에 뜬다.

 

콘솔로 확인하기

 

 

가입된 유저는 파이어 베이스에서 확인 가능함

 

 

 

 

 

 

그리고 컨텍스트로 만들어서 전역으로 공유를 하자

import { createContext, useReducer } from "react";

//인증 컨텍스트 만들기
export const AuthContext = createContext();

//리듀서 메소드
export const authReducer = (state, action) => {
  switch (action.type) {
    case "":
    default:
      return state;
  }
};

// 인증 프로바이더에서 useReducer를 사용하고 스테이트와 디스패치를 제공
export const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
  });

  return (
    <AuthContext.Provider value={{ ...state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
};

 

 

 

만든 AuthContextProvider 적용하기 

 

 

 

 

import { useContext } from "react";
import { AuthContext } from "../context/AuthContext";

export const useAuthContext = () => {
  const context = useContext(AuthContext);

  if (!context) {
    throw Error(
      "useAuthContext는 AuthContextProvider 내에서만 사용가능합니다."
    );
  }

  return context;
};

AuthContext를 좀더 쉽게 사용하기 위한 파일 useAuthContext 을 hooks 폴더에 만듬

​

useAuthContext 를 import 하여 AuthContext를 사용

​

 

useSignup.js

 

컨텍스트에서 dispatch가져옴

 

유저 정보를 dispatch로 저장한다. 

타입은 LOGIN . payload(값) 을 user 정보

 

 

 

AuthContext.jsx 에서 LOGIN 타입을 추가한다..

.

 

콘솔로 state가 변경될 때마다 출력하게 테스트한다. 

 

 

가입을 해본다. 

 

 

파이어베이스 홈페이지에서 가입 됐는지 확인했음. 

 

 

 

이제 hooks에서 logout 훅을 만들어봄

 

import { useState } from "react";
import { useAuthContext } from "./useAuthContext";
import { fireauth } from "../firebase/config";

export const useLogout = () => {
  const [error, setError] = useState();
  const [isPending, setIsPending] = useState(false);
  const { dispatch } = useAuthContext();

  const logout = async () => {
    setError(null);
    setIsPending(true);

    try {
      //파이어베이스 로그아웃
      await fireauth.signOut();
      //로그아웃 액션 디스패치
      dispatch({ type: "LOGOUT" });

      setIsPending(false);
      setError(null);
    } catch (err) {
      console.log(err.message);
      setError(err.message);
      setIsPending(false);
    }
  };

  return { logout, error, isPending };
};

 

 

AuthContext.jsx에서 logout case추가

 

Navbar.jsx에서 사용한다. 

//CSS 모듈을 사용하면 CSS클래스가 다른 컴포넌트에도 적용되는것을 방지함

import { useLogout } from "../hooks/useLogout";

import styles from "./Navbar.module.css";

import { Link } from "react-router-dom";

const Navbar = () => {

  //로그아웃 메서드

  const { logout } = useLogout();

  return (

    <nav className={styles.navbar}>

      <ul>

        <li className={styles.title}>

          <Link to="/">myMoney</Link>

        </li>

        <li>

          <Link to="/login">로그인</Link>

        </li>

        <li>

          <Link to="/signup">가입</Link>

        </li>

        <li>

          <button className="btn" onClick={logout}>

            로그아웃

          </button>

        </li>

      </ul>

    </nav>

  );

};

export default Navbar;

 

 

테스트하기 

 

1. 처음 상태는 state 유저 -> null

2. 회원가입 시 state 유저 -> 유저 정보 

3. 로그아웃 클릭시 state 유저 -> null