로그인 시스템 구현하기: 필수 페이지와 비필수 페이지의 차이 이해하기

로그인 필요한 페이지와 필요없는 페이지 구분 및 자동 리다이렉션 구현기

웹사이트를 개발하다 보면 로그인이 필요한 페이지와 그렇지 않은 페이지를 구분하는 것은 매우 중요한 일입니다. 여러분은 이미 알고 있겠지만, 이러한 기능을 제대로 구현하지 않으면 보안에 큰 문제가 생길 수 있습니다. 오늘은 제가 최근에 작업한 프로젝트에서 로그인이 필요한 페이지와 필요없는 페이지를 어떻게 구분했는지, 그리고 사용자가 로그인이 필요한 페이지에 접근하려고 할 때 자동으로 로그인 페이지로 리다이렉션시키는 방법을 소개하려 합니다.

1. 로그인 상태 관리하기

가장 먼저, 로그인 상태를 관리하기 위한 기본적인 설정을 해야 했습니다. 이를 위해 Supabase를 활용하여 세션 상태를 관리했습니다.

const [session, setSession] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
  supabase.auth.getSession().then(({ data: { session } }) => {
    setSession(session);
    setLoading(false);
  });

  const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
    setSession(session);
    setLoading(false);
  });

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

위 코드는 컴포넌트가 마운트될 때 Supabase를 통해 현재 사용자 세션을 가져와서 session 상태에 저장하는 역할을 합니다. 또한, 세션 상태가 변경될 때마다 setSession을 호출하여 상태를 갱신합니다.

2. 접근 보호하기 위한 ProtectedRoute 컴포넌트 작성

이제 특정 페이지에 접근하기 전에 사용자가 로그인되어 있는지를 확인해야 했습니다. 이를 위해 접근 보호 컴포넌트 ProtectedRoute를 만들었습니다.

const ProtectedRoute = ({ children }) => {
  if (loading) {
    return <div>로딩 중...</div>; // 로딩 스피너를 사용할 수도 있습니다.
  }
  if (!session) {
    return <Navigate to="/login" replace />;
  }
  return children;
};

이 ProtectedRoute 컴포넌트는 자식 요소를 받아와서 세션 상태를 확인한 후, 세션이 없으면 로그인 페이지로 리다이렉션합니다. 만약 세션이 있으면 자식 요소를 렌더링합니다.

3. 라우팅 설정 및 적용

이제 react-router-dom을 이용해 전체 라우팅 설정을 했습니다. 이 부분에서는 ProtectedRoute를 활용하여 특정 라우트에 접근할 때 로그인을 확인합니다.

<Routes>
  <Route
    path="/"
    element={
      <ProtectedRoute>
        <DailyActivityTracker />
      </ProtectedRoute>
    }
  />
  <Route path="/login" element={<Login />} />
  <Route
    path="/mypage"
    element={
      <ProtectedRoute>
        <Account />
      </ProtectedRoute>
    }
  />
  <Route path="*" element={<NotFound />} />
</Routes>

위 코드는 /, /mypage 경로에 대해 ProtectedRoute를 적용한 모습입니다. 사용자가 로그인되어 있지 않은 상태에서 이 경로들에 접근하려고 하면, 자동으로 /login 페이지로 리다이렉션됩니다.

4. 로그인 페이지 구현

마지막으로 로그인 페이지를 구현했습니다. Supabase의 Auth 컴포넌트를 이용해 간단하게 로그인 폼을 만들었습니다.

import { Auth } from "@supabase/auth-ui-react";
import { GithubCustomTheme } from "../util/supabase-custom-theme";

const Login = () => {
  return (
    <div className="Login">
      <Auth
        supabaseClient={supabase}
        appearance={GithubCustomTheme}
        providers={["github"]}
        onlyThirdPartyProviders={true}
      />
    </div>
  );
};

Auth 컴포넌트를 이용하면 다양한 로그인 제공자를 활용할 수 있어 매우 편리합니다. 이 예제에서는 GitHub 로그인을 사용했습니다.

마무리

이제 여러분도 로그인이 필요한 페이지와 그렇지 않은 페이지를 구분하고, 자동 리다이렉션을 통해 사용자 경험을 향상시킬 수 있습니다. 간단한 작업 같지만, 보안을 고려한 중요한 단계이니 꼭 프로젝트에 적용해 보세요. Happy coding! 🚀

🔥 해당 포스팅은 Dev.POST 도움을 받아 작성되었습니다.