chore(react): improve components & error messages

packages/browser/src/__legacy__/client.ts

@@ -411,6 +411,9 @@ export class AsgardeoSPAClient {
         }
 
         return response;
+      })
+      .catch(error => {
+        return Promise.reject(error)
       });
   }
 

packages/browser/src/index.ts

@@ -58,5 +58,6 @@ export {
   createMediaQueryListener,
   BrowserThemeDetection,
 } from './theme/themeDetection';
+export {default as getActiveTheme} from './theme/getActiveTheme';
 
 export {default as http} from './utils/http';

packages/browser/src/theme/getActiveTheme.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {DEFAULT_THEME, ThemeMode} from '@asgardeo/javascript';
+import {BrowserThemeDetection, detectThemeMode} from './themeDetection';
+
+/**
+ * Gets the active theme based on the theme mode preference
+ * @param mode - The theme mode preference ('light', 'dark', 'system', or 'class')
+ * @param config - Additional configuration for theme detection
+ * @returns 'light' or 'dark' based on the resolved theme
+ */
+const getActiveTheme = (mode: ThemeMode, config: BrowserThemeDetection = {}): ThemeMode => {
+  if (mode === 'dark') {
+    return 'dark';
+  }
+
+  if (mode === 'light') {
+    return 'light';
+  }
+
+  if (mode === 'system') {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Default to light mode if system detection is not available
+    return DEFAULT_THEME;
+  }
+
+  if (mode === 'class') {
+    return detectThemeMode(mode, config);
+  }
+
+  // Default to light mode for any unknown mode
+  return DEFAULT_THEME;
+};
+
+export default getActiveTheme;

packages/javascript/src/index.ts

@@ -16,10 +16,17 @@
  * under the License.
  */
 
-export * from './__legacy__/client';
-export * from './__legacy__/models';
+export {AsgardeoAuthClient} from './__legacy__/client';
+export {
+  DefaultAuthClientConfig,
+  WellKnownAuthClientConfig,
+  BaseURLAuthClientConfig,
+  ExplicitAuthClientConfig,
+  StrictAuthClientConfig,
+  AuthClientConfig,
+} from './__legacy__/models';
 
-export * from './IsomorphicCrypto';
+export {IsomorphicCrypto} from './IsomorphicCrypto';
 
 export {default as initializeEmbeddedSignInFlow} from './api/initializeEmbeddedSignInFlow';
 export {default as executeEmbeddedSignInFlow} from './api/executeEmbeddedSignInFlow';
@@ -119,7 +126,7 @@ export {I18nBundle, I18nTranslations, I18nMetadata} from './models/i18n';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 
-export {default as createTheme} from './theme/createTheme';
+export {default as createTheme, DEFAULT_THEME} from './theme/createTheme';
 export {ThemeColors, ThemeConfig, Theme, ThemeMode, ThemeDetection} from './theme/types';
 
 export {default as bem} from './utils/bem';

packages/javascript/src/theme/createTheme.ts

@@ -32,7 +32,7 @@
  * under the License.
  */
 
-import {Theme, ThemeConfig, ThemeVars} from './types';
+import {Theme, ThemeConfig, ThemeMode, ThemeVars} from './types';
 import {RecursivePartial} from '../models/utility-types';
 import VendorConstants from '../constants/VendorConstants';
 
@@ -142,15 +142,15 @@ const lightTheme: ThemeConfig = {
 const darkTheme: ThemeConfig = {
   colors: {
     action: {
-      active: 'rgba(255, 255, 255, 0.70)',
-      hover: 'rgba(255, 255, 255, 0.04)',
+      active: '#1c1c1c',
+      hover: '#1c1c1c',
       hoverOpacity: 0.04,
-      selected: 'rgba(255, 255, 255, 0.08)',
+      selected: '#1c1c1c',
       selectedOpacity: 0.08,
       disabled: 'rgba(255, 255, 255, 0.26)',
       disabledBackground: 'rgba(255, 255, 255, 0.12)',
       disabledOpacity: 0.38,
-      focus: 'rgba(255, 255, 255, 0.12)',
+      focus: '#1c1c1c',
       focusOpacity: 0.12,
       activatedOpacity: 0.12,
     },
@@ -160,7 +160,7 @@ const darkTheme: ThemeConfig = {
       dark: '#174ea6',
     },
     secondary: {
-      main: '#424242',
+      main: '#8b8b8b',
       contrastText: '#ffffff',
       dark: '#212121',
     },
@@ -655,4 +655,6 @@ const createTheme = (config: RecursivePartial<ThemeConfig> = {}, isDark = false)
   };
 };
 
+export const DEFAULT_THEME: ThemeMode = 'light';
+
 export default createTheme;

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -40,6 +40,7 @@ import {
   AsgardeoProviderProps,
   OrganizationProvider,
   BrandingProvider,
+  getActiveTheme,
 } from '@asgardeo/react';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {FC, PropsWithChildren, RefObject, useEffect, useMemo, useRef, useState} from 'react';
@@ -104,7 +105,6 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   const reRenderCheckRef: RefObject<boolean> = useRef(false);
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [isDarkMode, setIsDarkMode] = useState(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [user, setUser] = useState<User | null>(_user);
   const [userProfile, setUserProfile] = useState<UserProfile>(_userProfile);
@@ -175,12 +175,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     })();
   }, []);
 
