adminfront 로그인 해결

2026-02-19 18:02:47 +09:00
parent ba7cca3c60
commit e40dd8120e
22 changed files with 317 additions and 214 deletions
--- a/.env.sample
+++ b/.env.sample
@@ -110,7 +110,7 @@ HYDRA_PUBLIC_URL=${OATHKEEPER_PUBLIC_URL}/oidc

 # OIDC 클라이언트 callback (콤마 구분)
 ADMINFRONT_CALLBACK_URLS=http://localhost:5173/auth/callback,https://sso.hmac.kr/auth/callback
-DEVFRONT_CALLBACK_URLS=http://localhost:5174/callback,https://sso.hmac.kr/devfront/callback
+DEVFRONT_CALLBACK_URLS=http://localhost:5174/auth/callback,https://sso.hmac.kr/devfront/auth/callback

 # Kratos allowed_return_urls 확장 목록 (콤마 구분, 선택)
 # 기본값은 KRATOS_UI_URL, USERFRONT_URL, 각 callback URL을 자동 포함합니다.
@@ -134,9 +134,9 @@ CSRF_COOKIE_NAME=__HOST-baronSSO_csrf
 CSRF_COOKIE_SECRET=localcsrf123

 # AdminFront OIDC 설정
-ADMINFRONT_CALLBACK_URLS=http://localhost:5000/callback,https://sso.hmac.kr/devfront/callback
+ADMINFRONT_CALLBACK_URLS=http://localhost:5173/auth/callback,https://sso.hmac.kr/auth/callback

 # DevFront OIDC 설정
 VITE_OIDC_CLIENT_ID=devfront
 VITE_OIDC_AUTHORITY=https://sso.hmac.kr/oidc
-DEVFRONT_CALLBACK_URLS=http://localhost:5174/callback,https://sso.hmac.kr/devfront/callback
+DEVFRONT_CALLBACK_URLS=http://localhost:5174/auth/callback,https://sso.hmac.kr/devfront/auth/callback
--- a/adminfront/package-lock.json
+++ b/adminfront/package-lock.json
@@ -20,9 +20,11 @@
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "lucide-react": "^0.563.0",
+        "oidc-client-ts": "^3.4.1",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
        "react-hook-form": "^7.71.1",
+        "react-oidc-context": "^3.3.0",
        "react-router-dom": "^6.28.2",
        "sonner": "^2.0.7",
        "tailwind-merge": "^3.4.0",
@@ -3163,6 +3165,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/lightningcss": {
      "version": "1.31.1",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
@@ -3605,6 +3616,18 @@
        "node": ">= 6"
      }
    },
+    "node_modules/oidc-client-ts": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.4.1.tgz",
+      "integrity": "sha512-jNdst/U28Iasukx/L5MP6b274Vr7ftQs6qAhPBCvz6Wt5rPCA+Q/tUmCzfCHHWweWw5szeMy2Gfrm1rITwUKrw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jwt-decode": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/path-parse": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -3926,6 +3949,19 @@
        "react": "^16.8.0 || ^17 || ^18 || ^19"
      }
    },
+    "node_modules/react-oidc-context": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-oidc-context/-/react-oidc-context-3.3.0.tgz",
+      "integrity": "sha512-302T/ma4AOVAxrHdYctDSKXjCq9KNHT564XEO2yOPxRfxEP58xa4nz+GQinNl8x7CnEXECSM5JEjQJk3Cr5BvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "oidc-client-ts": "^3.1.0",
+        "react": ">=16.14.0"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
--- a/adminfront/package.json
+++ b/adminfront/package.json
@@ -26,9 +26,11 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.563.0",
+    "oidc-client-ts": "^3.4.1",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-hook-form": "^7.71.1",
+    "react-oidc-context": "^3.3.0",
    "react-router-dom": "^6.28.2",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
