OIDC 인증 라우트 및 로그인/콜백 페이지 구현

devfront/src/app/routes.tsx

@@ -1,5 +1,8 @@
 import { Navigate, createBrowserRouter } from "react-router-dom";
 import AppLayout from "../components/layout/AppLayout";
+import AuthCallbackPage from "../features/auth/AuthCallbackPage";
+import AuthGuard from "../features/auth/AuthGuard";
+import LoginPage from "../features/auth/LoginPage";
 import ClientConsentsPage from "../features/clients/ClientConsentsPage";
 import ClientDetailsPage from "../features/clients/ClientDetailsPage";
 import ClientGeneralPage from "../features/clients/ClientGeneralPage";
@@ -7,16 +10,29 @@ import ClientsPage from "../features/clients/ClientsPage";
 
 export const router = createBrowserRouter(
   [
+    {
+      path: "/login",
+      element: <LoginPage />,
+    },
+    {
+      path: "/callback",
+      element: <AuthCallbackPage />,
+    },
     {
       path: "/",
-      element: <AppLayout />,
+      element: <AuthGuard />,
       children: [
-        { index: true, element: <Navigate to="/clients" replace /> },
-        { path: "clients", element: <ClientsPage /> },
-        { path: "clients/new", element: <ClientGeneralPage /> },
-        { path: "clients/:id", element: <ClientDetailsPage /> },
-        { path: "clients/:id/consents", element: <ClientConsentsPage /> },
-        { path: "clients/:id/settings", element: <ClientGeneralPage /> },
+        {
+          element: <AppLayout />,
+          children: [
+            { index: true, element: <Navigate to="/clients" replace /> },
+            { path: "clients", element: <ClientsPage /> },
+            { path: "clients/new", element: <ClientGeneralPage /> },
+            { path: "clients/:id", element: <ClientDetailsPage /> },
+            { path: "clients/:id/consents", element: <ClientConsentsPage /> },
+            { path: "clients/:id/settings", element: <ClientGeneralPage /> },
+          ],
+        },
       ],
     },
   ],

devfront/src/features/auth/AuthCallbackPage.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
+
+export default function AuthCallbackPage() {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (auth.isAuthenticated) {
+      navigate("/", { replace: true });
+    } else if (auth.error) {
+      console.error("Auth Error:", auth.error);
+      navigate("/login", { replace: true });
+    }
+  }, [auth.isAuthenticated, auth.error, navigate]);
+
+  return <div>Loading Auth...</div>;
+}

devfront/src/features/auth/AuthGuard.tsx

@@ -0,0 +1,20 @@
+import { useAuth } from "react-oidc-context";
+import { Navigate, Outlet } from "react-router-dom";
+
+export default function AuthGuard() {
+  const auth = useAuth();
+
+  if (auth.isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (auth.error) {
+    return <div>Auth Error: {auth.error.message}</div>;
+  }
+
+  if (!auth.isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+}

devfront/src/features/auth/LoginPage.tsx

@@ -0,0 +1,23 @@
+import { useAuth } from "react-oidc-context";
+
+export default function LoginPage() {
+  const auth = useAuth();
+
+  const handleLogin = () => {
+    auth.signinRedirect();
+  };
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+      <div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm">
+        <h1 className="mb-6 text-center text-2xl font-bold text-gray-900">DevFront Login</h1>
+        <button
+          onClick={handleLogin}
+          className="w-full rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+        >
+          Sign in with Baron SSO
+        </button>
+      </div>
+    </div>
+  );
+}

devfront/src/features/auth/authApi.ts

@@ -0,0 +1,22 @@
+import apiClient from "../../lib/apiClient";
+
+export interface Tenant {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface UserProfile {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  companyCode?: string;
+  tenantId?: string;
+  tenant?: Tenant;
+}
+
+export async function fetchMe() {
+  const { data } = await apiClient.get<UserProfile>("/user/me");
+  return data;
+}

devfront/src/lib/auth.ts

@@ -0,0 +1,20 @@
+import { UserManager, WebStorageStateStore } from "oidc-client-ts";
+import type { AuthProviderProps } from "react-oidc-context";
+
+export const oidcConfig: AuthProviderProps = {
+  authority: import.meta.env.VITE_OIDC_AUTHORITY || "http://localhost:3000/api/v1/auth/oidc", // Backend Proxy URL
+  client_id: import.meta.env.VITE_OIDC_CLIENT_ID || "devfront-client",
+  redirect_uri: `${window.location.origin}/callback`,
+  response_type: "code",
+  scope: "openid offline_access profile email", // offline_access for refresh token
+  post_logout_redirect_uri: window.location.origin,
+  userStore: new WebStorageStateStore({ store: window.localStorage }),
+  automaticSilentRenew: true,
+};
+
+export const userManager = new UserManager({
+  ...oidcConfig,
+  authority: oidcConfig.authority || "",
+  client_id: oidcConfig.client_id || "",
+  redirect_uri: oidcConfig.redirect_uri || "",
+});

devfront/src/main.tsx

@@ -1,11 +1,13 @@
 import { QueryClientProvider } from "@tanstack/react-query";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { AuthProvider } from "react-oidc-context";
 import { RouterProvider } from "react-router-dom";
 import { queryClient } from "./app/queryClient";
 import { router } from "./app/routes";
 import { Toaster } from "./components/ui/toaster";
 import "./index.css";
+import { oidcConfig } from "./lib/auth";
 
 const rootElement = document.getElementById("root");
 
@@ -15,9 +17,11 @@ if (!rootElement) {
 
 createRoot(rootElement).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-      <Toaster />
-    </QueryClientProvider>
+    <AuthProvider {...oidcConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <Toaster />
+      </QueryClientProvider>
+    </AuthProvider>
   </StrictMode>,
 );