0
# Components
1

2
Components are pluggable extensions in Keycloak that provide various services such as user storage providers, event listeners, password policies, and other system-level functionality. This interface allows for managing these components programmatically.
3

4
## Capabilities
5

6
### Component Management
7

8
Core CRUD operations for managing Keycloak components.
9

10
```typescript { .api }
11
/**
12
 * List components with optional filtering
13
 * @param query - Optional query parameters for filtering components
14
 * @returns Array of component representations
15
 */
16
find(query?: ComponentQuery): Promise<ComponentRepresentation[]>;
17

18
/**
19
 * Create a new component
20
 * @param component - Component representation to create
21
 * @returns Object containing the new component ID
22
 */
23
create(component: ComponentRepresentation): Promise<{ id: string }>;
24

25
/**
26
 * Find a component by ID
27
 * @param params - Parameters containing the component ID
28
 * @returns Component representation or undefined if not found
29
 */
30
findOne(params: { id: string }): Promise<ComponentRepresentation | undefined>;
31

32
/**
33
 * Update a component
34
 * @param query - Parameters containing the component ID
35
 * @param component - Updated component representation
36
 * @returns void
37
 */
38
update(query: { id: string }, component: ComponentRepresentation): Promise<void>;
39

40
/**
41
 * Delete a component
42
 * @param params - Parameters containing the component ID
43
 * @returns void
44
 */
45
del(params: { id: string }): Promise<void>;
46

47
/**
48
 * List sub-component types for a component
49
 * @param params - Parameters containing component ID and type
50
 * @returns Array of component type representations
51
 */
52
listSubComponents(params: { id: string; type: string }): Promise<ComponentTypeRepresentation[]>;
53
```
54

55
## Usage Examples
56

57
```typescript
58
import KeycloakAdminClient from "@keycloak/keycloak-admin-client";
59

60
const kcAdminClient = new KeycloakAdminClient({
61
  baseUrl: 'http://localhost:8080',
62
  realmName: 'myrealm',
63
});
64

65
await kcAdminClient.auth({
66
  username: 'admin',
67
  password: 'admin',
68
  grantType: 'password',
69
  clientId: 'admin-cli',
70
});
71

72
// List all components
73
const components = await kcAdminClient.components.find();
74

75
// Find user storage providers
76
const userStorageProviders = await kcAdminClient.components.find({
77
  type: 'org.keycloak.storage.UserStorageProvider'
78
});
79

80
// Create a custom component (e.g., event listener)
81
const { id } = await kcAdminClient.components.create({
82
  name: 'custom-event-listener',
83
  providerId: 'custom-event-listener-provider',
84
  providerType: 'org.keycloak.events.EventListenerProvider',
85
  config: {
86
    'some-config-key': ['config-value']
87
  }
88
});
89

90
// Update component configuration
91
await kcAdminClient.components.update(
92
  { id },
93
  {
94
    name: 'updated-event-listener',
95
    config: {
96
      'some-config-key': ['updated-value'],
97
      'another-key': ['another-value']
98
    }
99
  }
100
);
101

102
// List sub-component types
103
const subTypes = await kcAdminClient.components.listSubComponents({
104
  id: 'parent-component-id',
105
  type: 'some-component-type'
106
});
107

108
// Delete a component
109
await kcAdminClient.components.del({ id });
110
```
111

112
## Types
113

114
```typescript { .api }
115
interface ComponentQuery {
116
  name?: string;
117
  parent?: string;
118
  type?: string;
119
}
120

121
interface ComponentRepresentation {
122
  id?: string;
123
  name?: string;
124
  providerId?: string;
125
  providerType?: string;
126
  parentId?: string;
127
  subType?: string;
128
  config?: Record<string, string[]>;
129
}
130

131
interface ComponentTypeRepresentation {
132
  id?: string;
133
  helpText?: string;
134
  properties?: ConfigPropertyRepresentation[];
135
}
136

137
interface ConfigPropertyRepresentation {
138
  name?: string;
139
  label?: string;
140
  helpText?: string;
141
  type?: string;
142
  defaultValue?: any;
143
  options?: string[];
144
  secret?: boolean;
145
}
146
```