@asgardeo/react 0.6.31 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under the License is distributed on an
13
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
+ * KIND, either express or implied. See the License for the
15
+ * specific language governing permissions and limitations
16
+ * under the License.
17
+ */
18
+ export { default as AcceptInvite } from './v2/AcceptInvite';
19
+ export type { AcceptInviteProps, AcceptInviteRenderProps } from './v2/AcceptInvite';
20
+ export { default as BaseAcceptInvite } from './v2/BaseAcceptInvite';
21
+ export type { BaseAcceptInviteProps, BaseAcceptInviteRenderProps, AcceptInviteFlowResponse, } from './v2/BaseAcceptInvite';
@@ -0,0 +1,124 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under the License is distributed on an
13
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
+ * KIND, either express or implied. See the License for the
15
+ * specific language governing permissions and limitations
16
+ * under the License.
17
+ */
18
+ import { FC, ReactNode } from 'react';
19
+ import { BaseAcceptInviteRenderProps, AcceptInviteFlowResponse } from './BaseAcceptInvite';
20
+ /**
21
+ * Render props for AcceptInvite (re-exported for convenience).
22
+ */
23
+ export type AcceptInviteRenderProps = BaseAcceptInviteRenderProps;
24
+ /**
25
+ * Props for the AcceptInvite component.
26
+ */
27
+ export interface AcceptInviteProps {
28
+ /**
29
+ * Base URL for the Thunder API server.
30
+ * If not provided, will try to read from window location.
31
+ */
32
+ baseUrl?: string;
33
+ /**
34
+ * Flow ID from the invite link.
35
+ * If not provided, will be extracted from URL query parameters.
36
+ */
37
+ flowId?: string;
38
+ /**
39
+ * Invite token from the invite link.
40
+ * If not provided, will be extracted from URL query parameters.
41
+ */
42
+ inviteToken?: string;
43
+ /**
44
+ * Callback when the flow completes successfully.
45
+ */
46
+ onComplete?: () => void;
47
+ /**
48
+ * Callback when an error occurs.
49
+ */
50
+ onError?: (error: Error) => void;
51
+ /**
52
+ * Callback when the flow state changes.
53
+ */
54
+ onFlowChange?: (response: AcceptInviteFlowResponse) => void;
55
+ /**
56
+ * Callback to navigate to sign in page.
57
+ */
58
+ onGoToSignIn?: () => void;
59
+ /**
60
+ * Custom CSS class name.
61
+ */
62
+ className?: string;
63
+ /**
64
+ * Render props function for custom UI.
65
+ * If not provided, default UI will be rendered by the SDK.
66
+ */
67
+ children?: (props: AcceptInviteRenderProps) => ReactNode;
68
+ /**
69
+ * Size variant for the component.
70
+ */
71
+ size?: 'small' | 'medium' | 'large';
72
+ /**
73
+ * Theme variant for the component card.
74
+ */
75
+ variant?: 'outlined' | 'elevated';
76
+ /**
77
+ * Whether to show the title.
78
+ */
79
+ showTitle?: boolean;
80
+ /**
81
+ * Whether to show the subtitle.
82
+ */
83
+ showSubtitle?: boolean;
84
+ }
85
+ /**
86
+ * AcceptInvite component for end-users to accept an invite and set their password.
87
+ *
88
+ * This component is designed for end users accessing the thunder-gate app via an invite link.
89
+ * It automatically:
90
+ * 1. Extracts flowId and inviteToken from URL query parameters
91
+ * 2. Validates the invite token with the backend
92
+ * 3. Displays the password form if token is valid
93
+ * 4. Completes the accept invite when password is set
94
+ *
95
+ * @example
96
+ * ```tsx
97
+ * import { AcceptInvite } from '@asgardeo/react';
98
+ *
99
+ * // URL: /invite?flowId=xxx&inviteToken=yyy
100
+ *
101
+ * const AcceptInvitePage = () => {
102
+ * return (
103
+ * <AcceptInvite
104
+ * baseUrl="https://api.thunder.io"
105
+ * onComplete={() => navigate('/signin')}
106
+ * onError={(error) => console.error(error)}
107
+ * >
108
+ * {({ values, components, isLoading, isComplete, isValidatingToken, isTokenInvalid, error, handleInputChange, handleSubmit }) => (
109
+ * <div>
110
+ * {isValidatingToken && <p>Validating your invite...</p>}
111
+ * {isTokenInvalid && <p>Invalid or expired invite link</p>}
112
+ * {isComplete && <p>Registration complete! You can now sign in.</p>}
113
+ * {!isComplete && !isValidatingToken && !isTokenInvalid && (
114
+ * // Render password form based on components
115
+ * )}
116
+ * </div>
117
+ * )}
118
+ * </AcceptInvite>
119
+ * );
120
+ * };
121
+ * ```
122
+ */
123
+ declare const AcceptInvite: FC<AcceptInviteProps>;
124
+ export default AcceptInvite;
@@ -0,0 +1,192 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under the License is distributed on an
13
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
+ * KIND, either express or implied. See the License for the
15
+ * specific language governing permissions and limitations
16
+ * under the License.
17
+ */
18
+ import { FC, ReactNode } from 'react';
19
+ import { CardProps } from '../../../../primitives/Card/Card';
20
+ /**
21
+ * Flow response structure from the backend.
22
+ */
23
+ export interface AcceptInviteFlowResponse {
24
+ flowId: string;
25
+ flowStatus: 'INCOMPLETE' | 'COMPLETE' | 'ERROR';
26
+ type?: 'VIEW' | 'REDIRECTION';
27
+ data?: {
28
+ components?: any[];
29
+ meta?: {
30
+ components?: any[];
31
+ };
32
+ additionalData?: Record<string, string>;
33
+ };
34
+ failureReason?: string;
35
+ }
36
+ /**
37
+ * Render props for custom UI rendering of AcceptInvite.
38
+ */
39
+ export interface BaseAcceptInviteRenderProps {
40
+ /**
41
+ * Form values for the current step.
42
+ */
43
+ values: Record<string, string>;
44
+ /**
45
+ * Field validation errors.
46
+ */
47
+ fieldErrors: Record<string, string>;
48
+ /**
49
+ * API error (if any).
50
+ */
51
+ error?: Error | null;
52
+ /**
53
+ * Touched fields.
54
+ */
55
+ touched: Record<string, boolean>;
56
+ /**
57
+ * Loading state.
58
+ */
59
+ isLoading: boolean;
60
+ /**
61
+ * Flow components from the current step.
62
+ */
63
+ components: any[];
64
+ /**
65
+ * Current flow ID from URL.
66
+ */
67
+ flowId?: string;
68
+ /**
69
+ * Invite token from URL.
70
+ */
71
+ inviteToken?: string;
72
+ /**
73
+ * Function to handle input changes.
74
+ */
75
+ handleInputChange: (name: string, value: string) => void;
76
+ /**
77
+ * Function to handle input blur.
78
+ */
79
+ handleInputBlur: (name: string) => void;
80
+ /**
81
+ * Function to handle form submission.
82
+ */
83
+ handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;
84
+ /**
85
+ * Whether the flow has completed successfully.
86
+ */
87
+ isComplete: boolean;
88
+ /**
89
+ * Whether the invite token is being validated.
90
+ */
91
+ isValidatingToken: boolean;
92
+ /**
93
+ * Whether the token validation failed.
94
+ */
95
+ isTokenInvalid: boolean;
96
+ /**
97
+ * Title for the current step.
98
+ */
99
+ title?: string;
100
+ /**
101
+ * Subtitle for the current step.
102
+ */
103
+ subtitle?: string;
104
+ /**
105
+ * Whether the form is valid.
106
+ */
107
+ isValid: boolean;
108
+ /**
109
+ * Navigate to sign in page.
110
+ */
111
+ goToSignIn?: () => void;
112
+ /**
113
+ * Title from the password screen (for use in completion screen).
114
+ */
115
+ completionTitle?: string;
116
+ }
117
+ /**
118
+ * Props for the BaseAcceptInvite component.
119
+ */
120
+ export interface BaseAcceptInviteProps {
121
+ /**
122
+ * Flow ID from the invite link URL.
123
+ */
124
+ flowId?: string;
125
+ /**
126
+ * Invite token from the invite link URL.
127
+ */
128
+ inviteToken?: string;
129
+ /**
130
+ * Callback when the flow completes successfully.
131
+ */
132
+ onComplete?: () => void;
133
+ /**
134
+ * Callback when an error occurs.
135
+ */
136
+ onError?: (error: Error) => void;
137
+ /**
138
+ * Callback when the flow state changes.
139
+ */
140
+ onFlowChange?: (response: AcceptInviteFlowResponse) => void;
141
+ /**
142
+ * Function to submit flow step data.
143
+ * This makes a request to the flow/execute endpoint.
144
+ */
145
+ onSubmit: (payload: Record<string, any>) => Promise<AcceptInviteFlowResponse>;
146
+ /**
147
+ * Callback to navigate to sign in page.
148
+ */
149
+ onGoToSignIn?: () => void;
150
+ /**
151
+ * Custom CSS class name.
152
+ */
153
+ className?: string;
154
+ /**
155
+ * Render props function for custom UI.
156
+ * If not provided, default UI will be rendered.
157
+ */
158
+ children?: (props: BaseAcceptInviteRenderProps) => ReactNode;
159
+ /**
160
+ * Size variant for the component.
161
+ */
162
+ size?: 'small' | 'medium' | 'large';
163
+ /**
164
+ * Theme variant for the component.
165
+ */
166
+ variant?: CardProps['variant'];
167
+ /**
168
+ * Whether to show the title.
169
+ */
170
+ showTitle?: boolean;
171
+ /**
172
+ * Whether to show the subtitle.
173
+ */
174
+ showSubtitle?: boolean;
175
+ }
176
+ /**
177
+ * Base component for accept invite flow (end-user).
178
+ * Handles the flow logic for validating an invite token and setting a password.
179
+ *
180
+ * When no children are provided, renders a default UI with:
181
+ * - Loading spinner during token validation
182
+ * - Error alerts for invalid/expired tokens
183
+ * - Password form with validation
184
+ * - Success state with sign-in redirect
185
+ *
186
+ * Flow steps handled:
187
+ * 1. Validate invite token (automatic on mount)
188
+ * 2. Password input
189
+ * 3. Flow completion
190
+ */
191
+ declare const BaseAcceptInvite: FC<BaseAcceptInviteProps>;
192
+ export default BaseAcceptInvite;
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under an "AS IS" BASIS, WITHOUT WARRANTIES
13
+ * OR CONDITIONS OF ANY KIND, either express or implied. See the
14
+ * License for the specific language governing permissions and
15
+ * limitations under the License.
16
+ */
17
+ import { Theme } from '@asgardeo/browser';
18
+ /**
19
+ * Creates styles for the BaseAcceptInvite component
20
+ * @param theme - The theme object containing design tokens
21
+ * @param colorScheme - The current color scheme (used for memoization)
22
+ * @returns Object containing CSS class names for component styling
23
+ */
24
+ declare const useStyles: (theme: Theme, colorScheme: string) => {
25
+ card: string;
26
+ header: string;
27
+ title: string;
28
+ subtitle: string;
29
+ };
30
+ export default useStyles;
@@ -40,3 +40,15 @@ export declare const renderSignUpComponents: (components: EmbeddedFlowComponent[
40
40
  size?: "small" | "medium" | "large";
41
41
  variant?: any;
42
42
  }) => ReactElement[];
