개인 프로젝트 - 블로그 만들기 #2

로그인 기능

• 구글 아이디를 통해 인증하도록 하였음. 추후 댓글 기능이나 내가 로그인했을 경우 관리자 기능, 게시글 작성, 삭제 등의 기능들을 활용하기 위해
• 간단하게 firebase에서 제공해주는 구글 인증 기능을 켜주고

//firebase.js
import { getAuth } from "firebase/auth";
...
export const auth = getAuth(app);

• 위와 같이 나의 앱(웹)에 인증 시스템을 부여해주고

//googleBtn.jsx

export default function GoogleButton() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setIsLoggedIn(!!user);
    });

    return () => unsubscribe();
  }, []);

  const handleLogin = async () => {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(auth, provider);
  };

  const handleLogout = async () => {
    await signOut(auth);
    navigate("/");
  };

  const onClick = () => {
    if (isLoggedIn) {
      handleLogout();
    } else {
      handleLogin();
    }
  };

  return (
    <Button onClick={onClick}>
      <Logo src="/google-icon.svg" />
      {isLoggedIn ? "Logout" : "Login"}
    </Button>
  );
}

• 버튼 클릭 시 구글 로그인 팝업창이 뜨고 로그인 절차를 밟는다
• 로그인 시 버튼의 텍스트가 Login에서 Logout으로 바뀌고 다시 클릭 시 로그아웃된다.