@asgardeo/react 0.5.13 → 0.5.15

package/dist/components/actions/SignInButton/SignInButton.d.ts

@@ -20,7 +20,12 @@ import { BaseSignInButtonProps } from './BaseSignInButton';
 /**
  * Props interface of {@link SignInButton}
  */
-export type SignInButtonProps = BaseSignInButtonProps;
+export type SignInButtonProps = BaseSignInButtonProps & {
+    /**
+     * Additional parameters to pass to the `authorize` request.
+     */
+    signInOptions?: Record<string, any>;
+};
 /**
  * SignInButton component that supports both render props and traditional props patterns.
  *

package/dist/contexts/Asgardeo/AsgardeoContext.d.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { Context } from 'react';
-import { HttpRequestConfig, HttpResponse, Organization } from '@asgardeo/browser';
+import { HttpRequestConfig, HttpResponse, Organization, SignInOptions } from '@asgardeo/browser';
 import AsgardeoReactClient from '../../AsgardeoReactClient';
 /**
  * Props interface of {@link AsgardeoContext}
@@ -77,6 +77,16 @@ export type AsgardeoContextProps = {
          */
         requestAll: (requestConfigs?: HttpRequestConfig[]) => Promise<HttpResponse<any>[]>;
     };
+    /**
+     * Optional additional parameters to be sent in the sign-in request.
+     * This can include custom parameters that your authorization server supports.
+     * These parameters will be included in the authorization request sent to the server.
+     * If not provided, no additional parameters will be sent.
+     *
+     * @example
+     * signInOptions: { prompt: "login", fidp: "OrganizationSSO" }
+     */
+    signInOptions?: SignInOptions;
 };
 /**
  * Context object for managing the Authentication flow builder core context.

package/dist/index.js

@@ -31,7 +31,8 @@ var AsgardeoContext = createContext({
   http: {
     request: () => null,
     requestAll: () => null
-  }
+  },
+  signInOptions: {}
 });
 AsgardeoContext.displayName = "AsgardeoContext";
 var AsgardeoContext_default = AsgardeoContext;
@@ -1176,7 +1177,8 @@ var ThemeProvider = ({
       borderRadius: brandingTheme.borderRadius,
       shadows: brandingTheme.shadows,
       spacing: brandingTheme.spacing,
-      images: brandingTheme.images
+      images: brandingTheme.images,
+      components: brandingTheme.components
     };
     return {
       ...brandingThemeConfig,
@@ -1200,6 +1202,10 @@ var ThemeProvider = ({
       images: {
         ...brandingThemeConfig.images,
         ...themeConfig?.images
+      },
+      components: {
+        ...brandingThemeConfig.components,
+        ...themeConfig?.components
       }
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);
@@ -1365,6 +1371,7 @@ var AsgardeoProvider = ({
   signUpUrl,
   organizationHandle,
   applicationId,
+  signInOptions,
   ...rest
 }) => {
   const reRenderCheckRef = useRef(false);
@@ -1388,6 +1395,7 @@ var AsgardeoProvider = ({
     scopes,
     signUpUrl,
     signInUrl,
+    signInOptions,
     ...rest
   });
   const [brandingPreference, setBrandingPreference] = useState7(null);
@@ -1625,7 +1633,8 @@ var AsgardeoProvider = ({
       http: {
         request: asgardeo.request.bind(asgardeo),
         requestAll: asgardeo.requestAll.bind(asgardeo)
-      }
+      },
+      signInOptions
     }),
     [
       applicationId,
@@ -1641,7 +1650,8 @@ var AsgardeoProvider = ({
       signIn,
       signInSilently,
       user,
-      asgardeo
+      asgardeo,
+      signInOptions
     ]
   );
   return /* @__PURE__ */ jsx7(AsgardeoContext_default.Provider, { value, children: /* @__PURE__ */ jsx7(I18nProvider_default, { preferences: preferences?.i18n, children: /* @__PURE__ */ jsx7(
@@ -2121,7 +2131,7 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
       align-items: center;
       justify-content: center;
       gap: calc(${theme.vars.spacing.unit} * 1);
-      border-radius: ${shape === "round" ? "50%" : theme.vars.borderRadius.medium};
+      border-radius: ${shape === "round" ? "50%" : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-weight: 500;
       cursor: ${disabled || loading ? "not-allowed" : "pointer"};
       outline: none;
@@ -2452,8 +2462,8 @@ var BaseSignInButton_default = BaseSignInButton;
 import { AsgardeoRuntimeError as AsgardeoRuntimeError4 } from "@asgardeo/browser";
 import { forwardRef as forwardRef3, useState as useState9 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var SignInButton = forwardRef3(({ children, onClick, preferences, ...rest }, ref) => {
-  const { signIn, signInUrl } = useAsgardeo_default();
+var SignInButton = forwardRef3(({ children, onClick, preferences, signInOptions: overriddenSignInOptions = {}, ...rest }, ref) => {
+  const { signIn, signInUrl, signInOptions } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
   const [isLoading, setIsLoading] = useState9(false);
   const handleSignIn = async (e) => {
@@ -2463,7 +2473,7 @@ var SignInButton = forwardRef3(({ children, onClick, preferences, ...rest }, ref
         window.history.pushState(null, "", signInUrl);
         window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
       } else {
-        await signIn();
+        await signIn(overriddenSignInOptions ?? signInOptions);
       }
       if (onClick) {
         onClick(e);
@@ -3239,7 +3249,7 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
       width: 100%;
       padding: ${theme.vars.spacing.unit} ${rightPadding} ${theme.vars.spacing.unit} ${leftPadding};
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
       color: ${theme.vars.colors.text.primary};
       background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
@@ -3423,7 +3433,7 @@ var useStyles7 = (theme, colorScheme, disabled, hasError) => {
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
       color: ${theme.vars.colors.text.primary};
       background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
@@ -3563,7 +3573,7 @@ var useStyles8 = (theme, colorScheme, disabled, hasError, length) => {
       font-size: ${theme.vars.typography.fontSizes.xl};
       font-weight: 500;
       border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       color: ${theme.vars.colors.text.primary};
       background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
       outline: none;
@@ -3893,7 +3903,7 @@ var useStyles10 = (theme, colorScheme, hasError, disabled) => {
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: 1rem;
       color: ${theme.vars.colors.text.primary};
       background-color: ${theme.vars.colors.background.surface};