Move access property to React Router's handle (#19320)

js/apps/admin-ui/src/App.tsx

@@ -62,14 +62,14 @@ type SecuredRouteProps = { route: RouteDef };
 const SecuredRoute = ({ route }: SecuredRouteProps) => {
   const { hasAccess } = useAccess();
   const accessAllowed =
-    route.access instanceof Array
-      ? hasAccess(...route.access)
-      : hasAccess(route.access);
+    route.handle.access instanceof Array
+      ? hasAccess(...route.handle.access)
+      : hasAccess(route.handle.access);
 
   if (accessAllowed)
     return <Suspense fallback={<KeycloakSpinner />}>{route.element}</Suspense>;
 
-  return <ForbiddenSection permissionNeeded={route.access} />;
+  return <ForbiddenSection permissionNeeded={route.handle.access} />;
 };
 
 export const App = ({ keycloak, adminClient }: AdminClientProps) => {

js/apps/admin-ui/src/PageNav.tsx

@@ -30,9 +30,9 @@ const LeftNav = ({ title, path }: LeftNavProps) => {
 
   const accessAllowed =
     route &&
-    (route.access instanceof Array
-      ? hasAccess(...route.access)
-      : hasAccess(route.access));
+    (route.handle.access instanceof Array
+      ? hasAccess(...route.handle.access)
+      : hasAccess(route.handle.access));
 
   if (!accessAllowed) {
     return null;

js/apps/admin-ui/src/authentication/routes/Authentication.tsx

@@ -13,7 +13,9 @@ export const AuthenticationRoute: RouteDef = {
   path: "/:realm/authentication",
   element: <AuthenticationSection />,
   breadcrumb: (t) => t("authentication"),
-  access: ["view-realm", "view-identity-providers", "view-clients"],
+  handle: {
+    access: ["view-realm", "view-identity-providers", "view-clients"],
+  },
 };
 
 export const AuthenticationRouteWithTab: RouteDef = {

js/apps/admin-ui/src/authentication/routes/CreateFlow.tsx

@@ -11,7 +11,9 @@ export const CreateFlowRoute: RouteDef = {
   path: "/:realm/authentication/flows/create",
   element: <CreateFlow />,
   breadcrumb: (t) => t("authentication:createFlow"),
-  access: "manage-authorization",
+  handle: {
+    access: "manage-authorization",
+  },
 };
 
 export const toCreateFlow = (params: CreateFlowParams): Partial<Path> => ({

js/apps/admin-ui/src/authentication/routes/Flow.tsx

@@ -16,7 +16,9 @@ export const FlowRoute: RouteDef = {
   path: "/:realm/authentication/:id/:usedBy",
   element: <FlowDetails />,
   breadcrumb: (t) => t("authentication:flowDetails"),
-  access: "view-authorization",
+  handle: {
+    access: "view-authorization",
+  },
 };
 
 export const FlowWithBuiltInRoute: RouteDef = {

js/apps/admin-ui/src/client-scopes/routes/ClientScope.tsx

@@ -17,7 +17,9 @@ export const ClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/:tab",
   element: <EditClientScope />,
   breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toClientScope = (params: ClientScopeParams): Partial<Path> => {

js/apps/admin-ui/src/client-scopes/routes/ClientScopes.tsx

@@ -11,7 +11,9 @@ export const ClientScopesRoute: RouteDef = {
   path: "/:realm/client-scopes",
   element: <ClientScopesSection />,
   breadcrumb: (t) => t("client-scopes:clientScopeList"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toClientScopes = (params: ClientScopesParams): Partial<Path> => ({

js/apps/admin-ui/src/client-scopes/routes/Mapper.tsx

@@ -15,7 +15,9 @@ export const MapperRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/mappers/:mapperId",
   element: <MappingDetails />,
   breadcrumb: (t) => t("common:mappingDetails"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toMapper = (params: MapperParams): Partial<Path> => ({

js/apps/admin-ui/src/client-scopes/routes/NewClientScope.tsx

@@ -11,7 +11,9 @@ export const NewClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/new",
   element: <CreateClientScope />,
   breadcrumb: (t) => t("client-scopes:createClientScope"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toNewClientScope = (

js/apps/admin-ui/src/clients/routes/AddClient.tsx

@@ -11,7 +11,9 @@ export const AddClientRoute: RouteDef = {
   path: "/:realm/clients/add-client",
   element: <NewClientForm />,
   breadcrumb: (t) => t("clients:createClient"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toAddClient = (params: AddClientParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/AddRegistrationProvider.tsx

@@ -17,7 +17,9 @@ export const AddRegistrationProviderRoute: RouteDef = {
   path: "/:realm/clients/client-registration/:subTab/:providerId",
   element: <DetailProvider />,
   breadcrumb: (t) => t("clients:clientSettings"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const EditRegistrationProviderRoute: RouteDef = {

js/apps/admin-ui/src/clients/routes/AuthenticationTab.tsx

@@ -24,7 +24,9 @@ export const AuthorizationRoute: RouteDef = {
   path: "/:realm/clients/:clientId/authorization/:tab",
   element: <ClientDetails />,
   breadcrumb: (t) => t("clients:clientSettings"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toAuthorizationTab = (

js/apps/admin-ui/src/clients/routes/Client.tsx

@@ -28,7 +28,9 @@ export const ClientRoute: RouteDef = {
   path: "/:realm/clients/:clientId/:tab",
   element: <ClientDetails />,
   breadcrumb: (t) => t("clients:clientSettings"),
-  access: "query-clients",
+  handle: {
+    access: "query-clients",
+  },
 };
 
 export const toClient = (params: ClientParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/ClientRegistration.tsx

@@ -16,7 +16,9 @@ export const ClientRegistrationRoute: RouteDef = {
   path: "/:realm/clients/client-registration/:subTab",
   element: <ClientsSection />,
   breadcrumb: (t) => t("clients:clientRegistration"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toClientRegistration = (

js/apps/admin-ui/src/clients/routes/ClientRole.tsx

@@ -22,7 +22,9 @@ export const ClientRoleRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/:id/:tab" as const,
   element: <RealmRoleTabs />,
   breadcrumb: (t) => t("roles:roleDetails"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 } satisfies RouteDef;
 
 export const toClientRole = (params: ClientRoleParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/ClientScopeTab.tsx

@@ -17,7 +17,9 @@ export const ClientScopesRoute: RouteDef = {
   path: "/:realm/clients/:clientId/clientScopes/:tab",
   element: <ClientDetails />,
   breadcrumb: (t) => t("clients:clientSettings"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toClientScopesTab = (

js/apps/admin-ui/src/clients/routes/Clients.tsx

@@ -19,7 +19,9 @@ export const ClientsRoute: RouteDef = {
   path: "/:realm/clients",
   element: <ClientsSection />,
   breadcrumb: (t) => t("clients:clientList"),
-  access: "query-clients",
+  handle: {
+    access: "query-clients",
+  },
 };
 
 export const ClientsRouteWithTab: RouteDef = {

js/apps/admin-ui/src/clients/routes/CreateInitialAccessToken.tsx

@@ -13,7 +13,9 @@ export const CreateInitialAccessTokenRoute: RouteDef = {
   path: "/:realm/clients/initialAccessToken/create",
   element: <CreateInitialAccessToken />,
   breadcrumb: (t) => t("clients:createToken"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toCreateInitialAccessToken = (

js/apps/admin-ui/src/clients/routes/DedicatedScopeDetails.tsx

@@ -17,7 +17,9 @@ export const DedicatedScopeDetailsRoute: RouteDef = {
   path: "/:realm/clients/:clientId/clientScopes/dedicated",
   element: <DedicatedScopes />,
   breadcrumb: (t) => t("clients:dedicatedScopes"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const DedicatedScopeDetailsWithTabRoute: RouteDef = {

js/apps/admin-ui/src/clients/routes/ImportClient.tsx

@@ -11,7 +11,9 @@ export const ImportClientRoute: RouteDef = {
   path: "/:realm/clients/import-client",
   element: <ImportForm />,
   breadcrumb: (t) => t("clients:importClient"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toImportClient = (params: ImportClientParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/Mapper.tsx

@@ -17,7 +17,9 @@ export const MapperRoute: RouteDef = {
   path: "/:realm/clients/:id/clientScopes/dedicated/mappers/:mapperId",
   element: <MappingDetails />,
   breadcrumb: (t) => t("common:mappingDetails"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toMapper = (params: MapperParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/NewPermission.tsx

@@ -20,7 +20,9 @@ export const NewPermissionRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/permission/new/:permissionType",
   element: <PermissionDetails />,
   breadcrumb: (t) => t("clients:createPermission"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const NewPermissionWithSelectedIdRoute: RouteDef = {

js/apps/admin-ui/src/clients/routes/NewPolicy.tsx

@@ -13,7 +13,9 @@ export const NewPolicyRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/policy/new/:policyType",
   element: <PolicyDetails />,
   breadcrumb: (t) => t("clients:createPolicy"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toCreatePolicy = (params: NewPolicyParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/NewResource.tsx

@@ -11,7 +11,9 @@ export const NewResourceRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/resource/new",
   element: <ResourceDetails />,
   breadcrumb: (t) => t("clients:createResource"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toCreateResource = (params: NewResourceParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/NewRole.tsx

@@ -11,7 +11,9 @@ export const NewRoleRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/new",
   element: <CreateClientRole />,
   breadcrumb: (t) => t("roles:createRole"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toCreateRole = (params: NewRoleParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/NewScope.tsx

@@ -11,7 +11,9 @@ export const NewScopeRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/scope/new",
   element: <ScopeDetails />,
   breadcrumb: (t) => t("clients:createAuthorizationScope"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toNewScope = (params: NewScopeParams): Partial<Path> => ({

js/apps/admin-ui/src/clients/routes/PermissionDetails.tsx

@@ -19,7 +19,9 @@ export const PermissionDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/permission/:permissionType/:permissionId",
   element: <PermissionDetails />,
   breadcrumb: (t) => t("clients:permissionDetails"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toPermissionDetails = (

js/apps/admin-ui/src/clients/routes/PolicyDetails.tsx

@@ -18,7 +18,9 @@ export const PolicyDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/policy/:policyId/:policyType",
   element: <PolicyDetails />,
   breadcrumb: (t) => t("clients:createPolicy"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const toPolicyDetails = (

js/apps/admin-ui/src/clients/routes/Resource.tsx

@@ -15,7 +15,9 @@ export const ResourceDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/resource",
   element: <ResourceDetails />,
   breadcrumb: (t) => t("clients:createResource"),
-  access: "view-clients",
+  handle: {
+    access: "view-clients",
+  },
 };
 
 export const ResourceDetailsWithResourceIdRoute: RouteDef = {

js/apps/admin-ui/src/clients/routes/Scope.tsx

@@ -15,7 +15,9 @@ export const ScopeDetailsRoute: RouteDef = {
   path: "/:realm/clients/:id/authorization/scope",
   element: <ScopeDetails />,
   breadcrumb: (t) => t("clients:createAuthorizationScope"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const ScopeDetailsWithScopeIdRoute: RouteDef = {

js/apps/admin-ui/src/dashboard/routes/Dashboard.tsx

@@ -13,7 +13,9 @@ export const DashboardRoute: RouteDef = {
   path: "/",
   element: <Dashboard />,
   breadcrumb: (t) => t("common:home"),
-  access: "anyone",
+  handle: {
+    access: "anyone",
+  },
 };
 
 export const DashboardRouteWithRealm: RouteDef = {

js/apps/admin-ui/src/events/routes/Events.tsx

@@ -16,7 +16,9 @@ export const EventsRoute: RouteDef = {
   path: "/:realm/events",
   element: <EventsSection />,
   breadcrumb: (t) => t("events:title"),
-  access: "view-events",
+  handle: {
+    access: "view-events",
+  },
 };
 
 export const EventsRouteWithTab: RouteDef = {

js/apps/admin-ui/src/groups/routes/Groups.tsx

@@ -10,7 +10,9 @@ const GroupsSection = lazy(() => import("../GroupsSection"));
 export const GroupsRoute: RouteDef = {
   path: "/:realm/groups/*",
   element: <GroupsSection />,
-  access: "query-groups",
+  handle: {
+    access: "query-groups",
+  },
 };
 
 export const GroupsWithIdRoute: RouteDef = {

js/apps/admin-ui/src/identity-providers/routes/AddMapper.tsx

@@ -15,8 +15,10 @@ const AddMapper = lazy(() => import("../add/AddMapper"));
 export const IdentityProviderAddMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab/create",
   element: <AddMapper />,
-  access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:addIdPMapper"),
+  handle: {
+    access: "manage-identity-providers",
+  },
 };
 
 export const toIdentityProviderAddMapper = (

js/apps/admin-ui/src/identity-providers/routes/EditMapper.tsx

@@ -15,8 +15,10 @@ const AddMapper = lazy(() => import("../add/AddMapper"));
 export const IdentityProviderEditMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/mappers/:id",
   element: <AddMapper />,
-  access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:editIdPMapper"),
+  handle: {
+    access: "manage-identity-providers",
+  },
 };
 
 export const toIdentityProviderEditMapper = (

js/apps/admin-ui/src/identity-providers/routes/IdentityProvider.tsx

@@ -18,7 +18,9 @@ export const IdentityProviderRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab",
   element: <DetailSettings />,
   breadcrumb: (t) => t("identity-providers:providerDetails"),
-  access: "view-identity-providers",
+  handle: {
+    access: "view-identity-providers",
+  },
 };
 
 export const toIdentityProvider = (

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderCreate.tsx

@@ -14,7 +14,9 @@ export const IdentityProviderCreateRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/add",
   element: <AddIdentityProvider />,
   breadcrumb: (t) => t("identity-providers:addProvider"),
-  access: "manage-identity-providers",
+  handle: {
+    access: "manage-identity-providers",
+  },
 };
 
 export const toIdentityProviderCreate = (

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderKeycloakOidc.tsx

@@ -11,7 +11,9 @@ export const IdentityProviderKeycloakOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/keycloak-oidc/add",
   element: <AddOpenIdConnect />,
   breadcrumb: (t) => t("identity-providers:addKeycloakOpenIdProvider"),
-  access: "manage-identity-providers",
+  handle: {
+    access: "manage-identity-providers",
+  },
 };
 
 export const toIdentityProviderKeycloakOidc = (

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderOidc.tsx

@@ -11,7 +11,9 @@ export const IdentityProviderOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/oidc/add",
   element: <AddOpenIdConnect />,
   breadcrumb: (t) => t("identity-providers:addOpenIdProvider"),
-  access: "manage-identity-providers",
+  handle: {
+    access: "manage-identity-providers",
+  },
 };
 
 export const toIdentityProviderOidc = (

js/apps/admin-ui/src/identity-providers/routes/IdentityProviderSaml.tsx

@@ -11,7 +11,9 @@ export const IdentityProviderSamlRoute: RouteDef = {
   path: "/:realm/identity-providers/saml/add",
   element: <AddSamlConnect />,
   breadcrumb: (t) => t("identity-providers:addSamlProvider"),
-  access: "manage-identity-providers",
+  handle: {
+    access: "manage-identity-providers",
+  },
 };
 
 export const toIdentityProviderSaml = (

js/apps/admin-ui/src/identity-providers/routes/IdentityProviders.tsx

@@ -13,7 +13,9 @@ export const IdentityProvidersRoute: RouteDef = {
   path: "/:realm/identity-providers",
   element: <IdentityProvidersSection />,
   breadcrumb: (t) => t("identityProviders"),
-  access: "view-identity-providers",
+  handle: {
+    access: "view-identity-providers",
+  },
 };
 
 export const toIdentityProviders = (

js/apps/admin-ui/src/realm-roles/routes/AddRole.tsx

@@ -11,7 +11,9 @@ export const AddRoleRoute: RouteDef = {
   path: "/:realm/roles/new",
   element: <CreateRealmRole />,
   breadcrumb: (t) => t("roles:createRole"),
-  access: "manage-realm",
+  handle: {
+    access: "manage-realm",
+  },
 };
 
 export const toAddRole = (params: AddRoleParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-roles/routes/RealmRole.tsx

@@ -23,7 +23,9 @@ export const RealmRoleRoute: RouteDef = {
   path: "/:realm/roles/:id/:tab",
   element: <RealmRoleTabs />,
   breadcrumb: (t) => t("roles:roleDetails"),
-  access: ["view-realm", "view-users"],
+  handle: {
+    access: ["view-realm", "view-users"],
+  },
 };
 
 export const toRealmRole = (params: RealmRoleParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-roles/routes/RealmRoles.tsx

@@ -11,7 +11,9 @@ export const RealmRolesRoute: RouteDef = {
   path: "/:realm/roles",
   element: <RealmRolesSection />,
   breadcrumb: (t) => t("roles:realmRolesList"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toRealmRoles = (params: RealmRolesParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/AddAttribute.tsx

@@ -13,7 +13,9 @@ export const AddAttributeRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributes/add-attribute",
   element: <NewAttributeSettings />,
   breadcrumb: (t) => t("realm-settings:createAttribute"),
-  access: "manage-realm",
+  handle: {
+    access: "manage-realm",
+  },
 };
 
 export const toAddAttribute = (params: AddAttributeParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/AddClientPolicy.tsx

@@ -11,7 +11,9 @@ export const AddClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/policies/add-client-policy",
   element: <NewClientPolicyForm />,
   breadcrumb: (t) => t("realm-settings:createPolicy"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toAddClientPolicy = (

js/apps/admin-ui/src/realm-settings/routes/AddClientProfile.tsx

@@ -14,7 +14,9 @@ export const AddClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:tab/add-profile",
   element: <ClientProfileForm />,
   breadcrumb: (t) => t("realm-settings:newClientProfile"),
-  access: "manage-realm",
+  handle: {
+    access: "manage-realm",
+  },
 };
 
 export const toAddClientProfile = (

js/apps/admin-ui/src/realm-settings/routes/AddCondition.tsx

@@ -16,7 +16,9 @@ export const NewClientPolicyConditionRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy/create-condition",
   element: <NewClientPolicyCondition />,
   breadcrumb: (t) => t("realm-settings:addCondition"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toNewClientPolicyCondition = (

js/apps/admin-ui/src/realm-settings/routes/AddExecutor.tsx

@@ -14,7 +14,9 @@ export const AddExecutorRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:profileName/add-executor",
   element: <ExecutorForm />,
   breadcrumb: (t) => t("realm-settings:addExecutor"),
-  access: "manage-realm",
+  handle: {
+    access: "manage-realm",
+  },
 };
 
 export const toAddExecutor = (params: AddExecutorParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/Attribute.tsx

@@ -14,7 +14,9 @@ export const AttributeRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributes/:attributeName/edit-attribute",
   element: <NewAttributeSettings />,
   breadcrumb: (t) => t("realm-settings:editAttribute"),
-  access: "manage-realm",
+  handle: {
+    access: "manage-realm",
+  },
 };
 
 export const toAttribute = (params: AttributeParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/ClientPolicies.tsx

@@ -16,7 +16,9 @@ export const ClientPoliciesRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:tab",
   element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realm-settings:clientPolicies"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toClientPolicies = (

js/apps/admin-ui/src/realm-settings/routes/ClientProfile.tsx

@@ -14,7 +14,9 @@ export const ClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:profileName/edit-profile",
   element: <ClientProfileForm />,
   breadcrumb: (t) => t("realm-settings:clientProfile"),
-  access: ["view-realm", "view-users"],
+  handle: {
+    access: ["view-realm", "view-users"],
+  },
 };
 
 export const toClientProfile = (

js/apps/admin-ui/src/realm-settings/routes/EditAttributesGroup.tsx

@@ -16,7 +16,9 @@ export const EditAttributesGroupRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributesGroup/edit/:name",
   element: <AttributesGroupDetails />,
   breadcrumb: (t) => t("realm-settings:editGroupText"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toEditAttributesGroup = (

js/apps/admin-ui/src/realm-settings/routes/EditClientPolicy.tsx

@@ -13,8 +13,10 @@ const NewClientPolicyForm = lazy(() => import("../NewClientPolicyForm"));
 export const EditClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy",
   element: <NewClientPolicyForm />,
-  access: "manage-realm",
   breadcrumb: (t) => t("realm-settings:policyDetails"),
+  handle: {
+    access: "manage-realm",
+  },
 };
 
 export const toEditClientPolicy = (

js/apps/admin-ui/src/realm-settings/routes/EditCondition.tsx

@@ -17,7 +17,9 @@ export const EditClientPolicyConditionRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:policyName/edit-policy/:conditionName/edit-condition",
   element: <NewClientPolicyCondition />,
   breadcrumb: (t) => t("realm-settings:editCondition"),
-  access: "manage-clients",
+  handle: {
+    access: "manage-clients",
+  },
 };
 
 export const toEditClientPolicyCondition = (

js/apps/admin-ui/src/realm-settings/routes/Executor.tsx

@@ -15,7 +15,9 @@ export const ExecutorRoute: RouteDef = {
   path: "/:realm/realm-settings/client-policies/:profileName/edit-profile/:executorName",
   element: <ExecutorForm />,
   breadcrumb: (t) => t("realm-settings:executorDetails"),
-  access: ["manage-realm"],
+  handle: {
+    access: ["manage-realm"],
+  },
 };
 
 export const toExecutor = (params: ExecutorParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/KeyProvider.tsx

@@ -27,7 +27,9 @@ export const KeyProviderFormRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/providers/:id/:providerType/settings",
   element: <KeyProviderForm />,
   breadcrumb: (t) => t("realm-settings:editProvider"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toKeyProvider = (params: KeyProviderParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/KeysTab.tsx

@@ -16,7 +16,9 @@ export const KeysRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:tab",
   element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realm-settings:keys"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toKeysTab = (params: KeysParams): Partial<Path> => ({

js/apps/admin-ui/src/realm-settings/routes/NewAttributesGroup.tsx

@@ -15,7 +15,9 @@ export const NewAttributesGroupRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/attributesGroup/new",
   element: <AttributesGroupDetails />,
   breadcrumb: (t) => t("realm-settings:createGroupText"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toNewAttributesGroup = (

js/apps/admin-ui/src/realm-settings/routes/RealmSettings.tsx

@@ -29,7 +29,9 @@ export const RealmSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings",
   element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realmSettings"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const RealmSettingsRouteWithTab: RouteDef = {

js/apps/admin-ui/src/realm-settings/routes/UserProfile.tsx

@@ -16,7 +16,9 @@ export const UserProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/user-profile/:tab",
   element: <RealmSettingsSection />,
   breadcrumb: (t) => t("realm-settings:userProfile"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toUserProfile = (params: UserProfileParams): Partial<Path> => ({

js/apps/admin-ui/src/realm/routes/AddRealm.tsx

@@ -11,7 +11,9 @@ export const AddRealmRoute: RouteDef = {
   path: "/:realm/add-realm",
   element: <NewRealmForm />,
   breadcrumb: (t) => t("realm:createRealm"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toAddRealm = (params: AddRealmParams): Partial<Path> => ({

js/apps/admin-ui/src/route-config.tsx

@@ -18,16 +18,22 @@ import sessionRoutes from "./sessions/routes";
 import userFederationRoutes from "./user-federation/routes";
 import userRoutes from "./user/routes";
 
+export type RouteObjectHandle = {
+  access: AccessType | AccessType[];
+};
+
 export type RouteDef = Required<Pick<RouteObject, "element">> & {
   path: string;
   breadcrumb?: (t: TFunction) => string | ComponentType<any>;
-  access: AccessType | AccessType[];
+  handle: RouteObjectHandle;
 };
 
 const NotFoundRoute: RouteDef = {
   path: "*",
   element: <PageNotFoundSection />,
-  access: "anyone",
+  handle: {
+    access: "anyone",
+  },
 };
 
 export const routes: RouteDef[] = [

js/apps/admin-ui/src/sessions/routes/Sessions.tsx

@@ -11,7 +11,9 @@ export const SessionsRoute: RouteDef = {
   path: "/:realm/sessions",
   element: <SessionsSection />,
   breadcrumb: (t) => t("sessions:title"),
-  access: ["view-realm", "view-clients", "view-users"],
+  handle: {
+    access: ["view-realm", "view-clients", "view-users"],
+  },
 };
 
 export const toSessions = (params: SessionsParams): Partial<Path> => ({

js/apps/admin-ui/src/user-federation/routes/CustomUserFederation.tsx

@@ -18,7 +18,9 @@ export const CustomUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/:providerId/:id",
   element: <CustomProviderSettings />,
   breadcrumb: (t) => t("user-federation:providerDetails"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toCustomUserFederation = (

js/apps/admin-ui/src/user-federation/routes/NewCustomUserFederation.tsx

@@ -17,7 +17,9 @@ export const NewCustomUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/:providerId/new",
   element: <CustomProviderSettings />,
   breadcrumb: (t) => t("user-federation:addCustomProvider"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toNewCustomUserFederation = (

js/apps/admin-ui/src/user-federation/routes/NewKerberosUserFederation.tsx

@@ -13,7 +13,9 @@ export const NewKerberosUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/new",
   element: <UserFederationKerberosSettings />,
   breadcrumb: (t) => t("common:settings"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toNewKerberosUserFederation = (

js/apps/admin-ui/src/user-federation/routes/NewLdapUserFederation.tsx

@@ -14,7 +14,9 @@ export const NewLdapUserFederationRoute: RouteDef = {
   element: <CreateUserFederationLdapSettings />,
   breadcrumb: (t) =>
     t("user-federation:addProvider", { provider: "LDAP", count: 1 }),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toNewLdapUserFederation = (

js/apps/admin-ui/src/user-federation/routes/UserFederation.tsx

@@ -11,7 +11,9 @@ export const UserFederationRoute: RouteDef = {
   path: "/:realm/user-federation",
   element: <UserFederationSection />,
   breadcrumb: (t) => t("userFederation"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toUserFederation = (

js/apps/admin-ui/src/user-federation/routes/UserFederationKerberos.tsx

@@ -16,7 +16,9 @@ export const UserFederationKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/:id",
   element: <UserFederationKerberosSettings />,
   breadcrumb: (t) => t("common:settings"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toUserFederationKerberos = (

js/apps/admin-ui/src/user-federation/routes/UserFederationLdap.tsx

@@ -19,7 +19,9 @@ export const UserFederationLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id",
   element: <UserFederationLdapSettings />,
   breadcrumb: (t) => t("common:settings"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const UserFederationLdapWithTabRoute: RouteDef = {

js/apps/admin-ui/src/user-federation/routes/UserFederationLdapMapper.tsx

@@ -17,7 +17,9 @@ export const UserFederationLdapMapperRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id/mappers/:mapperId",
   element: <LdapMapperDetails />,
   breadcrumb: (t) => t("common:mappingDetails"),
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toUserFederationLdapMapper = (

js/apps/admin-ui/src/user-federation/routes/UserFederationsKerberos.tsx

@@ -10,7 +10,9 @@ const UserFederationSection = lazy(() => import("../UserFederationSection"));
 export const UserFederationsKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos",
   element: <UserFederationSection />,
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toUserFederationsKerberos = (

js/apps/admin-ui/src/user-federation/routes/UserFederationsLdap.tsx

@@ -10,7 +10,9 @@ const UserFederationSection = lazy(() => import("../UserFederationSection"));
 export const UserFederationsLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap",
   element: <UserFederationSection />,
-  access: "view-realm",
+  handle: {
+    access: "view-realm",
+  },
 };
 
 export const toUserFederationsLdap = (

js/apps/admin-ui/src/user/routes/AddUser.tsx

@@ -12,7 +12,9 @@ export const AddUserRoute: RouteDef = {
   path: "/:realm/users/add-user",
   element: <CreateUser />,
   breadcrumb: (t) => t("users:createUser"),
-  access: ["query-users", "query-groups"],
+  handle: {
+    access: ["query-users", "query-groups"],
+  },
 };
 
 export const toAddUser = (params: AddUserParams): Partial<Path> => ({

js/apps/admin-ui/src/user/routes/User.tsx

@@ -25,7 +25,9 @@ export const UserRoute: RouteDef = {
   path: "/:realm/users/:id/:tab",
   element: <EditUser />,
   breadcrumb: (t) => t("users:userDetails"),
-  access: "query-users",
+  handle: {
+    access: "query-users",
+  },
 };
 
 export const toUser = (params: UserParams): Partial<Path> => ({

js/apps/admin-ui/src/user/routes/Users.tsx

@@ -13,7 +13,9 @@ export const UsersRoute: RouteDef = {
   path: "/:realm/users",
   element: <UsersSection />,
   breadcrumb: (t) => t("users:title"),
-  access: "query-users",
+  handle: {
+    access: "query-users",
+  },
 };
 
 export const UsersRouteWithTab: RouteDef = {