@asgardeo/react 0.11.3 → 0.13.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.
- package/dist/api/createOrganization.d.ts +5 -1
- package/dist/api/getAllOrganizations.d.ts +5 -1
- package/dist/api/getMeOrganizations.d.ts +5 -1
- package/dist/api/getOrganization.d.ts +5 -1
- package/dist/api/getSchemas.d.ts +5 -1
- package/dist/api/getScim2Me.d.ts +5 -1
- package/dist/api/updateMeProfile.d.ts +5 -1
- package/dist/api/updateOrganization.d.ts +5 -1
- package/dist/cjs/index.js +2257 -1742
- package/dist/cjs/index.js.map +4 -4
- package/dist/components/actions/SignInButton/BaseSignInButton.d.ts +5 -1
- package/dist/components/actions/SignOutButton/BaseSignOutButton.d.ts +5 -1
- package/dist/components/actions/SignUpButton/BaseSignUpButton.d.ts +5 -1
- package/dist/components/auth/Callback/Callback.d.ts +51 -0
- package/dist/components/presentation/UserDropdown/UserDropdown.d.ts +3 -0
- package/dist/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.d.ts +6 -0
- package/dist/components/presentation/auth/InviteUser/v2/BaseInviteUser.d.ts +5 -0
- package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts +5 -1
- package/dist/components/presentation/auth/SignIn/v2/SignIn.d.ts +5 -1
- package/dist/contexts/Asgardeo/AsgardeoContext.d.ts +10 -1
- package/dist/contexts/FlowMeta/FlowMetaContext.d.ts +39 -0
- package/dist/contexts/FlowMeta/FlowMetaProvider.d.ts +50 -0
- package/dist/contexts/FlowMeta/useFlowMeta.d.ts +20 -0
- package/dist/contexts/Theme/ThemeProvider.d.ts +36 -39
- package/dist/contexts/Theme/v1/ThemeProvider.d.ts +88 -0
- package/dist/contexts/Theme/v2/ThemeProvider.d.ts +57 -0
- package/dist/hooks/useBrowserUrl.d.ts +8 -0
- package/dist/hooks/v2/useOAuthCallback.d.ts +82 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1666 -1149
- package/dist/index.js.map +4 -4
- package/dist/utils/applyThemeToDOM.d.ts +24 -0
- package/dist/utils/normalizeThemeConfig.d.ts +30 -0
- package/dist/utils/oauth.d.ts +24 -0
- package/dist/utils/v2/buildThemeConfigFromFlowMeta.d.ts +33 -0
- package/package.json +4 -4
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import { WithPreferences } from '@asgardeo/browser';
|
|
18
|
+
import { FlowMetadataResponse, WithPreferences } from '@asgardeo/browser';
|
|
19
19
|
import { ButtonHTMLAttributes, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
|
|
20
20
|
/**
|
|
21
21
|
* Common props shared by all {@link BaseSignInButton} components.
|
|
@@ -25,6 +25,10 @@ export interface CommonBaseSignInButtonProps {
|
|
|
25
25
|
* Loading state during sign-in process
|
|
26
26
|
*/
|
|
27
27
|
isLoading?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
30
|
+
*/
|
|
31
|
+
meta?: FlowMetadataResponse | null;
|
|
28
32
|
/**
|
|
29
33
|
* Function to initiate the sign-in process
|
|
30
34
|
*/
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import { WithPreferences } from '@asgardeo/browser';
|
|
18
|
+
import { FlowMetadataResponse, WithPreferences } from '@asgardeo/browser';
|
|
19
19
|
import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
|
|
20
20
|
/**
|
|
21
21
|
* Common props shared by all {@link BaseSignOutButton} components.
|
|
@@ -25,6 +25,10 @@ export interface CommonBaseSignOutButtonProps {
|
|
|
25
25
|
* Loading state during sign-out process
|
|
26
26
|
*/
|
|
27
27
|
isLoading?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
30
|
+
*/
|
|
31
|
+
meta?: FlowMetadataResponse | null;
|
|
28
32
|
/**
|
|
29
33
|
* Function to initiate the sign-out process
|
|
30
34
|
*/
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import { WithPreferences } from '@asgardeo/browser';
|
|
18
|
+
import { FlowMetadataResponse, WithPreferences } from '@asgardeo/browser';
|
|
19
19
|
import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
|
|
20
20
|
/**
|
|
21
21
|
* Common props shared by all {@link BaseSignUpButton} components.
|
|
@@ -25,6 +25,10 @@ export interface CommonBaseSignUpButtonProps {
|
|
|
25
25
|
* Loading state during sign-up process
|
|
26
26
|
*/
|
|
27
27
|
isLoading?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
30
|
+
*/
|
|
31
|
+
meta?: FlowMetadataResponse | null;
|
|
28
32
|
/**
|
|
29
33
|
* Function to initiate the sign-up process
|
|
30
34
|
*/
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, 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 } from 'react';
|
|
19
|
+
/**
|
|
20
|
+
* Props for Callback component
|
|
21
|
+
*/
|
|
22
|
+
export interface CallbackProps {
|
|
23
|
+
/**
|
|
24
|
+
* Callback function called when an error occurs
|
|
25
|
+
*/
|
|
26
|
+
onError?: (error: Error) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Function to navigate to a different path.
|
|
29
|
+
* If not provided, falls back to the browser navigate utility (SPA navigation via History API for same-origin paths).
|
|
30
|
+
* Provide this prop to enable framework-specific navigation (e.g., from React Router).
|
|
31
|
+
*/
|
|
32
|
+
onNavigate?: (path: string) => void;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* BaseCallback is a headless component that handles OAuth callback parameter forwarding.
|
|
36
|
+
* This component extracts OAuth parameters (code, state, error) from the URL and forwards them
|
|
37
|
+
* to the original component that initiated the OAuth flow.
|
|
38
|
+
*
|
|
39
|
+
* Works standalone using the browser navigate utility (History API) for navigation by default.
|
|
40
|
+
* Pass an onNavigate prop to enable framework-specific navigation (e.g., via React Router).
|
|
41
|
+
*
|
|
42
|
+
* Flow: Extract OAuth parameters from URL -> Parse state parameter -> Redirect to original path with parameters
|
|
43
|
+
*
|
|
44
|
+
* The original component (SignIn/AcceptInvite) is responsible for:
|
|
45
|
+
* - Processing the OAuth code via the SDK
|
|
46
|
+
* - Calling /flow/execute
|
|
47
|
+
* - Handling the assertion and auth/callback POST
|
|
48
|
+
* - Managing the authenticated session
|
|
49
|
+
*/
|
|
50
|
+
export declare const Callback: FC<CallbackProps>;
|
|
51
|
+
export default Callback;
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
+
import { FlowMetadataResponse } from '@asgardeo/browser';
|
|
18
19
|
import { FC, ReactNode } from 'react';
|
|
19
20
|
import { BaseUserDropdownProps } from './BaseUserDropdown';
|
|
20
21
|
/**
|
|
@@ -27,6 +28,8 @@ export interface UserDropdownRenderProps {
|
|
|
27
28
|
isLoading: boolean;
|
|
28
29
|
/** Whether the profile dialog is currently open */
|
|
29
30
|
isProfileOpen: boolean;
|
|
31
|
+
/** Flow metadata returned by the platform (v2 only). `null` while loading or unavailable. */
|
|
32
|
+
meta: FlowMetadataResponse | null;
|
|
30
33
|
/** Function to open the user profile dialog */
|
|
31
34
|
openProfile: () => void;
|
|
32
35
|
/** Function to sign out the user */
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
+
import { FlowMetadataResponse } from '@asgardeo/browser';
|
|
18
19
|
import { FC, ReactNode } from 'react';
|
|
19
20
|
import { CardProps } from '../../../../primitives/Card/Card';
|
|
20
21
|
/**
|
|
@@ -27,6 +28,7 @@ export interface AcceptInviteFlowResponse {
|
|
|
27
28
|
meta?: {
|
|
28
29
|
components?: any[];
|
|
29
30
|
};
|
|
31
|
+
redirectURL?: string;
|
|
30
32
|
};
|
|
31
33
|
failureReason?: string;
|
|
32
34
|
flowId: string;
|
|
@@ -97,6 +99,10 @@ export interface BaseAcceptInviteRenderProps {
|
|
|
97
99
|
* Whether the invite token is being validated.
|
|
98
100
|
*/
|
|
99
101
|
isValidatingToken: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
104
|
+
*/
|
|
105
|
+
meta: FlowMetadataResponse | null;
|
|
100
106
|
/**
|
|
101
107
|
* Subtitle for the current step.
|
|
102
108
|
*/
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
+
import { FlowMetadataResponse } from '@asgardeo/browser';
|
|
18
19
|
import { FC, ReactNode } from 'react';
|
|
19
20
|
import { CardProps } from '../../../../primitives/Card/Card';
|
|
20
21
|
/**
|
|
@@ -89,6 +90,10 @@ export interface BaseInviteUserRenderProps {
|
|
|
89
90
|
* Whether the form is valid.
|
|
90
91
|
*/
|
|
91
92
|
isValid: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
95
|
+
*/
|
|
96
|
+
meta: FlowMetadataResponse | null;
|
|
92
97
|
/**
|
|
93
98
|
* Reset the flow to invite another user.
|
|
94
99
|
*/
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent } from '@asgardeo/browser';
|
|
18
|
+
import { EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, EmbeddedFlowComponentV2 as EmbeddedFlowComponent, FlowMetadataResponse } from '@asgardeo/browser';
|
|
19
19
|
import { FC, ReactNode } from 'react';
|
|
20
20
|
import { CardProps } from '../../../../primitives/Card/Card';
|
|
21
21
|
/**
|
|
@@ -57,6 +57,10 @@ export interface BaseSignInRenderProps {
|
|
|
57
57
|
message: string;
|
|
58
58
|
type: string;
|
|
59
59
|
}>;
|
|
60
|
+
/**
|
|
61
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
62
|
+
*/
|
|
63
|
+
meta: FlowMetadataResponse | null;
|
|
60
64
|
/**
|
|
61
65
|
* Flow subtitle
|
|
62
66
|
*/
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2 } from '@asgardeo/browser';
|
|
18
|
+
import { EmbeddedFlowComponentV2 as EmbeddedFlowComponent, EmbeddedSignInFlowRequestV2, FlowMetadataResponse } from '@asgardeo/browser';
|
|
19
19
|
import { FC, ReactNode } from 'react';
|
|
20
20
|
import { BaseSignInProps } from './BaseSignIn';
|
|
21
21
|
/**
|
|
@@ -42,6 +42,10 @@ export interface SignInRenderProps {
|
|
|
42
42
|
* Loading state indicator
|
|
43
43
|
*/
|
|
44
44
|
isLoading: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.
|
|
47
|
+
*/
|
|
48
|
+
meta: FlowMetadataResponse | null;
|
|
45
49
|
/**
|
|
46
50
|
* Function to submit authentication data (primary)
|
|
47
51
|
*/
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import { HttpRequestConfig, HttpResponse, IdToken, Organization, SignInOptions, TokenExchangeRequestConfig, TokenResponse } from '@asgardeo/browser';
|
|
18
|
+
import { FlowMetadataResponse, HttpRequestConfig, HttpResponse, IdToken, Organization, SignInOptions, TokenExchangeRequestConfig, TokenResponse } from '@asgardeo/browser';
|
|
19
19
|
import { Context } from 'react';
|
|
20
20
|
import AsgardeoReactClient from '../../AsgardeoReactClient';
|
|
21
21
|
import { AsgardeoReactConfig } from '../../models/config';
|
|
@@ -73,6 +73,10 @@ export type AsgardeoContextProps = {
|
|
|
73
73
|
*/
|
|
74
74
|
requestAll: (requestConfigs?: HttpRequestConfig[]) => Promise<HttpResponse<any>[]>;
|
|
75
75
|
};
|
|
76
|
+
/**
|
|
77
|
+
* Instance ID for multi-instance support.
|
|
78
|
+
*/
|
|
79
|
+
instanceId: number;
|
|
76
80
|
isInitialized: boolean;
|
|
77
81
|
/**
|
|
78
82
|
* Flag indicating whether the SDK is working in the background.
|
|
@@ -82,6 +86,11 @@ export type AsgardeoContextProps = {
|
|
|
82
86
|
* Flag indicating whether the user is signed in or not.
|
|
83
87
|
*/
|
|
84
88
|
isSignedIn: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Flow metadata returned by `GET /flow/meta` (v2 platform only).
|
|
91
|
+
* `null` while loading or when `resolveFromMeta` is disabled.
|
|
92
|
+
*/
|
|
93
|
+
meta: FlowMetadataResponse | null;
|
|
85
94
|
organization: Organization;
|
|
86
95
|
organizationHandle: string | undefined;
|
|
87
96
|
/**
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, 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 { FlowMetadataResponse } from '@asgardeo/browser';
|
|
19
|
+
import { Context } from 'react';
|
|
20
|
+
export interface FlowMetaContextValue {
|
|
21
|
+
/**
|
|
22
|
+
* Error from the flow meta fetch, if any
|
|
23
|
+
*/
|
|
24
|
+
error: Error | null;
|
|
25
|
+
/**
|
|
26
|
+
* Manually re-fetch flow metadata
|
|
27
|
+
*/
|
|
28
|
+
fetchFlowMeta: () => Promise<void>;
|
|
29
|
+
/**
|
|
30
|
+
* Whether flow metadata is currently being fetched
|
|
31
|
+
*/
|
|
32
|
+
isLoading: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* The fetched flow metadata response, or null while loading / on error
|
|
35
|
+
*/
|
|
36
|
+
meta: FlowMetadataResponse | null;
|
|
37
|
+
}
|
|
38
|
+
declare const FlowMetaContext: Context<FlowMetaContextValue | null>;
|
|
39
|
+
export default FlowMetaContext;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, 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, PropsWithChildren } from 'react';
|
|
19
|
+
export interface FlowMetaProviderProps {
|
|
20
|
+
/**
|
|
21
|
+
* When false the provider skips fetching and provides null meta.
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
enabled?: boolean;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* FlowMetaProvider fetches flow metadata from the `GET /flow/meta` endpoint
|
|
28
|
+
* (v2 API) and makes it available to child components through `FlowMetaContext`.
|
|
29
|
+
*
|
|
30
|
+
* It is designed to be used in v2 embedded-flow scenarios and integrates with
|
|
31
|
+
* `ThemeProvider` so that theme settings (colors, direction, typography, …)
|
|
32
|
+
* from the server-side design configuration are applied automatically.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <FlowMetaProvider
|
|
37
|
+
* config={{
|
|
38
|
+
* baseUrl: 'https://localhost:8090',
|
|
39
|
+
* type: FlowMetaType.App,
|
|
40
|
+
* id: 'your-app-id',
|
|
41
|
+
* }}
|
|
42
|
+
* >
|
|
43
|
+
* <ThemeProvider>
|
|
44
|
+
* <App />
|
|
45
|
+
* </ThemeProvider>
|
|
46
|
+
* </FlowMetaProvider>
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
declare const FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>>;
|
|
50
|
+
export default FlowMetaProvider;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, 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 { FlowMetaContextValue } from './FlowMetaContext';
|
|
19
|
+
declare const useFlowMeta: () => FlowMetaContextValue;
|
|
20
|
+
export default useFlowMeta;
|
|
@@ -15,71 +15,68 @@
|
|
|
15
15
|
* specific language governing permissions and limitations
|
|
16
16
|
* under the License.
|
|
17
17
|
*/
|
|
18
|
-
import {
|
|
18
|
+
import { BrowserThemeDetection, RecursivePartial, ThemeConfig, ThemeMode, ThemePreferences } from '@asgardeo/browser';
|
|
19
19
|
import { FC, PropsWithChildren } from 'react';
|
|
20
20
|
export interface ThemeProviderProps {
|
|
21
21
|
/**
|
|
22
|
-
* Configuration for theme detection when using 'class' or 'system' mode
|
|
22
|
+
* Configuration for theme detection when using 'class' or 'system' mode.
|
|
23
23
|
*/
|
|
24
24
|
detection?: BrowserThemeDetection;
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Whether to inherit the theme from the Asgardeo branding preference.
|
|
27
|
+
* @default true
|
|
27
28
|
*/
|
|
28
29
|
inheritFromBranding?: ThemePreferences['inheritFromBranding'];
|
|
29
30
|
/**
|
|
30
|
-
* The theme mode to use for automatic detection
|
|
31
|
-
* - 'light'
|
|
32
|
-
* - '
|
|
33
|
-
* - '
|
|
34
|
-
* - '
|
|
35
|
-
* - 'branding': Use active theme from branding preference (requires inheritFromBranding=true)
|
|
31
|
+
* The theme mode to use for automatic detection.
|
|
32
|
+
* - `'light'` | `'dark'`: Fixed color scheme.
|
|
33
|
+
* - `'system'`: Follows the OS preference.
|
|
34
|
+
* - `'class'`: Detects theme from CSS classes on the `<html>` element.
|
|
35
|
+
* - `'branding'`: Follows the active theme from the branding preference.
|
|
36
36
|
*/
|
|
37
37
|
mode?: ThemeMode | 'branding';
|
|
38
|
+
/**
|
|
39
|
+
* Optional partial theme overrides applied on top of the resolved theme.
|
|
40
|
+
* User-supplied values always take the highest precedence.
|
|
41
|
+
*/
|
|
38
42
|
theme?: RecursivePartial<ThemeConfig>;
|
|
39
43
|
}
|
|
40
44
|
/**
|
|
41
|
-
* ThemeProvider
|
|
45
|
+
* ThemeProvider is the single entry-point for theme management in `@asgardeo/react`.
|
|
42
46
|
*
|
|
43
|
-
*
|
|
44
|
-
* organization-specific themes while allowing for custom theme overrides.
|
|
47
|
+
* It transparently switches between two internal implementations:
|
|
45
48
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
* - Integration with Asgardeo branding API through useBranding hook
|
|
49
|
-
* - Merging of branding themes with custom theme configurations
|
|
50
|
-
* - CSS variable injection for easy styling
|
|
51
|
-
* - Loading and error states for branding integration
|
|
49
|
+
* **v1** (`ThemeProvider` classic): Sources colors from the Asgardeo Branding API.
|
|
50
|
+
* Used automatically when no `FlowMetaProvider` is present in the component tree.
|
|
52
51
|
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
52
|
+
* **v2** (`FlowMetaThemeProvider`): Sources colors from the `GET /flow/meta` endpoint
|
|
53
|
+
* via `FlowMetaProvider`. Used automatically when a `FlowMetaProvider` is present
|
|
54
|
+
* in the tree — or when `version="v2"` is set explicitly.
|
|
55
|
+
*
|
|
56
|
+
* The active version can also be pinned explicitly via the `version` prop.
|
|
57
|
+
* All components that consume `useTheme()` continue to work regardless of which
|
|
58
|
+
* version is active.
|
|
60
59
|
*
|
|
61
60
|
* @example
|
|
62
|
-
*
|
|
61
|
+
* Auto-detection (recommended):
|
|
63
62
|
* ```tsx
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
63
|
+
* // v2 mode – FlowMetaProvider is present
|
|
64
|
+
* <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>
|
|
65
|
+
* <ThemeProvider>
|
|
66
|
+
* <App />
|
|
67
|
+
* </ThemeProvider>
|
|
68
|
+
* </FlowMetaProvider>
|
|
69
|
+
*
|
|
70
|
+
* // v1 mode – no FlowMetaProvider
|
|
71
|
+
* <ThemeProvider>
|
|
72
72
|
* <App />
|
|
73
73
|
* </ThemeProvider>
|
|
74
74
|
* ```
|
|
75
75
|
*
|
|
76
76
|
* @example
|
|
77
|
-
*
|
|
77
|
+
* Explicit version pinning:
|
|
78
78
|
* ```tsx
|
|
79
|
-
* <ThemeProvider
|
|
80
|
-
* mode="branding"
|
|
81
|
-
* inheritFromBranding={true}
|
|
82
|
-
* >
|
|
79
|
+
* <ThemeProvider version="v2">
|
|
83
80
|
* <App />
|
|
84
81
|
* </ThemeProvider>
|
|
85
82
|
* ```
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, 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 { ThemeConfig, ThemeMode, RecursivePartial, BrowserThemeDetection, ThemePreferences } from '@asgardeo/browser';
|
|
19
|
+
import { FC, PropsWithChildren } from 'react';
|
|
20
|
+
export interface ThemeProviderProps {
|
|
21
|
+
/**
|
|
22
|
+
* Configuration for theme detection when using 'class' or 'system' mode
|
|
23
|
+
*/
|
|
24
|
+
detection?: BrowserThemeDetection;
|
|
25
|
+
/**
|
|
26
|
+
* Configuration for branding integration
|
|
27
|
+
*/
|
|
28
|
+
inheritFromBranding?: ThemePreferences['inheritFromBranding'];
|
|
29
|
+
/**
|
|
30
|
+
* The theme mode to use for automatic detection
|
|
31
|
+
* - 'light': Always use light theme
|
|
32
|
+
* - 'dark': Always use dark theme
|
|
33
|
+
* - 'system': Use system preference (prefers-color-scheme media query)
|
|
34
|
+
* - 'class': Detect theme based on CSS classes on HTML element
|
|
35
|
+
* - 'branding': Use active theme from branding preference (requires inheritFromBranding=true)
|
|
36
|
+
*/
|
|
37
|
+
mode?: ThemeMode | 'branding';
|
|
38
|
+
theme?: RecursivePartial<ThemeConfig>;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* ThemeProvider component that manages theme state and provides theme context to child components.
|
|
42
|
+
*
|
|
43
|
+
* This provider integrates with Asgardeo branding preferences to automatically apply
|
|
44
|
+
* organization-specific themes while allowing for custom theme overrides.
|
|
45
|
+
*
|
|
46
|
+
* Features:
|
|
47
|
+
* - Automatic theme mode detection (light/dark/system/class)
|
|
48
|
+
* - Integration with Asgardeo branding API through useBranding hook
|
|
49
|
+
* - Merging of branding themes with custom theme configurations
|
|
50
|
+
* - CSS variable injection for easy styling
|
|
51
|
+
* - Loading and error states for branding integration
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* Basic usage with branding integration:
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <ThemeProvider inheritFromBranding={true}>
|
|
57
|
+
* <App />
|
|
58
|
+
* </ThemeProvider>
|
|
59
|
+
* ```
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* With custom theme overrides:
|
|
63
|
+
* ```tsx
|
|
64
|
+
* <ThemeProvider
|
|
65
|
+
* theme={{
|
|
66
|
+
* colors: {
|
|
67
|
+
* primary: { main: '#custom-color' }
|
|
68
|
+
* }
|
|
69
|
+
* }}
|
|
70
|
+
* inheritFromBranding={true}
|
|
71
|
+
* >
|
|
72
|
+
* <App />
|
|
73
|
+
* </ThemeProvider>
|
|
74
|
+
* ```
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* With branding-driven theme mode:
|
|
78
|
+
* ```tsx
|
|
79
|
+
* <ThemeProvider
|
|
80
|
+
* mode="branding"
|
|
81
|
+
* inheritFromBranding={true}
|
|
82
|
+
* >
|
|
83
|
+
* <App />
|
|
84
|
+
* </ThemeProvider>
|
|
85
|
+
* ```
|
|
86
|
+
*/
|
|
87
|
+
declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
|
|
88
|
+
export default ThemeProvider;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, 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 { ThemeConfig, RecursivePartial } from '@asgardeo/browser';
|
|
19
|
+
import { FC, PropsWithChildren } from 'react';
|
|
20
|
+
export interface ThemeProviderProps {
|
|
21
|
+
/**
|
|
22
|
+
* Optional theme overrides merged on top of the server-side flow meta theme.
|
|
23
|
+
* User-supplied values take highest precedence.
|
|
24
|
+
*/
|
|
25
|
+
theme?: RecursivePartial<ThemeConfig>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* ThemeProvider is the v2 drop-in replacement for `ThemeProvider`.
|
|
29
|
+
*
|
|
30
|
+
* It reads the design theme from the nearest `FlowMetaContext` (provided by
|
|
31
|
+
* `FlowMetaProvider`) and publishes a resolved `Theme` object through the
|
|
32
|
+
* **same** `ThemeContext` that `useTheme` consumes. This means all existing
|
|
33
|
+
* components that call `useTheme` continue to work without any changes.
|
|
34
|
+
*
|
|
35
|
+
* The `defaultColorScheme` field returned by the server is used to seed the
|
|
36
|
+
* active color scheme; the user can still toggle it locally via the
|
|
37
|
+
* `toggleTheme` value exposed in the context.
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* ```tsx
|
|
41
|
+
* <FlowMetaProvider config={{ baseUrl, type: FlowMetaType.App, id: appId }}>
|
|
42
|
+
* <ThemeProvider>
|
|
43
|
+
* <App /> {/* useTheme() works here as usual *\/}
|
|
44
|
+
* </ThemeProvider>
|
|
45
|
+
* </FlowMetaProvider>
|
|
46
|
+
* ```
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* With user theme overrides (user values win over server values):
|
|
50
|
+
* ```tsx
|
|
51
|
+
* <ThemeProvider theme={{ colors: { primary: { main: '#ff0000' } } }}>
|
|
52
|
+
* <App />
|
|
53
|
+
* </ThemeProvider>
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
|
|
57
|
+
export default ThemeProvider;
|
|
@@ -27,6 +27,14 @@ export interface UseBrowserUrl {
|
|
|
27
27
|
* @returns True if the URL contains authentication parameters and matches the afterSignInUrl, or if it contains an error parameter
|
|
28
28
|
*/
|
|
29
29
|
hasAuthParams: (url: URL, afterSignInUrl: string) => boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Checks if the URL indicates that the authentication flow has been called for this instance.
|
|
32
|
+
*
|
|
33
|
+
* @param url - The URL object to check
|
|
34
|
+
* @param instanceId - The instance ID to check against
|
|
35
|
+
* @returns True if the URL indicates the flow has been called for this instance
|
|
36
|
+
*/
|
|
37
|
+
hasCalledForThisInstance: (url: URL, instanceId: number) => boolean;
|
|
30
38
|
}
|
|
31
39
|
/**
|
|
32
40
|
* Hook that provides utilities for handling browser URLs in authentication flows.
|