-  useEffect(() => {
+  const isDarkMode: boolean = useMemo(() => {
     if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
-      setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
-    } else {
-      setIsDarkMode(preferences.theme.mode === 'dark');
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
     }
+    return preferences.theme.mode === 'dark';
   }, [preferences?.theme?.mode]);
 
   useEffect(() => {
@@ -310,7 +309,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     <AsgardeoContext.Provider value={contextValue}>
       <I18nProvider preferences={preferences?.i18n}>
         <BrandingProvider brandingPreference={brandingPreference}>
-          <ThemeProvider theme={preferences?.theme?.overrides} mode={isDarkMode ? 'dark' : 'light'}>
+          <ThemeProvider
+            theme={preferences?.theme?.overrides}
+            mode={getActiveTheme(preferences?.theme?.mode as any)}
+            inheritFromBranding
+          >
             <FlowProvider>
               <UserProvider profile={userProfile} onUpdateProfile={handleProfileUpdate} updateProfile={updateProfile}>
                 <OrganizationProvider

packages/react/src/components/actions/SignInButton/SignInButton.tsx

@@ -99,7 +99,7 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<
       }
     } catch (error) {
       throw new AsgardeoRuntimeError(
-        `Sign in failed: ${error instanceof Error ? error.message : String(error)}`,
+        `Sign in failed: ${error instanceof Error ? error.message : String(JSON.stringify(error))}`,
         'SignInButton-handleSignIn-RuntimeError-001',
         'react',
         'Something went wrong while trying to sign in. Please try again later.',

packages/react/src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx

@@ -313,7 +313,7 @@ export const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({
 
       {isOpen && (
         <FloatingPortal id={portalId}>
-          <FloatingFocusManager context={context} modal={false}>
+          <FloatingFocusManager context={context} modal={false} initialFocus={-1}>
             <div ref={refs.setFloating} className={cx(styles.content)} style={floatingStyles} {...getFloatingProps()}>
               {/* Header - Current Organization */}
               {currentOrganization && (

packages/react/src/components/presentation/SignIn/options/EmailOtp.tsx

@@ -95,13 +95,13 @@ const EmailOtp: FC<BaseSignInOptionProps> = ({
       })}
 
       <Button
+        fullWidth
         type="submit"
+        color="primary"
+        variant="solid"
         disabled={isLoading}
         loading={isLoading}
         className={buttonClassName}
-        color="primary"
-        variant="solid"
-        fullWidth
         style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
       >
         {t('email.otp.submit.button')}

packages/react/src/components/presentation/SignIn/options/IdentifierFirst.tsx

@@ -78,13 +78,13 @@ const IdentifierFirst: FC<BaseSignInOptionProps> = ({
       ))}
 
       <Button
+        fullWidth
         type="submit"
+        color="primary"
+        variant="solid"
         disabled={isLoading}
         loading={isLoading}
         className={buttonClassName}
-        color="primary"
-        variant="solid"
-        fullWidth
         style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}
       >
         {t('identifier.first.submit.button')}

packages/react/src/components/presentation/SignIn/options/MultiOptionButton.tsx

@@ -134,10 +134,10 @@ const MultiOptionButton: FC<BaseSignInOptionProps> = ({
 
   return (
     <Button
-      type="button"
-      variant="outline"
-      color="primary"
       fullWidth
+      type="button"
+      color="secondary"
+      variant="solid"
       disabled={isLoading}
       onClick={handleClick}
       className={buttonClassName}