--- a/adminfront/src/components/common/LanguageSelector.tsx
+++ b/adminfront/src/components/common/LanguageSelector.tsx
@@ -44,12 +44,8 @@ function LanguageSelector() {
      className="rounded-full border border-border bg-transparent px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted/20"
      aria-label={t("ui.common.language", "언어")}
    >
-      <option value="ko">
-        {t("ui.common.language_ko", "한국어")}
-      </option>
-      <option value="en">
-        {t("ui.common.language_en", "English")}
-      </option>
+      <option value="ko">{t("ui.common.language_ko", "한국어")}</option>
+      <option value="en">{t("ui.common.language_en", "English")}</option>
    </select>
  );
 }
--- a/adminfront/src/components/layout/AppLayout.tsx
+++ b/adminfront/src/components/layout/AppLayout.tsx
@@ -12,6 +12,7 @@ import {
  Users,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { useAuth } from "react-oidc-context";
 import { NavLink, Outlet, useNavigate } from "react-router-dom";
 import { t } from "../../lib/i18n";
 import LanguageSelector from "../common/LanguageSelector";
@@ -40,6 +41,7 @@ const navItems = [
  { label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
 ];
 function AppLayout() {
+  const auth = useAuth();
  const navigate = useNavigate();
  const [theme, setTheme] = useState<"light" | "dark">(() => {
    const stored = window.localStorage.getItem("admin_theme");
@@ -51,16 +53,16 @@ function AppLayout() {
      window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))
    ) {
      window.localStorage.removeItem("admin_session");
+      auth.removeUser();
      navigate("/login");
    }
  };

  useEffect(() => {
-    const session = window.localStorage.getItem("admin_session");
-    if (!session) {
+    if (!auth.isLoading && !auth.isAuthenticated) {
      navigate("/login");
    }
-  }, [navigate]);
+  }, [auth.isLoading, auth.isAuthenticated, navigate]);

  useEffect(() => {
    const root = document.documentElement;
@@ -77,6 +79,14 @@ function AppLayout() {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

+  if (auth.isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="h-8 w-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+      </div>
+    );
+  }
+
  return (
    <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
--- a/adminfront/src/components/ui/badge.tsx
+++ b/adminfront/src/components/ui/badge.tsx
@@ -26,8 +26,7 @@ const badgeVariants = cva(
 );

 export interface BadgeProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
+  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

 function Badge({ className, variant, ...props }: BadgeProps) {
--- a/adminfront/src/components/ui/button.tsx
+++ b/adminfront/src/components/ui/button.tsx
@@ -34,8 +34,7 @@ const buttonVariants = cva(
 );

 export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
 }
--- a/adminfront/src/components/ui/dialog.tsx
+++ b/adminfront/src/components/ui/dialog.tsx
@@ -1,16 +1,16 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";

-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";

-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;

-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;

-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;

-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;

 const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,12 +20,12 @@ const DialogOverlay = React.forwardRef<
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
    )}
    {...props}
  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
      )}
      {...props}
    >
@@ -48,8 +48,8 @@ const DialogContent = React.forwardRef<
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;

 const DialogHeader = ({
  className,
@@ -58,12 +58,12 @@ const DialogHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
    )}
    {...props}
  />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";

 const DialogFooter = ({
  className,
@@ -72,12 +72,12 @@ const DialogFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
    )}
    {...props}
  />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";

 const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,12 +87,12 @@ const DialogTitle = React.forwardRef<
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
    )}
    {...props}
  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;

 const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
@@ -103,8 +103,8 @@ const DialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

 export {
  Dialog,
@@ -117,4 +117,4 @@ export {
  DialogFooter,
  DialogTitle,
  DialogDescription,
-}
+};
--- a/adminfront/src/components/ui/input.tsx
+++ b/adminfront/src/components/ui/input.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import { cn } from "../../lib/utils";

-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}

 const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
--- a/adminfront/src/components/ui/select.tsx
+++ b/adminfront/src/components/ui/select.tsx
@@ -1,14 +1,14 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";

-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";

-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;

-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;

-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;

 const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
    )}
    {...props}
  >
