[React / ts] Task App 만들기 - ⑦ Firebase 연동하여 로그인, 로그아웃 만들기

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

Firebase | Google's Mobile and Web App Development Platform

 

Firebase 홈페이지에 접속하여 Get strated in console을 누른 뒤, react-task-app 프로젝트를 생성해준다.

ios, android 등의 다양한 앱을 추가할 수 있는데, 웹을 추가해준다.

안내되어있는대로 firebase 라이브러리를 설치한 뒤, src에 firebase.ts를 만든 후 SDK를 복사해 붙여넣는다.

 

 

Firebase-Authentication에 들어가 Google Login을 사용 설정을 해준 뒤 저장을 누른다.

 

// BoardList.tsx

import { FiLogIn, FiPlusCircle } from "react-icons/fi";
import { useRef, useState } from "react";
import { useTypedDispatch, useTypedSelector } from "../../hooks/redux";
import { IBoard } from "../../types";
import {
  addButton,
  addSection,
  boardItem,
  boardItemActive,
  container,
  title,
} from "./BoardList.css";
import clsx from "clsx";
import SideForm from "./SideForm/SideForm";
import { GoSignOut } from "react-icons/go";
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from "firebase/auth";
import app from "../../firebase";
import { removeUser, setUser } from "../../store/slices/userSlice";
import { useAuth } from "../../hooks/useAuth";

type TBoardListProps = {
  activeBoardId: string;
  setActiveBoardId: React.Dispatch<React.SetStateAction<string>>;
};

const BoardList: React.FC<TBoardListProps> = ({
  activeBoardId,
  setActiveBoardId,
}) => {
  const boardArray = useTypedSelector((state) => state.boards.boardArray);
  const [isFormOpen, setIsFormOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const auth = getAuth(app);
  const provider = new GoogleAuthProvider();
  const dispatch = useTypedDispatch();

  const handleClick = () => {
    setIsFormOpen(!isFormOpen);
    inputRef.current?.focus();
  };

  const { isAuth } = useAuth();

  const handleLogin = () => {
    signInWithPopup(auth, provider)
      .then((userCredential) => {
        dispatch(
          setUser({
            email: userCredential.user.email,
            id: userCredential.user.uid,
          })
        );
      })
      .catch((error) => console.log(error));
  };

  const handleLogout = () => {
    signOut(auth)
      .then(() => {
        dispatch(removeUser());
      })
      .catch((error) => console.log(error));
  };

  return (
    <div className={container}>
      <div className={title}>게시판:</div>

      {boardArray.map((board: IBoard, index) => (
        <div
          key={board.boardId}
          onClick={() => setActiveBoardId(boardArray[index].boardId)}
          className={clsx(
            {
              [boardItemActive]:
                boardArray.findIndex((b) => b.boardId === activeBoardId) ===
                index,
            },
            {
              [boardItem]:
                boardArray.findIndex((b) => b.boardId === activeBoardId) !==
                index,
            }
          )}
        >
          <div>{board.boardName}</div>
        </div>
      ))}
      <div className={addSection}>
        {isFormOpen ? (
          <SideForm setIsFormOpen={setIsFormOpen} />
        ) : (
          <FiPlusCircle className={addButton} onClick={handleClick} />
        )}
      </div>

      {isAuth ? (
        <GoSignOut className={addButton} onClick={handleLogout} />
      ) : (
        <FiLogIn className={addButton} onClick={handleLogin} />
      )}
    </div>
  );
};

export default BoardList;

 

// userSlice.ts

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  email: "",
  id: "",
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.email = action.payload.email;
      state.id = state.email = action.payload.id;
    },
    removeUser: (state) => {
      state.email = "";
      state.id = "";
    },
  },
});

export const { setUser, removeUser } = userSlice.actions;
export const userReducer = userSlice.reducer;

 

firebase/auth에서 제공하는 getAuth, GoogleAuthProvider 등을 활용하여 로그인, 로그아웃을 구현한다.