[React+Vite/TS] Firebase에 인증된 사용자만 접근 가능한 라우트 만들기

Firebase의 auth를 사용하여 인증된 사용자만 접근 가능한 라우트 컴포넌트를 만들어보자.

// children props: component 내부의 모든 것
export default function ProtectedRoute({
  children,
}: {
  children: React.ReactNode;
}) {
  // 유저가 로그인했는지 확인
  // 로그인 유저: 유저의 값, 로그인하지 않은 유저: null return
  const user = auth.currentUser;
  // 로그인 유저가 아닐 경우 로그인 페이지로 리다이렉트
  if (user === null) {
    return <Navigate to="/login" />;
  }
  return children;
}

 

- 위와 같이 보호된 라우트를 만들고, 유저의 로그인 여부를 체크한다.

- auth.currentUser의 경우 유저의 값을 반환해주는데, 로그인하지 않은 경우 null을 반환한다.

- 로그인 유저가 아닐 경우, login 페이지로 리다이렉트 해준다.

- ProtectedRoute의 매개변수인 children은 component 내부의 모든 것을 의미한다.

 

 

const router = createBrowserRouter([
  {
    path: "/",
    // 로그인 유저만 접근
    element: (
      <ProtectedRoute>
        <Layout />
      </ProtectedRoute>
    ),
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "profile",
        element: <Profile />,
      },
    ],
  },

 

 - 이 후 로그인 유저만 접근이 가능한 페이지를 위에서 만든 라우트 컴포넌트로 감싸주면 끝!

 - 위의 경우, / 경로(Home)과 /profile 경로는 로그인한 유저만 접근 가능하므로, Layout 라우트에 감싸주었다