baron-sso/devfront/src/features/auth/AuthGuard.tsx

import { useAuth } from "react-oidc-context";
import { Navigate, Outlet } from "react-router-dom";
import { t } from "../../lib/i18n";
import { resolveProfileRole } from "../../lib/role";

export default function AuthGuard() {
  const auth = useAuth();

  if (auth.isLoading || auth.activeNavigator) {
    return <div>Loading...</div>;
  }

  if (auth.error) {
    return <div>Auth Error: {auth.error.message}</div>;
  }

  if (!auth.isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  const normalizedRole = resolveProfileRole(
    auth.user?.profile as Record<string, unknown> | undefined,
  );
  const isTenantMember =
    normalizedRole === "user" || normalizedRole === "tenant_member";

  if (isTenantMember) {
    return (
      <div className="min-h-screen grid place-items-center bg-background text-foreground p-6">
        <div className="max-w-lg w-full rounded-xl border border-border bg-card p-6 space-y-4">
          <h1 className="text-xl font-semibold">
            {t("msg.dev.auth.access_denied_title", "접근 권한이 없습니다.")}
          </h1>
          <p className="text-sm text-muted-foreground">
            {t(
              "msg.dev.auth.access_denied_description",
              "DevFront는 관리자 전용 화면입니다. 권한이 필요하면 관리자에게 요청해 주세요.",
            )}
          </p>
          <button
            type="button"
            className="inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
            onClick={() => {
              auth.removeUser();
              window.location.href = "/login";
            }}
          >
            {t("ui.common.back_to_login", "로그인으로 돌아가기")}
          </button>
        </div>
      </div>
    );
  }

  return <Outlet />;
}