[개인 포트폴리오] [클라이밍 커뮤니티 SNS] 2. 코드 분석 <protected-route.js>

import React from "react";
import { Navigate } from 'react-router-dom';
import { useAuthState } from 'react-firebase-hooks/auth';
import { getAuth } from 'firebase/auth';

const auth = getAuth();
// Firebase Authentication 서비스의 인스턴스를 가져오는 코드

const ProtectedRoute = ({ children }) => {
  const [user, loading] = useAuthState(auth);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <Navigate to="/login" replace />;
    // replace : 뒤로 가기 버튼을 눌러 이전 페이지로 돌아가는 것을 방지
  }

  if (loading) {
    return <div>Loading...</div>;
  }
  
  return <>{children}</>;
};

export default ProtectedRoute;