@aiquants/auth-react-router 0.11.0 → 0.13.0

package/src/admin/server.ts

@@ -1,4 +1,5 @@
 import type { AuthAllowlistEntry, AuthDirectoryMembershipMode, AuthDirectoryStatus, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
+import { data } from "react-router"
 import { type PartialUserAdminLabels, resolveUserAdminLabels } from "./labels"
 
 /**
@@ -194,11 +195,44 @@ export function createInMemoryUserAdminStore(initial?: { users?: AuthUser[]; gro
             throw new Error("This in-memory store has no upstream directory; inject a real store to request a sync.")
         },
         async getDirectoryStatus() {
-            return { isEnabled: false, linkedGroupCount: 0, isStale: false, pausedGroupCount: 0, stalenessThresholdSec: 0, erroredGroupIds: [], pendingRequestCount: 0 }
+            return { isEnabled: false, provider: "", linkedGroupCount: 0, isStale: false, pausedGroupCount: 0, stalenessThresholdSec: 0, erroredGroupIds: [], pendingRequestCount: 0 }
         },
     }
 }
 
+/**
+ * Tells a per-operation authorization denial apart from any other failure, without importing an authz library.
+ * 認可ライブラリを import せずに、操作単位の認可拒否を他の失敗と見分ける判定。
+ *
+ * 特定の実装の例外クラスへ `instanceof` を張ると、そのライブラリに縛られる (`AGENTS.md` の
+ * クロスパッケージ・ハードコード禁止)。`status === 403` は HTTP の共通語彙なので、これだけを見る。
+ *
+ * @param error The thrown value. 送出された値。
+ * @returns True when it carries HTTP 403. HTTP 403 を名乗る場合に true。
+ */
+function isForbidden(error: unknown): boolean {
+    // Response でも素の例外でも `status` は共通語彙である。特定の実装の例外クラスへ
+    // `instanceof` を張ると、そのライブラリに縛られる
+    return typeof error === "object" && error !== null && (error as { status?: unknown }).status === 403
+}
+
+/**
+ * Reads the allowlist kind, refusing anything but the two declared values.
+ * 許可の種別を読み取る処理 (宣言された 2 値以外を拒否する)。
+ *
+ * 指定外を既定値へ倒すと、綴り違い (`Domain`) や欠落が **完全一致の許可** として登録される。
+ * 「ドメイン全体を許可したつもりが 1 アドレスだけだった」は、逆向きより静かに壊れる。
+ *
+ * @param formData Submitted form. 送信されたフォーム。
+ * @returns The declared kind. 宣言された種別。
+ * @throws {Error} When the value is absent or unknown. 未指定・未知の値の場合。
+ */
+function requireAllowlistType(formData: FormData): "email" | "domain" {
+    const raw = String(formData.get("type") ?? "")
+    if (raw === "email" || raw === "domain") return raw
+    throw new Error(`type は "email" または "domain" のいずれかで指定してください (受け取った値: ${JSON.stringify(raw)})`)
+}
+
 /**
  * The CRUD verb an operation performs. Deliberately a plain string union so this package stays
  * independent of any particular authorization library.
@@ -230,6 +264,13 @@ export type UserAdminGuards = {
      * 述語のつもりで `false` を返す実装を書くと素通りするため、返り値型で明示的に禁じる。
      */
     requireAccess: (request: Request, context: { action: UserAdminAccess; intent: string }) => Promise<void> | void
+    /**
+     * Observes a denial that was converted into an in-page error. 画面内エラーへ変換した拒否の観測点。
+     *
+     * 拒否を画面内に返すと、既定のエラー経路が拾っていたログが消える。管理面への総当たりが
+     * 200 番台の列に紛れて見えなくなるため、宿主が記録できる口を開けておく。
+     */
+    onDenied?: (context: { intent: string; actions: readonly UserAdminAccess[]; error: unknown }) => void
 }
 
 /**
@@ -239,29 +280,31 @@ export type UserAdminGuards = {
  * 割当の付与・解除は行の追加・削除であるため、認可管理 UI (`/authz`) の
  * `assignUserRole` = create / `removeUserRole` = delete と同じ粒度に揃える。
  */