@@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

 const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,14 +38,14 @@ const SelectScrollUpButton = React.forwardRef<
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
-      className
+      className,
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

 const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,15 +55,15 @@ const SelectScrollDownButton = React.forwardRef<
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
-      className
+      className,
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;

 const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=top]:slide-in-from-bottom-2 data-[state=bottom]:slide-in-from-top-2",
        position === "popper" &&
          "data-[state=open]:slide-in-from-top-2 data-[state=bottom]:translate-y-1 data-[state=left]:-translate-x-1 data-[state=right]:translate-x-1 data-[state=top]:-translate-y-1",
-        className
+        className,
      )}
      position={position}
      {...props}
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
        className={cn(
          "p-1",
          position === "popper" &&
-            "h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
@@ -94,8 +94,8 @@ const SelectContent = React.forwardRef<
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;

 const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
@@ -106,8 +106,8 @@ const SelectLabel = React.forwardRef<
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;

 const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    {...props}
  >
@@ -129,8 +129,8 @@ const SelectItem = React.forwardRef<

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;

 const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -141,8 +141,8 @@ const SelectSeparator = React.forwardRef<
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

 export {
  Select,
@@ -155,4 +155,4 @@ export {
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
-}
+};
--- a/adminfront/src/components/ui/textarea.tsx
+++ b/adminfront/src/components/ui/textarea.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import { cn } from "../../lib/utils";

-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
--- a/adminfront/src/features/auth/AuthCallbackPage.tsx
+++ b/adminfront/src/features/auth/AuthCallbackPage.tsx
@@ -1,29 +1,25 @@
 import { ShieldHalf } from "lucide-react";
 import { useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";

 function AuthCallbackPage() {
+  const auth = useAuth();
  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();

  useEffect(() => {
-    const token = searchParams.get("token");
-    if (token) {
-      window.localStorage.setItem("admin_session", token);
-
-      // 만약 팝업창에서 실행 중이라면 부모 창에 알리고 닫기
-      if (window.opener) {
-        window.opener.postMessage({ type: "LOGIN_SUCCESS", token }, "*");
-        window.close();
-      } else {
-        // 일반 리다이렉트 방식인 경우 홈으로 이동
-        navigate("/", { replace: true });
+    if (auth.isAuthenticated) {
+      // Save token to localStorage for existing API clients that might still use it
+      const user = auth.user;
+      if (user?.access_token) {
+        window.localStorage.setItem("admin_session", user.access_token);
      }
-    } else {
-      console.error("No token found in callback URL");
+      navigate("/", { replace: true });
+    } else if (auth.error) {
+      console.error("Auth Error:", auth.error);
      navigate("/login", { replace: true });
    }
-  }, [navigate, searchParams]);
+  }, [auth.isAuthenticated, auth.error, navigate, auth.user]);

  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
--- a/adminfront/src/features/auth/LoginPage.tsx
+++ b/adminfront/src/features/auth/LoginPage.tsx
@@ -1,6 +1,5 @@
 import { ExternalLink, LogIn, ShieldHalf } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
 import { Button } from "../../components/ui/button";
 import {
  Card,
@@ -11,53 +10,11 @@ import {
 } from "../../components/ui/card";

 function LoginPage() {
-  const navigate = useNavigate();
-  const [isLoggingIn, setIsLoggingIn] = useState(false);
-
-  useEffect(() => {
-    // Listen for login success message from the popup
-    const handleMessage = (event: MessageEvent) => {
-      // Security check: In production, verify event.origin
-      if (event.data?.type === "LOGIN_SUCCESS" && event.data?.token) {
-        window.localStorage.setItem("admin_session", event.data.token);
-        setIsLoggingIn(false);
-        navigate("/");
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [navigate]);
+  const auth = useAuth();

  const handleSSOLogin = () => {
-    const userfrontUrl = import.meta.env.USERFRONT_URL || "https://sso.hmac.kr";
-    const callbackUrl = `${window.location.origin}/auth/callback`;
-
-    // 항상 redirect_uri를 포함하여 로그인이 성공하면 콜백 페이지로 오도록 함
-    const loginUrl = `${userfrontUrl}/signin?source=adminfront&redirect_uri=${encodeURIComponent(callbackUrl)}`;
-
-    const width = 500;
-    const height = 700;
-    const left = window.screen.width / 2 - width / 2;
-    const top = window.screen.height / 2 - height / 2;
-
-    const popup = window.open(
-      loginUrl,
-      "BaronSSOLogin",
-      `width=${width},height=${height},top=${top},left=${left},status=no,menubar=no,toolbar=no`,
-    );
-
-    if (popup) {
-      setIsLoggingIn(true);
-      const timer = setInterval(() => {
-        if (popup.closed) {
-          clearInterval(timer);
-          setIsLoggingIn(false);
-        }
-      }, 1000);
-    } else {
-      alert("팝업 차단이 설정되어 있습니다. 팝업 허용 후 다시 시도해 주세요.");
-    }
+    // OIDC client-side authentication flow started here
+    auth.signinRedirect();
  };

  return (
@@ -89,9 +46,9 @@ function LoginPage() {
            <Button
              onClick={handleSSOLogin}
              className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
-              disabled={isLoggingIn}
+              disabled={auth.isLoading}
            >
-              {isLoggingIn ? (
+              {auth.isLoading ? (
                <>
                  <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                  로그인 진행 중...
--- a/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
+++ b/adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Building2, Plus, Users } from "lucide-react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -18,8 +19,7 @@ import {
  TableHeader,
  TableRow,
 } from "../../../components/ui/table";
-import { fetchTenants, fetchGroups } from "../../../lib/adminApi";
-import { useState } from "react";
+import { fetchGroups, fetchTenants } from "../../../lib/adminApi";

 export default function GlobalUserGroupListPage() {
  const { data: tenantList, isLoading: isTenantsLoading } = useQuery({
@@ -27,7 +27,8 @@ export default function GlobalUserGroupListPage() {
    queryFn: () => fetchTenants(100, 0),
  });

-  if (isTenantsLoading) return <div className="p-8">Loading tenants and groups...</div>;
+  if (isTenantsLoading)
+    return <div className="p-8">Loading tenants and groups...</div>;

  return (
    <div className="space-y-8">
@@ -35,7 +36,8 @@ export default function GlobalUserGroupListPage() {
        <div className="space-y-1">
          <h2 className="text-3xl font-bold tracking-tight">User Groups</h2>
          <p className="text-muted-foreground">
-            모든 테넌트의 유저 그룹을 관리합니다. 권한 상속의 주체가 되는 그룹을 설정하세요.
+            모든 테넌트의 유저 그룹을 관리합니다. 권한 상속의 주체가 되는 그룹을
+            설정하세요.
          </p>
        </div>
      </header>
@@ -62,7 +64,9 @@ function TenantGroupCard({ tenant }: { tenant: any }) {
          <CardTitle className="text-xl flex items-center gap-2">
            <Building2 size={20} className="text-muted-foreground" />
            {tenant.name}
-            <Badge variant="outline" className="ml-2">{tenant.slug}</Badge>
+            <Badge variant="outline" className="ml-2">
+              {tenant.slug}
+            </Badge>
          </CardTitle>
          <CardDescription>
            이 테넌트에 정의된 유저 그룹 목록입니다.
@@ -88,11 +92,16 @@ function TenantGroupCard({ tenant }: { tenant: any }) {
          <TableBody>
            {isLoading ? (
              <TableRow>
-                <TableCell colSpan={4} className="text-center">Loading...</TableCell>
+                <TableCell colSpan={4} className="text-center">
+                  Loading...
+                </TableCell>
              </TableRow>
            ) : groups?.length === 0 ? (
              <TableRow>
-                <TableCell colSpan={4} className="text-center text-muted-foreground py-4">
+                <TableCell
+                  colSpan={4}
+                  className="text-center text-muted-foreground py-4"
+                >
                  등록된 유저 그룹이 없습니다.
                </TableCell>
              </TableRow>
@@ -102,7 +111,10 @@ function TenantGroupCard({ tenant }: { tenant: any }) {
                  <TableCell className="font-medium">
                    <div className="flex items-center gap-2">
                      <Users size={14} className="text-primary" />
-                      <Link to={`/tenants/${tenant.id}/user-groups/${group.id}`} className="hover:underline">
+                      <Link
+                        to={`/tenants/${tenant.id}/user-groups/${group.id}`}
+                        className="hover:underline"
+                      >
                        {group.name}
                      </Link>
                    </div>
@@ -111,7 +123,11 @@ function TenantGroupCard({ tenant }: { tenant: any }) {
                  <TableCell>{group.members?.length || 0} 명</TableCell>
                  <TableCell className="text-right">
                    <Button variant="ghost" size="sm" asChild>
-                      <Link to={`/tenants/${tenant.id}/user-groups/${group.id}`}>상세보기</Link>
+                      <Link
+                        to={`/tenants/${tenant.id}/user-groups/${group.id}`}
+                      >
+                        상세보기
+                      </Link>
                    </Button>
                  </TableCell>
                </TableRow>
--- a/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
+++ b/adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
@@ -61,7 +61,11 @@ export function UserGroupDetailPage() {
  const [selectedRelation, setSelectedRelation] = useState("view");

  // Fetch specific group details
-  const { data: currentGroup, isLoading: isGroupLoading, error } = useQuery({
+  const {
+    data: currentGroup,
+    isLoading: isGroupLoading,
+    error,
+  } = useQuery({
    queryKey: ["user-group-detail", id],
    queryFn: () => fetchGroup(tenantId!, id!),
    enabled: !!id && !!tenantId,
@@ -112,12 +116,7 @@ export function UserGroupDetailPage() {

  const assignRoleMutation = useMutation({
    mutationFn: () =>
-      assignGroupRole(
-        tenantId!,
-        id!,
-        selectedTargetTenantId,
-        selectedRelation,
-      ),
+      assignGroupRole(tenantId!, id!, selectedTargetTenantId, selectedRelation),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
      setIsAddRoleOpen(false);
@@ -137,29 +136,50 @@ export function UserGroupDetailPage() {
    },
  });

-  if (isGroupLoading) return (
-    <div className="flex items-center justify-center p-12">
-      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-      <span className="ml-3 text-muted-foreground">Loading group details...</span>
-    </div>
-  );
+  if (isGroupLoading)
+    return (
+      <div className="flex items-center justify-center p-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        <span className="ml-3 text-muted-foreground">
+          Loading group details...
+        </span>
+      </div>
+    );

-  if (error || !currentGroup) return (
-    <div className="p-8 text-center space-y-4">
-      <h3 className="text-xl font-semibold text-destructive">Could not load group</h3>
-      <div className="p-4 bg-red-50 text-red-700 rounded-md text-left text-sm font-mono overflow-auto max-w-xl mx-auto border border-red-100">
-        <p>Error: {(error as any)?.response?.data?.error || (error as any)?.message || "Not found"}</p>
-        <p className="mt-2 text-red-500 opacity-70">Path: /admin/tenants/{tenantId}/user-groups/{id}</p>
+  if (error || !currentGroup)
+    return (
+      <div className="p-8 text-center space-y-4">
+        <h3 className="text-xl font-semibold text-destructive">
+          Could not load group
+        </h3>
+        <div className="p-4 bg-red-50 text-red-700 rounded-md text-left text-sm font-mono overflow-auto max-w-xl mx-auto border border-red-100">
+          <p>
+            Error:{" "}
+            {(error as any)?.response?.data?.error ||
+              (error as any)?.message ||
+              "Not found"}
+          </p>
+          <p className="mt-2 text-red-500 opacity-70">
+            Path: /admin/tenants/{tenantId}/user-groups/{id}
+          </p>
+        </div>
+        <p className="text-muted-foreground pt-2">
+          The group ID might be invalid or you don't have sufficient
+          permissions.
+        </p>
+        <Button variant="outline" onClick={() => window.location.reload()}>
+          Retry
+        </Button>
+        <div className="pt-4 border-t">
+          <Link
+            to={`/tenants/${tenantId}/user-groups`}
+            className="text-primary hover:underline text-sm"
+          >
+            Return to Group List
+          </Link>
+        </div>
      </div>
-      <p className="text-muted-foreground pt-2">The group ID might be invalid or you don't have sufficient permissions.</p>
-      <Button variant="outline" onClick={() => window.location.reload()}>Retry</Button>
-      <div className="pt-4 border-t">
-        <Link to={`/tenants/${tenantId}/user-groups`} className="text-primary hover:underline text-sm">
-          Return to Group List
-        </Link>
-      </div>
-    </div>
-  );
+    );

  return (
    <div className="space-y-8">
@@ -187,8 +207,8 @@ export function UserGroupDetailPage() {
          </p>
        </div>
        <div className="flex gap-2">
-           <Badge variant="outline">User Group</Badge>
-           <Badge variant="muted">Tenant: {tenantId?.split('-')[0]}...</Badge>
+          <Badge variant="outline">User Group</Badge>
+          <Badge variant="muted">Tenant: {tenantId?.split("-")[0]}...</Badge>
        </div>
      </header>

@@ -217,15 +237,18 @@ export function UserGroupDetailPage() {
                <div className="space-y-4 py-4">
                  <div className="space-y-2">
                    <Label>Search User</Label>
-                    <Input 
-                      placeholder="Search by email or name..." 
+                    <Input
+                      placeholder="Search by email or name..."
                      value={searchUser}
                      onChange={(e) => setSearchUser(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Select User</Label>
-                    <Select value={selectedUserId} onValueChange={setSelectedUserId}>
+                    <Select
+                      value={selectedUserId}
+                      onValueChange={setSelectedUserId}
+                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Choose a user" />
                      </SelectTrigger>
@@ -240,10 +263,13 @@ export function UserGroupDetailPage() {
                  </div>
                </div>
                <DialogFooter>
-                  <Button variant="outline" onClick={() => setIsAddMemberOpen(false)}>
+                  <Button
+                    variant="outline"
+                    onClick={() => setIsAddMemberOpen(false)}
+                  >
                    Cancel
                  </Button>
-                  <Button 
+                  <Button
                    onClick={() => addMemberMutation.mutate(selectedUserId)}
                    disabled={!selectedUserId || addMemberMutation.isPending}
                  >
@@ -264,7 +290,10 @@ export function UserGroupDetailPage() {
              <TableBody>
                {!currentGroup.members || currentGroup.members.length === 0 ? (
                  <TableRow>
-                    <TableCell colSpan={2} className="text-center py-4 text-muted-foreground">
+                    <TableCell
+                      colSpan={2}
+                      className="text-center py-4 text-muted-foreground"
+                    >
                      No members in this group.
                    </TableCell>
                  </TableRow>
@@ -274,13 +303,15 @@ export function UserGroupDetailPage() {
                      <TableCell>
                        <div>
                          <p className="font-medium">{member.name}</p>
-                          <p className="text-xs text-muted-foreground">{member.email}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {member.email}
+                          </p>
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
-                        <Button 
-                          variant="ghost" 
-                          size="icon" 
+                        <Button
+                          variant="ghost"
+                          size="icon"
                          className="text-destructive"
                          onClick={() => removeMemberMutation.mutate(member.id)}
                        >
@@ -300,7 +331,9 @@ export function UserGroupDetailPage() {
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Permissions</CardTitle>
-              <CardDescription>Tenant roles assigned to this group.</CardDescription>
+              <CardDescription>
+                Tenant roles assigned to this group.
+              </CardDescription>
            </div>
            <Dialog open={isAddRoleOpen} onOpenChange={setIsAddRoleOpen}>
              <DialogTrigger asChild>
@@ -313,13 +346,17 @@ export function UserGroupDetailPage() {
                <DialogHeader>
                  <DialogTitle>Assign Tenant Role</DialogTitle>
                  <DialogDescription>
-                    Members of this group will inherit this role on the target tenant.
+                    Members of this group will inherit this role on the target
+                    tenant.
                  </DialogDescription>
                </DialogHeader>
                <div className="space-y-4 py-4">
-                   <div className="space-y-2">
+                  <div className="space-y-2">
                    <Label>Target Tenant</Label>
-                    <Select value={selectedTargetTenantId} onValueChange={setSelectedTargetTenantId}>
+                    <Select
+                      value={selectedTargetTenantId}
+                      onValueChange={setSelectedTargetTenantId}
+                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select target tenant" />
                      </SelectTrigger>
@@ -334,25 +371,37 @@ export function UserGroupDetailPage() {
                  </div>
                  <div className="space-y-2">
                    <Label>Role (Relation)</Label>
-                    <Select value={selectedRelation} onValueChange={setSelectedRelation}>
+                    <Select
+                      value={selectedRelation}
+                      onValueChange={setSelectedRelation}
+                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="view">View (Read-only)</SelectItem>
-                        <SelectItem value="manage">Manage (Read/Write)</SelectItem>
-                        <SelectItem value="admins">Admin (Full Control)</SelectItem>
+                        <SelectItem value="manage">
+                          Manage (Read/Write)
+                        </SelectItem>
+                        <SelectItem value="admins">
+                          Admin (Full Control)
+                        </SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <DialogFooter>
-                  <Button variant="outline" onClick={() => setIsAddRoleOpen(false)}>
+                  <Button
+                    variant="outline"
+                    onClick={() => setIsAddRoleOpen(false)}
+                  >
                    Cancel
                  </Button>
-                  <Button 
+                  <Button
                    onClick={() => assignRoleMutation.mutate()}
-                    disabled={!selectedTargetTenantId || assignRoleMutation.isPending}
+                    disabled={
+                      !selectedTargetTenantId || assignRoleMutation.isPending
+                    }
                  >
                    Assign
                  </Button>
@@ -371,10 +420,17 @@ export function UserGroupDetailPage() {
              </TableHeader>
              <TableBody>
                {isRolesLoading ? (
-                  <TableRow><TableCell colSpan={3} className="text-center">Loading...</TableCell></TableRow>
+                  <TableRow>
+                    <TableCell colSpan={3} className="text-center">
+                      Loading...
+                    </TableCell>
+                  </TableRow>
                ) : !groupRoles || groupRoles.length === 0 ? (
                  <TableRow>
-                    <TableCell colSpan={3} className="text-center py-4 text-muted-foreground">
+                    <TableCell
+                      colSpan={3}
+                      className="text-center py-4 text-muted-foreground"
+                    >
                      No roles assigned.
                    </TableCell>
                  </TableRow>
@@ -382,17 +438,26 @@ export function UserGroupDetailPage() {
                  groupRoles.map((role, idx) => (
                    <TableRow key={`${role.tenantId}-${role.relation}-${idx}`}>
                      <TableCell>
-                        <div className="font-medium">{role.tenantName || role.tenantId}</div>
+                        <div className="font-medium">
+                          {role.tenantName || role.tenantId}
+                        </div>
                      </TableCell>
                      <TableCell>
-                        <Badge variant="outline" className="capitalize">{role.relation}</Badge>
+                        <Badge variant="outline" className="capitalize">
+                          {role.relation}
+                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
-                        <Button 
-                          variant="ghost" 
-                          size="icon" 
+                        <Button
+                          variant="ghost"
+                          size="icon"
                          className="text-destructive"
-                          onClick={() => removeRoleMutation.mutate({ targetTenantId: role.tenantId, relation: role.relation })}
+                          onClick={() =>
+                            removeRoleMutation.mutate({
+                              targetTenantId: role.tenantId,
+                              relation: role.relation,
+                            })
+                          }
                        >
                          <Trash2 size={14} />
                        </Button>
--- a/adminfront/src/index.css
+++ b/adminfront/src/index.css
@@ -54,8 +54,7 @@

  body {
    @apply min-h-screen bg-background font-sans text-foreground antialiased;
-    background-image:
-      radial-gradient(
+    background-image: radial-gradient(
        circle at 10% 18%,
        rgba(54, 211, 153, 0.16),
        transparent 28%
--- a/adminfront/src/lib/adminApi.ts
+++ b/adminfront/src/lib/adminApi.ts
@@ -208,7 +208,9 @@ export async function createGroup(
 }

 export async function deleteGroup(tenantId: string, groupId: string) {
-  await apiClient.delete(`/v1/admin/tenants/${tenantId}/user-groups/${groupId}`);
+  await apiClient.delete(
+    `/v1/admin/tenants/${tenantId}/user-groups/${groupId}`,
+  );
 }

 export async function addGroupMember(
--- a/adminfront/src/lib/auth.ts
+++ b/adminfront/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:5000/oidc", // Gateway Proxy URL
+  client_id: import.meta.env.VITE_OIDC_CLIENT_ID || "adminfront",
+  redirect_uri: `${window.location.origin}/auth/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 || "",
+});
--- a/adminfront/src/main.tsx
+++ b/adminfront/src/main.tsx
@@ -1,9 +1,11 @@
 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 { oidcConfig } from "./lib/auth";
 import "./index.css";

 const rootElement = document.getElementById("root");
@@ -14,8 +16,10 @@ if (!rootElement) {

 createRoot(rootElement).render(
  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
+    <AuthProvider {...oidcConfig}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
+    </AuthProvider>
  </StrictMode>,
 );
--- a/compose.ory.yaml
+++ b/compose.ory.yaml
@@ -211,10 +211,10 @@ services:
              hydra create oauth2-client \
                --endpoint http://hydra:4445 \
                --id adminfront \
-                --secret admin-secret \
                --grant-type authorization_code,refresh_token \
                --response-type code \
                --scope openid,offline_access,profile,email \
+                --token-endpoint-auth-method none \
                --redirect-uri ${ADMINFRONT_CALLBACK_URLS:-http://localhost:5173/auth/callback}

              hydra create oauth2-client \
@@ -224,7 +224,7 @@ services:
              --response-type code \
              --scope openid,offline_access,profile,email \
              --token-endpoint-auth-method none \
-              --redirect-uri ${DEVFRONT_CALLBACK_URLS:-http://localhost:5174/callback}
+              --redirect-uri ${DEVFRONT_CALLBACK_URLS:-http://localhost:5174/auth/callback}

              hydra create oauth2-client \
                --endpoint http://hydra:4445 \
--- a/devfront/src/app/routes.tsx
+++ b/devfront/src/app/routes.tsx
@@ -15,7 +15,7 @@ export const router = createBrowserRouter(
      element: <LoginPage />,
    },
    {
-      path: "/callback",
+      path: "/auth/callback",
      element: <AuthCallbackPage />,
    },
    {
--- a/devfront/src/lib/auth.ts
+++ b/devfront/src/lib/auth.ts
@@ -4,7 +4,7 @@ import type { AuthProviderProps } from "react-oidc-context";
 export const oidcConfig: AuthProviderProps = {
  authority: import.meta.env.VITE_OIDC_AUTHORITY || "http://localhost:5000/oidc", // Gateway Proxy URL
  client_id: import.meta.env.VITE_OIDC_CLIENT_ID || "devfront",
-  redirect_uri: `${window.location.origin}/callback`,
+  redirect_uri: `${window.location.origin}/auth/callback`,
  response_type: "code",
  scope: "openid offline_access profile email", // offline_access for refresh token
  post_logout_redirect_uri: window.location.origin,