43
+ /**
44
+ * Processes an array of components and renders them as React elements for invite user.
45
+ * This is used by both InviteUser and AcceptInvite components.
46
+ */
47
+ export declare const renderInviteUserComponents: (components: EmbeddedFlowComponent[], formValues: Record<string, string>, touchedFields: Record<string, boolean>, formErrors: Record<string, string>, isLoading: boolean, isFormValid: boolean, onInputChange: (name: string, value: string) => void, options?: {
48
+ buttonClassName?: string;
49
+ inputClassName?: string;
50
+ onInputBlur?: (name: string) => void;
51
+ onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
52
+ size?: "small" | "medium" | "large";
53
+ variant?: any;
54
+ }) => ReactElement[];
@@ -0,0 +1,21 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under the License is distributed on an
13
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
+ * KIND, either express or implied. See the License for the
15
+ * specific language governing permissions and limitations
16
+ * under the License.
17
+ */
18
+ export { default as InviteUser } from './v2/InviteUser';
19
+ export type { InviteUserProps, InviteUserRenderProps } from './v2/InviteUser';
20
+ export { default as BaseInviteUser } from './v2/BaseInviteUser';
21
+ export type { BaseInviteUserProps, BaseInviteUserRenderProps, InviteUserFlowResponse, } from './v2/BaseInviteUser';
@@ -0,0 +1,185 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under the License is distributed on an
13
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
+ * KIND, either express or implied. See the License for the
15
+ * specific language governing permissions and limitations
16
+ * under the License.
17
+ */
18
+ import { FC, ReactNode } from 'react';
19
+ import { CardProps } from '../../../../primitives/Card/Card';
20
+ /**
21
+ * Flow response structure from the backend.
22
+ */
23
+ export interface InviteUserFlowResponse {
24
+ flowId: string;
25
+ flowStatus: 'INCOMPLETE' | 'COMPLETE' | 'ERROR';
26
+ type?: 'VIEW' | 'REDIRECTION';
27
+ data?: {
28
+ components?: any[];
29
+ meta?: {
30
+ components?: any[];
31
+ };
32
+ additionalData?: Record<string, string>;
33
+ };
34
+ failureReason?: string;
35
+ }
36
+ /**
37
+ * Render props for custom UI rendering of InviteUser.
38
+ */
39
+ export interface BaseInviteUserRenderProps {
40
+ /**
41
+ * Form values for the current step.
42
+ */
43
+ values: Record<string, string>;
44
+ /**
45
+ * Field validation errors.
46
+ */
47
+ fieldErrors: Record<string, string>;
48
+ /**
49
+ * API error (if any).
50
+ */
51
+ error?: Error | null;
52
+ /**
53
+ * Touched fields.
54
+ */
55
+ touched: Record<string, boolean>;
56
+ /**
57
+ * Loading state.
58
+ */
59
+ isLoading: boolean;
60
+ /**
61
+ * Flow components from the current step.
62
+ */
63
+ components: any[];
64
+ /**
65
+ * Generated invite link (available after user provisioning).
66
+ */
67
+ inviteLink?: string;
68
+ /**
69
+ * Current flow ID.
70
+ */
71
+ flowId?: string;
72
+ /**
73
+ * Function to handle input changes.
74
+ */
75
+ handleInputChange: (name: string, value: string) => void;
76
+ /**
77
+ * Function to handle input blur.
78
+ */
79
+ handleInputBlur: (name: string) => void;
80
+ /**
81
+ * Function to handle form submission.
82
+ */
83
+ handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;
84
+ /**
85
+ * Whether the invite link has been generated (admin flow complete).
86
+ */
87
+ isInviteGenerated: boolean;
88
+ /**
89
+ * Title for the current step.
90
+ */
91
+ title?: string;
92
+ /**
93
+ * Subtitle for the current step.
94
+ */
95
+ subtitle?: string;
96
+ /**
97
+ * Whether the form is valid.
98
+ */
99
+ isValid: boolean;
100
+ /**
101
+ * Copy invite link to clipboard.
102
+ */
103
+ copyInviteLink: () => Promise<void>;
104
+ /**
105
+ * Whether the invite link was copied.
106
+ */
107
+ inviteLinkCopied: boolean;
108
+ /**
109
+ * Reset the flow to invite another user.
110
+ */
111
+ resetFlow: () => void;
112
+ }
113
+ /**
114
+ * Props for the BaseInviteUser component.
115
+ */
116
+ export interface BaseInviteUserProps {
117
+ /**
118
+ * Callback when the invite link is generated successfully.
119
+ */
120
+ onInviteLinkGenerated?: (inviteLink: string, flowId: string) => void;
121
+ /**
122
+ * Callback when an error occurs.
123
+ */
124
+ onError?: (error: Error) => void;
125
+ /**
126
+ * Callback when the flow state changes.
127
+ */
128
+ onFlowChange?: (response: InviteUserFlowResponse) => void;
129
+ /**
130
+ * Function to initialize the invite user flow.
131
+ * This should make an authenticated request to the flow/execute endpoint.
132
+ */
133
+ onInitialize: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;
134
+ /**
135
+ * Function to submit flow step data.
136
+ * This should make an authenticated request to the flow/execute endpoint.
137
+ */
138
+ onSubmit: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;
139
+ /**
140
+ * Custom CSS class name.
141
+ */
142
+ className?: string;
143
+ /**
144
+ * Render props function for custom UI.
145
+ * If not provided, default UI will be rendered.
146
+ */
147
+ children?: (props: BaseInviteUserRenderProps) => ReactNode;
148
+ /**
149
+ * Whether the SDK is initialized.
150
+ */
151
+ isInitialized?: boolean;
152
+ /**
153
+ * Size variant for the component.
154
+ */
155
+ size?: 'small' | 'medium' | 'large';
156
+ /**
157
+ * Theme variant for the component.
158
+ */
159
+ variant?: CardProps['variant'];
160
+ /**
161
+ * Whether to show the title.
162
+ */
163
+ showTitle?: boolean;
164
+ /**
165
+ * Whether to show the subtitle.
166
+ */
167
+ showSubtitle?: boolean;
168
+ }
169
+ /**
170
+ * Base component for invite user flow.
171
+ * Handles the flow logic for creating a user and generating an invite link.
172
+ *
173
+ * When no children are provided, renders a default UI with:
174
+ * - Loading spinner during initialization
175
+ * - Error alerts for failures
176
+ * - Flow components (user type selection, user details form)
177
+ * - Invite link display with copy functionality
178
+ *
179
+ * Flow steps handled:
180
+ * 1. User type selection (if multiple types available)
181
+ * 2. User details input (username, email)
182
+ * 3. Invite link generation
183
+ */
184
+ declare const BaseInviteUser: FC<BaseInviteUserProps>;
185
+ export default BaseInviteUser;
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
3
+ *
4
+ * WSO2 LLC. licenses this file to you under the Apache License,
5
+ * Version 2.0 (the "License"); you may not use this file except
6
+ * in compliance with the License.
7
+ * You may obtain a copy of the License at
8
+ *
9
+ * http://www.apache.org/licenses/LICENSE-2.0
10
+ *
11
+ * Unless required by applicable law or agreed to in writing,
12
+ * software distributed under an "AS IS" BASIS, WITHOUT WARRANTIES
13
+ * OR CONDITIONS OF ANY KIND, either express or implied. See the
14
+ * License for the specific language governing permissions and
15
+ * limitations under the License.
16
+ */
17
+ import { Theme } from '@asgardeo/browser';
18
+ /**
19
+ * Creates styles for the BaseInviteUser component
20
+ * @param theme - The theme object containing design tokens
21
+ * @param colorScheme - The current color scheme (used for memoization)
22
+ * @returns Object containing CSS class names for component styling
23
+ */
24
+ declare const useStyles: (theme: Theme, colorScheme: string) => {
25
+ card: string;
26
+ header: string;
27
+ title: string;
28
+ subtitle: string;
29
+ };
30
+ export default useStyles;