-const INTENT_ACCESS = new Map<string, UserAdminAccess>([
-    ["createUser", "create"],
-    ["updateUser", "update"],
-    ["toggleUserActive", "update"],
-    ["createGroup", "create"],
-    ["updateGroup", "update"],
-    ["deleteGroup", "delete"],
-    ["addGroupMember", "create"],
-    ["removeGroupMember", "delete"],
-    ["addAllowlistEntry", "create"],
-    ["removeAllowlistEntry", "delete"],
-    ["addAllowlistGroup", "create"],
-    ["removeAllowlistGroup", "delete"],
-    // 連携の開始・解除は行の追加削除ではなく、既存グループの属性変更である。create / delete に
-    // 寄せると、グループ本体を作れない権限でリンクだけ張れてしまう
-    ["linkDirectoryGroup", "update"],
-    ["unlinkDirectoryGroup", "update"],
-    ["setDirectorySyncEnabled", "update"],
+const INTENT_ACCESS = new Map<string, readonly UserAdminAccess[]>([
+    ["createUser", ["create"]],
+    ["updateUser", ["update"]],
+    ["toggleUserActive", ["update"]],
+    ["createGroup", ["create"]],
+    ["updateGroup", ["update"]],
+    ["deleteGroup", ["delete"]],
+    ["addGroupMember", ["create"]],
+    ["removeGroupMember", ["delete"]],
+    ["addAllowlistEntry", ["create"]],
+    ["removeAllowlistEntry", ["delete"]],
+    ["addAllowlistGroup", ["create"]],
+    ["removeAllowlistGroup", ["delete"]],
+    // 連携の開始は、以後の所属の **追加と削除の両方** を上流へ委ねる行為である。所属を足せる
+    // だけの主体が「足すことも消すこともできる仕掛け」を据えられてはならない。属性変更でもある
+    // ため update も要る
+    ["linkDirectoryGroup", ["update", "create", "delete"]],
+    // 解除は台帳とグループ単位のサインイン許可を **消す**。属性を戻すだけではないので、
+    // 削除権限を持たない主体には許さない
+    ["unlinkDirectoryGroup", ["update", "delete"]],
+    ["setDirectorySyncEnabled", ["update"]],
     // 書き込みを伴わないが update を要求する。読取権限だけの主体が上流問い合わせを誘発できると、
     // レート制限を外部から枯渇させられる
-    ["requestDirectorySync", "update"],
+    ["requestDirectorySync", ["update"]],
 ])
-
 /**
  * Neutral per-resource permission summary the admin shell renders in its header badge.
  * 管理シェルのヘッダーバッジが描画する、リソース単位の中立な権限サマリ。
@@ -419,14 +462,41 @@ export function createUserAdminApp(config: UserAdminAppConfig) {
         const access = INTENT_ACCESS.get(intent)
         if (!access) return { ok: false, error: `Unknown intent: ${intent}` }
 
-        // 操作ごとの CRUD 種別でガードする (削除は delete 権限が要る)
-        await config.guards.requireAccess(request, { action: access, intent })
+        /** 403 かどうか。Response でも素の例外でも `status` は共通語彙である。 */
+        const isDenied = (error: unknown) => isForbidden(error)
+        /**
+         * Turns a denial into an in-page error without leaking the guard's own message.
+         * 拒否を、ガードの内部文言を漏らさずに画面内エラーへ変える処理。
+         */
+        const denied = (error: unknown) => {
+            try {
+                config.guards.onDenied?.({ intent, actions: access, error })
+            } catch {
+                // 記録に失敗しても拒否の応答は返す。ログの都合で操作の結果が変わってはならない
+            }
+            // 監視から消えないよう、状態は 403 のまま返す。画面は data() なので生き残る
+            return data({ ok: false, error: labels.errors.forbidden }, { status: 403 })
+        }
+
+        // 操作ごとの CRUD 種別でガードする。複数を要求する intent は **すべて** 通ること
+        try {
+            for (const action of access) await config.guards.requireAccess(request, { action, intent })
+        } catch (error) {
+            // 403 は「この操作だけができない」であり、画面ごと落とすと **他の操作まで巻き添え** に
+            // なる (閲覧と作成はできるのに削除だけ拒否された、で一覧が消える)。401 や再認証の
+            // リダイレクト、それ以外の障害はそのまま伝播させる — 握り潰すとログインし直せない
+            if (!isDenied(error)) throw error
+            return denied(error)
+        }
 
         try {
             return await dispatch(intent, formData)
         } catch (error) {
+            // ガードの後 (ストアの中) で投げられた拒否も同じ扱いにする。ここを素通りさせると、
+            // 拒否理由がそのまま利用者へ渡り、しかも HTTP は 200 になって監視から消える
+            if (isDenied(error)) return denied(error)
             // ガード拒否 (Response/redirect) はそのまま伝播させる。ストア由来の業務エラーだけ
-            // {ok:false,error} に写して UI へ届ける (ロックアウト理由・重複パターン等)。
+            // {ok:false,error} に写して UI へ届ける (ロックアウト理由・重複パターン等)
             if (error instanceof Response) throw error
             return { ok: false, error: error instanceof Error ? error.message : String(error) }
         }
@@ -478,7 +548,7 @@ export function createUserAdminApp(config: UserAdminAppConfig) {
         }
 
         if (intent === "addAllowlistEntry") {
-            const type: "email" | "domain" = formData.get("type") === "domain" ? "domain" : "email"
+            const type = requireAllowlistType(formData)
             await config.store.addAllowlistEntry({ pattern: requireText(formData, "pattern"), type, description: optionalText(formData, "description") })
             return { ok: true }
         }

package/src/admin/ui.tsx

@@ -1,5 +1,7 @@
+import type { AuthDirectoryStatus, AuthGroup } from "@aiquants/auth-core"
 import type React from "react"
 import { Link, useLoaderData } from "react-router"
+import { fill, formatDateTime } from "./format"
 import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
 import type { UserAdminPermission } from "./server"
 
@@ -34,12 +36,66 @@ function GroupPill({ label, summary }: { label: string; summary: { text: string;
     )
 }
 
+/**
+ * Warns when synchronization is not actually keeping the mirror fresh.
+ * 同期が実際には鏡を新しく保てていないことを警告する部品。
+ *
+ * 同期の停止は「上流から外れた人がテナントに居続ける」というセキュリティ事象である。件数と
+ * エラー数だけを見ると何も起きていないように読めるため、**滞留・全停止・未結線の 3 つを
+ * それぞれ名指しで** 出す。出さなければ、状態を計算している意味がない。
+ *
+ * どのタブに居ても見えるようにシェル側で描く。ディレクトリの停止はグループ一覧を見ている
+ * ときだけ起きる事象ではない。
+ */
+function DirectorySyncBanner({ status, labels, groups }: { status?: AuthDirectoryStatus; labels: UserAdminLabels; groups: AuthGroup[] }) {
+    if (!status || status.linkedGroupCount === 0) return null
+    const L = labels.directoryView
+    const warnings: Array<{ id: string; text: string }> = []
+    if (!status.isEnabled) warnings.push({ id: "disabled", text: L.disabledWarning })
+    if (status.pausedGroupCount > 0) warnings.push({ id: "paused", text: fill(L.pausedTemplate, { paused: status.pausedGroupCount, total: status.linkedGroupCount }) })
+    if (status.isStale) {
+        const at = status.oldestSyncedAt ? formatDateTime(status.oldestSyncedAt, labels) : L.neverSynced
+        warnings.push({ id: "stale", text: `${L.staleWarning} ${fill(L.oldestSyncedTemplate, { at })}` })
+    }
+    if (status.erroredGroupIds.length > 0) {
+        // ID を並べても運用者には何のグループか判らない。名前と、あれば実際の失敗理由を出す
+        const described = status.erroredGroupIds.map((id) => {
+            const group = groups.find((g) => g.id === id)
+            if (!group) return fill(labels.common.idTemplate, { id })
+            const reason = group.externalLink?.syncError
+            return reason ? fill(L.erroredItemTemplate, { group: group.name, reason }) : group.name
+        })
+        warnings.push({ id: "errored", text: fill(L.erroredTemplate, { groups: described.join(L.listSeparator) }) })
+    }
+    if (status.pendingRequestCount > 0) warnings.push({ id: "pending", text: fill(L.pendingTemplate, { count: status.pendingRequestCount }) })
+    if (warnings.length === 0) return null
+    return (
+        // ライブリージョンにはしない。初期描画から在る内容は読み上げられず、見出しも読み順も
+        // 失われる。**読める本文** として置き、見出しから辿れるようにする
+        <section
+            aria-labelledby="directory-sync-heading"
+            data-testid="directory-sync-banner"
+            style={{ display: "flex", flexDirection: "column", gap: "0.35rem", padding: "0.7rem 1rem", marginBottom: "1rem", borderRadius: "6px", border: "1px solid #fde68a", backgroundColor: "#fffbeb", color: "#92400e", fontSize: "0.85rem" }}>
+            <h2 id="directory-sync-heading" style={{ margin: 0, fontSize: "0.9rem", fontWeight: 700 }}>
+                {L.title}
+            </h2>
+            {warnings.map((w) => (
+                <span key={w.id} data-directory-warning={w.id}>
+                    {w.text}
+                </span>
+            ))}
+        </section>
+    )
+}
+
 /**
  * Shell layout for user administration pages with header annotation delegation.
  * ヘッダー注釈委譲を備えたユーザー管理ページのシェルレイアウト。
  */
 export function UserAdminShell({ children, renderHeader }: UserAdminShellProps) {
-    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels; myPermissions?: Record<string, UserAdminPermission | undefined> | null; resourceLabels?: Record<string, string> } | undefined
+    // ⚠️ ここは `UserAdminLoaderData` と違い **すべて任意** で受ける。シェルは loader を持たない
+    // 呼び出し (エラー境界の外側、テスト、部分描画) からも描かれるため、欠落を落ちる理由にしない
+    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels; myPermissions?: Record<string, UserAdminPermission | undefined> | null; resourceLabels?: Record<string, string>; directoryStatus?: AuthDirectoryStatus; groups?: AuthGroup[] } | undefined
     const segment = data?.segment ?? "users"
     const labels = data?.labels ?? defaultUserAdminLabels
     // null = 未結線または取得失敗。空 {} も「分からない」扱いで、いずれも許可として描画しない
@@ -54,6 +110,14 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
         { key: "group_members", label: labels.tabs.groupMembers, href: "/users/group_members" },
         { key: "allowlist", label: labels.tabs.allowlist, href: "/users/allowlist" },
     ]
+    // 未結線でも **連携が残っていれば** 出す。停止を警告した直後に、解除や再開ができる唯一の
+    // 面だけが消えるのは最悪の挙動である。連携も結線も無い配備でだけ隠す。
+    // 判定は状態の件数と一覧の実体の **両方** を見る — 片方だけだと、件数が 0 なのに
+    // 「上流が所有」と描かれるグループが取り残される
+    const hasLinkedGroup = (data?.groups ?? []).some((g) => g.externalLink)
+    if (data?.directoryStatus?.isEnabled || (data?.directoryStatus?.linkedGroupCount ?? 0) > 0 || hasLinkedGroup) {
+        tabs.push({ key: "directory", label: labels.tabs.directory, href: "/users/directory" })
+    }
 
     const permEntries = Object.entries(myPermissions ?? {})
 
@@ -66,21 +130,21 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
      */
     const getSummary = (perm: UserAdminPermission | undefined) => {
         if (perm?.canWrite) {
-            return { text: "編集可", color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
+            return { text: labels.permissions.canWrite, color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
         }
         if (perm?.canRead) {
-            return { text: "閲覧のみ", color: "#1d4ed8", bgColor: "#eff6ff", borderColor: "#bfdbfe" }
+            return { text: labels.permissions.canRead, color: "#1d4ed8", bgColor: "#eff6ff", borderColor: "#bfdbfe" }
         }
-        return { text: "権限なし", color: "#64748b", bgColor: "#f1f5f9", borderColor: "#cbd5e1" }
+        return { text: labels.permissions.none, color: "#475569", bgColor: "#f1f5f9", borderColor: "#cbd5e1" }
     }
-    const unavailableSummary = { text: "権限不明", color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
+    const unavailableSummary = { text: labels.permissions.unknown, color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
 
     const annotation = (
         <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }} data-testid="user-admin-header-annotation">
             <span style={{ fontSize: "0.75rem", backgroundColor: "#e0f2fe", color: "#0369a1", padding: "2px 8px", borderRadius: "12px", fontWeight: 600 }}>{labels.heading}</span>
 
             <div style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", fontSize: "0.68rem", color: "#475569" }} data-testid="user-admin-permissions-badge">
-                <span style={{ fontWeight: 600, color: "#334155" }}>あなたの権限:</span>
+                <span style={{ fontWeight: 600, color: "#334155" }}>{labels.permissions.label}</span>
                 <span style={{ display: "inline-flex", alignItems: "center", gap: "0.18rem" }}>
                     {permEntries.length === 0 ? (
                         <span data-testid="user-admin-permission-unavailable">
@@ -105,7 +169,7 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
                 </div>
             )}
 
-            <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1.2rem", borderBottom: "2px solid #e2e8f0", paddingBottom: "0.5rem" }}>
+            <nav aria-label={labels.title} style={{ display: "flex", gap: "0.5rem", marginBottom: "1.2rem", borderBottom: "2px solid #e2e8f0", paddingBottom: "0.5rem" }}>
                 {tabs.map((tab) => {
                     const isActive = segment === tab.key
                     return (
@@ -113,6 +177,7 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
                             key={tab.key}
                             to={tab.href}
                             data-testid={`user-admin-tab-${tab.key}`}
+                            aria-current={isActive ? "page" : undefined}
                             style={{
                                 padding: "0.5rem 1rem",
                                 borderRadius: "6px 6px 0 0",
@@ -128,7 +193,9 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
                         </Link>
                     )
                 })}
-            </div>
+            </nav>
+
+            <DirectorySyncBanner status={data?.directoryStatus} labels={labels} groups={data?.groups ?? []} />
 
             <main>{children}</main>
         </div>