@avalabs/avacloud-waas-react 1.0.2 → 1.0.3

package/README.md

@@ -1,6 +1,6 @@
 # @avalabs/avacloud-waas-react
 
-Official React SDK for AvaCloud Authentication and wallet integration. This library provides a seamless way to integrate AvaCloud authentication and wallet functionality into your React applications.
+Official React SDK for AvaCloud Wallet-as-a-Service (WaaS) integration. This library provides a seamless way to integrate AvaCloud wallet functionality into your React applications.
 
 [![npm version](https://img.shields.io/npm/v/@avalabs/avacloud-waas-react.svg)](https://www.npmjs.com/package/@avalabs/avacloud-waas-react)
 [![License](https://img.shields.io/npm/l/@avalabs/avacloud-waas-react.svg)](https://github.com/ava-labs/avacloud-waas-react/blob/main/LICENSE)
@@ -38,7 +38,7 @@ function App() {
 }
 ```
 
-Use the authentication hooks and components in your application:
+Use the wallet hooks and components in your application:
 
 ```tsx
 import { useAvaCloudWallet, LoginButton, WalletDisplay } from '@avalabs/avacloud-waas-react';
@@ -69,11 +69,11 @@ function YourComponent() {
 
 ### AvaCloudWalletProvider
 
-The main provider component that wraps your application and provides authentication context.
+The main provider component that wraps your application and provides wallet context.
 
 ```tsx
 <AvaCloudWalletProvider
-  authServiceUrl="https://auth.avacloud.io"
+  orgId="your-avacloud-org-id" // Required
   chainId={43113}
   darkMode={false}
   onAuthSuccess={(user) => console.log('Auth success', user)}
@@ -88,7 +88,8 @@ The main provider component that wraps your application and provides authenticat
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `authServiceUrl` | `string` | URL of the AvaCloud authentication service |
+| `orgId` | `string` | Required AvaCloud organization ID |
+| `authServiceUrl` | `string` | (Optional) URL of the AvaCloud authentication service. Defaults to AvaCloud's production auth service. |
 | `chainId` | `number` | (Optional) EVM chain ID to use (defaults to Avalanche Fuji Testnet - 43113) |
 | `darkMode` | `boolean` | (Optional) Whether to use dark mode for UI components |
 | `onAuthSuccess` | `(user: Auth0User) => void` | (Optional) Callback called when authentication is successful |
@@ -111,7 +112,7 @@ The main provider component that wraps your application and provides authenticat
 
 ### useAvaCloudWallet
 
-The main hook for accessing authentication state and methods.
+The main hook for accessing wallet state and methods.
 
 ```tsx
 const {
@@ -192,6 +193,22 @@ const handleTransfer = async () => {
 };
 ```
 
+### useUserWallets
+
+Hook for accessing and managing user wallets.
+
+```tsx
+const { wallets, isLoading, error } = useUserWallets();
+```
+
+### useChainId
+
+Hook for accessing and setting the current chain ID.
+
+```tsx
+const { chainId, setChainId } = useChainId();
+```
+
 ## Advanced Usage
 
 ### Theme Customization
@@ -261,7 +278,7 @@ MIT © [Ava Labs, Inc.](https://github.com/ava-labs)
 
 ## Using the AvaCloud Organization ID
 
-The `AvaCloudWalletProvider` requires an AvaCloud organization ID (`orgId`). This will be used to fetch the organization configuration from the AvaCloud API, which includes the mapping to the appropriate Cubist organization ID used for wallet operations.
+The `AvaCloudWalletProvider` requires an AvaCloud organization ID (`orgId`). This is used to fetch the organization configuration from the AvaCloud API, which includes the mapping to the appropriate wallet service organization ID used for wallet operations.
 
 ```jsx
 import { AvaCloudWalletProvider } from '@avalabs/avacloud-waas-react';
@@ -269,7 +286,6 @@ import { AvaCloudWalletProvider } from '@avalabs/avacloud-waas-react';
 function App() {
   return (
     <AvaCloudWalletProvider
-      authServiceUrl="https://ac-auth-service.vercel.app/"
       orgId="your-avacloud-org-id" // Required AvaCloud organization ID
     >
       <YourApp />
@@ -281,7 +297,7 @@ function App() {
 When provided, the `orgId` will be used to:
 
 1. Fetch the organization configuration from the AvaCloud API
-2. Map to a Cubist organization ID as specified in the configuration
-3. Use the mapped ID for Cubist authentication and wallet operations
+2. Map to the appropriate wallet service organization ID
+3. Use the mapped ID for wallet operations
 
-This enables organizations to have their AvaCloud identity seamlessly map to their Cubist wallets. 
+This enables organizations to have their AvaCloud identity seamlessly map to their WaaS wallets. 

package/dist/index.d.mts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _cubist_labs_cubesigner_sdk from '@cubist-labs/cubesigner-sdk';
 import { IdentityProof, CubeSignerClient } from '@cubist-labs/cubesigner-sdk';
-import { QueryClient } from '@tanstack/react-query';
 import { PropsWithChildren, ButtonHTMLAttributes } from 'react';
 import { ButtonProps } from '@avalabs/core-k2-components';
 import { Hex, TransactionRequest, Signature, Hash } from 'viem';
@@ -64,6 +63,44 @@ interface Auth0User$1 {
     [key: string]: unknown;
 }
 
+/**
+ * Organization configuration types
+ */
+/**
+ * Admin portal settings within organization configuration
+ */
+interface AdminPortalSettings {
+    /**
+     * Array of enabled social login providers
+     * Possible values: 'google', 'facebook', 'x', 'twitter', 'apple'
+     * Note: Some providers like 'facebook' may be in development and not fully supported
+     */
+    socialLogins?: string[];
+    [key: string]: unknown;
+}
+/**
+ * Organization configuration interface
+ */
+interface OrgConfig {
+    /** Primary key of the organization */
+    PKey?: string;
+    /** Secondary key of the organization */
+    SKey?: string;
+    /** Organization ID */
+    orgID?: string;
+    /** Wallet provider organization ID used for Cubist */
+    walletProviderOrgID?: string;
+    /** Admin portal settings */
+    adminPortalSettings?: AdminPortalSettings;
+    /** Allowed origins for CORS */
+    originAllowlist?: string[];
+    /** Timestamp when the config was created */
+    createdAt?: number;
+    /** Timestamp when the config was last updated */
+    updatedAt?: number;
+    [key: string]: unknown;
+}
+
 /**
  * Authentication message payload structure
  */
@@ -114,6 +151,12 @@ declare enum VM {
     PVM = "PVM"
 }
 
+type QueryClient = {
+    invalidateQueries: (options: {
+        queryKey: string[];
+    }) => void;
+};
+
 /**
  * Possible AvaCloud environments
  */
@@ -240,7 +283,7 @@ type AuthMessage = IframeReadyMessage | CheckAuthStatusMessage | AuthStatusMessa
  */
 interface AvaCloudWalletProviderProps {
     children: React.ReactNode;
-    authServiceUrl: string;
+    authServiceUrl?: string;
     orgId: string;
     chainId?: number;
     darkMode?: boolean;
@@ -257,7 +300,7 @@ interface AvaCloudWalletContextType {
     isLoading: boolean;
     user: UserInfo | null;
     wallet: WalletInfo;
-    orgConfig: Record<string, unknown> | null;
+    orgConfig: OrgConfig | null;
     logout: () => void;
     loginWithCubist: (oidcToken?: string) => Promise<void>;
     cubistClient: CubeSignerClient | null;
@@ -470,4 +513,4 @@ interface UseUserWalletsResult {
 }
 declare function useUserWallets(): UseUserWalletsResult;
 
-export { type AddAccountMessage, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };
+export { type AddAccountMessage, type AdminPortalSettings, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type OrgConfig, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _cubist_labs_cubesigner_sdk from '@cubist-labs/cubesigner-sdk';
 import { IdentityProof, CubeSignerClient } from '@cubist-labs/cubesigner-sdk';
-import { QueryClient } from '@tanstack/react-query';
 import { PropsWithChildren, ButtonHTMLAttributes } from 'react';
 import { ButtonProps } from '@avalabs/core-k2-components';
 import { Hex, TransactionRequest, Signature, Hash } from 'viem';
@@ -64,6 +63,44 @@ interface Auth0User$1 {
     [key: string]: unknown;
 }
 
+/**
+ * Organization configuration types
+ */
+/**
+ * Admin portal settings within organization configuration
+ */
+interface AdminPortalSettings {
+    /**
+     * Array of enabled social login providers
+     * Possible values: 'google', 'facebook', 'x', 'twitter', 'apple'
+     * Note: Some providers like 'facebook' may be in development and not fully supported
+     */
+    socialLogins?: string[];
+    [key: string]: unknown;
+}
+/**
+ * Organization configuration interface
+ */
+interface OrgConfig {
+    /** Primary key of the organization */
+    PKey?: string;
+    /** Secondary key of the organization */
+    SKey?: string;
+    /** Organization ID */
+    orgID?: string;
+    /** Wallet provider organization ID used for Cubist */
+    walletProviderOrgID?: string;
+    /** Admin portal settings */
+    adminPortalSettings?: AdminPortalSettings;
+    /** Allowed origins for CORS */
+    originAllowlist?: string[];
+    /** Timestamp when the config was created */
+    createdAt?: number;
+    /** Timestamp when the config was last updated */
+    updatedAt?: number;
+    [key: string]: unknown;
+}
+
 /**
  * Authentication message payload structure
  */
@@ -114,6 +151,12 @@ declare enum VM {
     PVM = "PVM"
 }
 
+type QueryClient = {
+    invalidateQueries: (options: {
+        queryKey: string[];
+    }) => void;
+};
+
 /**
  * Possible AvaCloud environments
  */
@@ -240,7 +283,7 @@ type AuthMessage = IframeReadyMessage | CheckAuthStatusMessage | AuthStatusMessa
  */
 interface AvaCloudWalletProviderProps {
     children: React.ReactNode;
-    authServiceUrl: string;
+    authServiceUrl?: string;
     orgId: string;
     chainId?: number;
     darkMode?: boolean;
@@ -257,7 +300,7 @@ interface AvaCloudWalletContextType {
     isLoading: boolean;
     user: UserInfo | null;
     wallet: WalletInfo;
-    orgConfig: Record<string, unknown> | null;
+    orgConfig: OrgConfig | null;
     logout: () => void;
     loginWithCubist: (oidcToken?: string) => Promise<void>;
     cubistClient: CubeSignerClient | null;
@@ -470,4 +513,4 @@ interface UseUserWalletsResult {
 }
 declare function useUserWallets(): UseUserWalletsResult;
 
-export { type AddAccountMessage, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };
+export { type AddAccountMessage, type AdminPortalSettings, type Auth0User, type AuthMessage, type AuthMessagePayload, type AuthStateUpdateMessage, type AuthStatusMessage, type AvaCloudEnvironment, type AvaCloudWalletContextType, AvaCloudWalletProvider, type AvaCloudWalletProviderProps, type BaseAuthMessage, type CheckAuthStatusMessage, type CubistWalletInfo, type ErrorMessage, ExportView, type GetOidcMessage, type IframeReadyMessage, LoginButton, type LoginRequestMessage, type LogoutRequestMessage, type MessageType, type OrgConfig, type ReceiveOidcMessage, ReceiveView, type RegisterMessage, type RegisterPayload, type RegisterSuccessMessage, SendView, ThemeProvider, TokensView, type UserInfo, UserProfile, VM, WalletButton, WalletCard, WalletDisplay, type WalletInfo, type WalletKeysErrorMessage, type WalletKeysUpdateMessage, useAuth, useAvaCloudWallet, useChainId, usePostMessage, useSignMessage, useSignTransaction, useThemeMode, useTransferTokens, useUserWallets };

package/dist/index.js

@@ -90,6 +90,7 @@ var AUTH0_STORAGE_KEYS = {
   EXPIRES_AT: "auth0.expires_at"
 };
 var CUBIST_USER_ID_KEY = "cubist_user_id";
+var ORG_CONFIG_CACHE_KEY = "avacloud-org-config-cache";
 
 // src/hooks/usePostMessage.ts
 function usePostMessage({
@@ -115,6 +116,30 @@ function usePostMessage({
   });
   const hasRequestedOidcRef = (0, import_react.useRef)(false);
   const isHandlingMessageRef = (0, import_react.useRef)(false);
+  const hasLoadedCacheRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (orgId && onOrgConfigUpdate && !hasLoadedCacheRef.current) {
+      hasLoadedCacheRef.current = true;
+      try {
+        const cachedConfigKey = `${ORG_CONFIG_CACHE_KEY}-${orgId}-${environment}`;
+        const cachedConfigJson = localStorage.getItem(cachedConfigKey);
+        if (cachedConfigJson) {
+          const cachedConfig = JSON.parse(cachedConfigJson);
+          const timestamp = cachedConfig._timestamp || 0;
+          const isExpired = Date.now() - timestamp > 30 * 60 * 1e3;
+          if (!isExpired) {
+            const { _timestamp, ...configWithoutTimestamp } = cachedConfig;
+            console.log("Using cached org config:", configWithoutTimestamp);
+            onOrgConfigUpdate(configWithoutTimestamp);
+          } else {
+            console.log("Cached org config expired, will fetch fresh data");
+          }
+        }
+      } catch (error) {
+        console.error("Error loading cached org config:", error);
+      }
+    }
+  }, [orgId, environment, onOrgConfigUpdate]);
   const sendMessage = (0, import_react.useCallback)((message) => {
     if (iframe == null ? void 0 : iframe.contentWindow) {
       try {
@@ -211,6 +236,19 @@ function usePostMessage({
             if (event.data.orgConfig && onOrgConfigUpdate) {
               console.log("Received organization config:", event.data.orgConfig);
               onOrgConfigUpdate(event.data.orgConfig);
+              if (orgId) {
+                try {
+                  const cachedConfigKey = `${ORG_CONFIG_CACHE_KEY}-${orgId}-${environment}`;
+                  const configWithTimestamp = {
+                    ...event.data.orgConfig,
+                    _timestamp: Date.now()
+                  };
+                  localStorage.setItem(cachedConfigKey, JSON.stringify(configWithTimestamp));
+                  console.log("Cached organization config for future use");
+                } catch (error) {
+                  console.error("Error caching org config:", error);
+                }
+              }
             }
             if (!hasRequestedOidcRef.current) {
               setIsLoading(false);
@@ -253,7 +291,9 @@ function usePostMessage({
     setIsLoading,
     setUser,
     sendMessage,
-    cubistClient
+    cubistClient,
+    orgId,
+    environment
   ]);
   (0, import_react.useEffect)(() => {
     if (isIframeReady && (iframe == null ? void 0 : iframe.contentWindow)) {
@@ -299,11 +339,70 @@ function PoweredByAvaCloud() {
 
 // src/components/SignInContent.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
+function SignInContent({
+  onEmailLogin,
+  onProviderLogin,
+  error,
+  isSubmitting,
+  socialLogins = ["google", "x", "apple"]
+}) {
   const [email, setEmail] = (0, import_react2.useState)("");
   const [password, setPassword] = (0, import_react2.useState)("");
   const [isPasswordStep, setIsPasswordStep] = (0, import_react2.useState)(false);
-  const theme = (0, import_core_k2_components2.useTheme)();
+  const providerConnectionMap = {
+    "google": "google-oauth2",
+    "x": "twitter",
+    "twitter": "twitter",
+    "facebook": "facebook",
+    "apple": "apple"
+  };
+  const renderSocialLoginButton = (loginType) => {
+    if (!providerConnectionMap[loginType]) return null;
+    const connectionName = providerConnectionMap[loginType];
+    let LoginIcon;
+    switch (loginType) {
+      case "google":
+        LoginIcon = import_core_k2_components2.GoogleIcon;
+        break;
+      case "x":
+      case "twitter":
+        LoginIcon = import_core_k2_components2.XTwitterIcon;
+        break;
+      case "facebook":
+        LoginIcon = import_core_k2_components2.FacebookIcon;
+        break;
+      case "apple":
+        LoginIcon = import_core_k2_components2.AppleIcon;
+        break;
+      default:
+        return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core_k2_components2.IconButton,
+      {
+        color: "default",
+        variant: "contained",
+        onClick: () => onProviderLogin(connectionName),
+        disabled: isSubmitting,
+        sx: {
+          display: "flex",
+          padding: "16px",
+          alignItems: "center",
+          gap: "8px",
+          borderRadius: "8px",
+          background: "rgba(0, 0, 0, 0.02)",
+          boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
+          width: 72,
+          height: 72,
+          "&:hover": {
+            background: "rgba(0, 0, 0, 0.04)"
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoginIcon, { sx: { width: 24, height: 24 } })
+      },
+      loginType
+    );
+  };
   const handleEmailSubmit = (e) => {
     e.preventDefault();
     if (!email) return;
@@ -319,7 +418,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
   };
   const titleTypography = {
     alignSelf: "stretch",
-    color: (theme2) => theme2.palette.mode === "dark" ? "#FFFFFF" : "rgba(0, 0, 0, 0.80)",
+    color: (theme) => theme.palette.mode === "dark" ? "#FFFFFF" : "rgba(0, 0, 0, 0.80)",
     fontFamily: "Inter",
     fontSize: "16px",
     fontStyle: "normal",
@@ -344,7 +443,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
             helperText: error,
             sx: {
               "& .MuiOutlinedInput-root": {
-                backgroundColor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
+                backgroundColor: (theme) => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
               }
             }
           }
@@ -478,80 +577,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core_k2_components2.Stack, { gap: 3, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.Typography, { variant: "h6", sx: titleTypography, children: "Sign in with" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core_k2_components2.Stack, { direction: "row", spacing: 3, sx: { justifyContent: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_core_k2_components2.IconButton,
-        {
-          color: "default",
-          variant: "contained",
-          onClick: () => onProviderLogin("google-oauth2"),
-          disabled: isSubmitting,
-          sx: {
-            display: "flex",
-            padding: "16px",
-            alignItems: "center",
-            gap: "8px",
-            borderRadius: "8px",
-            background: "rgba(0, 0, 0, 0.02)",
-            boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
-            width: 72,
-            height: 72,
-            "&:hover": {
-              background: "rgba(0, 0, 0, 0.04)"
-            }
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.GoogleColorIcon, { sx: { width: 24, height: 24 } })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_core_k2_components2.IconButton,
-        {
-          color: "default",
-          variant: "contained",
-          onClick: () => onProviderLogin("twitter"),
-          disabled: isSubmitting,
-          sx: {
-            display: "flex",
-            padding: "16px",
-            alignItems: "center",
-            gap: "8px",
-            borderRadius: "8px",
-            background: "rgba(0, 0, 0, 0.02)",
-            boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
-            width: 72,
-            height: 72,
-            "&:hover": {
-              background: "rgba(0, 0, 0, 0.04)"
-            }
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.XTwitterIcon, { sx: { width: 24, height: 24 } })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_core_k2_components2.IconButton,
-        {
-          color: "default",
-          variant: "contained",
-          onClick: () => onProviderLogin("apple"),
-          disabled: isSubmitting,
-          sx: {
-            display: "flex",
-            padding: "16px",
-            alignItems: "center",
-            gap: "8px",
-            borderRadius: "8px",
-            background: "rgba(0, 0, 0, 0.02)",
-            boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
-            width: 72,
-            height: 72,
-            "&:hover": {
-              background: "rgba(0, 0, 0, 0.04)"
-            }
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.AppleIcon, { sx: { width: 24, height: 24 } })
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.Stack, { direction: "row", spacing: 3, sx: { justifyContent: "center" }, children: socialLogins.map((loginType) => renderSocialLoginButton(loginType)) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.Divider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core_k2_components2.Typography, { variant: "body2", color: "text.secondary", children: "or" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { onSubmit: handleEmailSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core_k2_components2.Stack, { gap: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -568,7 +594,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
           helperText: error,
           sx: {
             "& .MuiOutlinedInput-root": {
-              backgroundColor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
+              backgroundColor: (theme) => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
             }
           }
         }
@@ -671,9 +697,11 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
 // src/components/Modal.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function LoginModal({ open, onClose }) {
-  const { iframe } = useAvaCloudWallet();
+  var _a;
+  const { iframe, orgConfig } = useAvaCloudWallet();
   const [isSubmitting, setIsSubmitting] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)("");
+  const socialLogins = (_a = orgConfig == null ? void 0 : orgConfig.adminPortalSettings) == null ? void 0 : _a.socialLogins;
   (0, import_react3.useEffect)(() => {
     const handleMessage = (event) => {
       if (event.data.type === "ERROR") {
@@ -688,11 +716,11 @@ function LoginModal({ open, onClose }) {
     return () => window.removeEventListener("message", handleMessage);
   }, [onClose]);
   const handleProviderLogin = (provider) => {
-    var _a;
+    var _a2;
     setError("");
     if (iframe) {
       console.log(`Sending LOGIN_REQUEST to auth service iframe with ${provider} connection`);
-      (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage({
+      (_a2 = iframe.contentWindow) == null ? void 0 : _a2.postMessage({
         type: "LOGIN_REQUEST",
         connection: provider
       }, "*");
@@ -703,12 +731,12 @@ function LoginModal({ open, onClose }) {
     }
   };
   const handleEmailLogin = (email, password) => {
-    var _a;
+    var _a2;
     setError("");
     setIsSubmitting(true);
     if (iframe) {
       console.log("Sending email/password LOGIN_REQUEST to auth service iframe");
-      (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage({
+      (_a2 = iframe.contentWindow) == null ? void 0 : _a2.postMessage({
         type: "LOGIN_REQUEST",
         email,
         password
@@ -792,7 +820,8 @@ function LoginModal({ open, onClose }) {
             onEmailLogin: handleEmailLogin,
             onProviderLogin: handleProviderLogin,
             error,
-            isSubmitting
+            isSubmitting,
+            socialLogins
           }
         ) })
       ]
@@ -1452,11 +1481,15 @@ function AvaCloudWalletProvider({
     localStorage.removeItem(AUTH0_STORAGE_KEYS.ID_TOKEN);
     localStorage.removeItem(AUTH0_STORAGE_KEYS.EXPIRES_AT);
     localStorage.removeItem(CUBIST_USER_ID_KEY);
+    if (orgId) {
+      const cachedConfigKey = `${ORG_CONFIG_CACHE_KEY}-${orgId}-${environment}`;
+      localStorage.removeItem(cachedConfigKey);
+    }
     sessionStorage.removeItem(OIDC_TOKEN_KEY);
     setCubistClient(null);
     setCubistError(null);
     setPendingOidcToken(null);
-  }, [sendMessage]);
+  }, [sendMessage, orgId, environment]);
   const addAccount = (0, import_react9.useCallback)(async (accountIndex) => {
     console.log("[addAccount] Called with accountIndex:", accountIndex);
     if (!isAuthenticated || !user || !wallet.mnemonicId) {

package/dist/index.mjs

@@ -44,6 +44,7 @@ var AUTH0_STORAGE_KEYS = {
   EXPIRES_AT: "auth0.expires_at"
 };
 var CUBIST_USER_ID_KEY = "cubist_user_id";
+var ORG_CONFIG_CACHE_KEY = "avacloud-org-config-cache";
 
 // src/hooks/usePostMessage.ts
 function usePostMessage({
@@ -69,6 +70,30 @@ function usePostMessage({
   });
   const hasRequestedOidcRef = useRef(false);
   const isHandlingMessageRef = useRef(false);
+  const hasLoadedCacheRef = useRef(false);
+  useEffect(() => {
+    if (orgId && onOrgConfigUpdate && !hasLoadedCacheRef.current) {
+      hasLoadedCacheRef.current = true;
+      try {
+        const cachedConfigKey = `${ORG_CONFIG_CACHE_KEY}-${orgId}-${environment}`;
+        const cachedConfigJson = localStorage.getItem(cachedConfigKey);
+        if (cachedConfigJson) {
+          const cachedConfig = JSON.parse(cachedConfigJson);
+          const timestamp = cachedConfig._timestamp || 0;
+          const isExpired = Date.now() - timestamp > 30 * 60 * 1e3;
+          if (!isExpired) {
+            const { _timestamp, ...configWithoutTimestamp } = cachedConfig;
+            console.log("Using cached org config:", configWithoutTimestamp);
+            onOrgConfigUpdate(configWithoutTimestamp);
+          } else {
+            console.log("Cached org config expired, will fetch fresh data");
+          }
+        }
+      } catch (error) {
+        console.error("Error loading cached org config:", error);
+      }
+    }
+  }, [orgId, environment, onOrgConfigUpdate]);
   const sendMessage = useCallback((message) => {
     if (iframe == null ? void 0 : iframe.contentWindow) {
       try {
@@ -165,6 +190,19 @@ function usePostMessage({
             if (event.data.orgConfig && onOrgConfigUpdate) {
               console.log("Received organization config:", event.data.orgConfig);
               onOrgConfigUpdate(event.data.orgConfig);
+              if (orgId) {
+                try {
+                  const cachedConfigKey = `${ORG_CONFIG_CACHE_KEY}-${orgId}-${environment}`;
+                  const configWithTimestamp = {
+                    ...event.data.orgConfig,
+                    _timestamp: Date.now()
+                  };
+                  localStorage.setItem(cachedConfigKey, JSON.stringify(configWithTimestamp));
+                  console.log("Cached organization config for future use");
+                } catch (error) {
+                  console.error("Error caching org config:", error);
+                }
+              }
             }
             if (!hasRequestedOidcRef.current) {
               setIsLoading(false);
@@ -207,7 +245,9 @@ function usePostMessage({
     setIsLoading,
     setUser,
     sendMessage,
-    cubistClient
+    cubistClient,
+    orgId,
+    environment
   ]);
   useEffect(() => {
     if (isIframeReady && (iframe == null ? void 0 : iframe.contentWindow)) {
@@ -236,7 +276,7 @@ import { Dialog, DialogContent, IconButton as IconButton2, Stack as Stack3, XIco
 
 // src/components/SignInContent.tsx
 import { useState } from "react";
-import { Button, TextField, Typography as Typography2, Stack as Stack2, IconButton, Divider, GoogleColorIcon, AppleIcon, XTwitterIcon, useTheme } from "@avalabs/core-k2-components";
+import { Button, TextField, Typography as Typography2, Stack as Stack2, IconButton, Divider, GoogleIcon, AppleIcon, XTwitterIcon, FacebookIcon } from "@avalabs/core-k2-components";
 
 // src/components/PoweredByAvaCloud.tsx
 import { Stack, Typography, AvaCloudConnectIcon } from "@avalabs/core-k2-components";
@@ -253,11 +293,70 @@ function PoweredByAvaCloud() {
 
 // src/components/SignInContent.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
+function SignInContent({
+  onEmailLogin,
+  onProviderLogin,
+  error,
+  isSubmitting,
+  socialLogins = ["google", "x", "apple"]
+}) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [isPasswordStep, setIsPasswordStep] = useState(false);
-  const theme = useTheme();
+  const providerConnectionMap = {
+    "google": "google-oauth2",
+    "x": "twitter",
+    "twitter": "twitter",
+    "facebook": "facebook",
+    "apple": "apple"
+  };
+  const renderSocialLoginButton = (loginType) => {
+    if (!providerConnectionMap[loginType]) return null;
+    const connectionName = providerConnectionMap[loginType];
+    let LoginIcon;
+    switch (loginType) {
+      case "google":
+        LoginIcon = GoogleIcon;
+        break;
+      case "x":
+      case "twitter":
+        LoginIcon = XTwitterIcon;
+        break;
+      case "facebook":
+        LoginIcon = FacebookIcon;
+        break;
+      case "apple":
+        LoginIcon = AppleIcon;
+        break;
+      default:
+        return null;
+    }
+    return /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        color: "default",
+        variant: "contained",
+        onClick: () => onProviderLogin(connectionName),
+        disabled: isSubmitting,
+        sx: {
+          display: "flex",
+          padding: "16px",
+          alignItems: "center",
+          gap: "8px",
+          borderRadius: "8px",
+          background: "rgba(0, 0, 0, 0.02)",
+          boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
+          width: 72,
+          height: 72,
+          "&:hover": {
+            background: "rgba(0, 0, 0, 0.04)"
+          }
+        },
+        children: /* @__PURE__ */ jsx2(LoginIcon, { sx: { width: 24, height: 24 } })
+      },
+      loginType
+    );
+  };
   const handleEmailSubmit = (e) => {
     e.preventDefault();
     if (!email) return;
@@ -273,7 +372,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
   };
   const titleTypography = {
     alignSelf: "stretch",
-    color: (theme2) => theme2.palette.mode === "dark" ? "#FFFFFF" : "rgba(0, 0, 0, 0.80)",
+    color: (theme) => theme.palette.mode === "dark" ? "#FFFFFF" : "rgba(0, 0, 0, 0.80)",
     fontFamily: "Inter",
     fontSize: "16px",
     fontStyle: "normal",
@@ -298,7 +397,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
             helperText: error,
             sx: {
               "& .MuiOutlinedInput-root": {
-                backgroundColor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
+                backgroundColor: (theme) => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
               }
             }
           }
@@ -432,80 +531,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
   }
   return /* @__PURE__ */ jsxs2(Stack2, { gap: 3, children: [
     /* @__PURE__ */ jsx2(Typography2, { variant: "h6", sx: titleTypography, children: "Sign in with" }),
-    /* @__PURE__ */ jsxs2(Stack2, { direction: "row", spacing: 3, sx: { justifyContent: "center" }, children: [
-      /* @__PURE__ */ jsx2(
-        IconButton,
-        {
-          color: "default",
-          variant: "contained",
-          onClick: () => onProviderLogin("google-oauth2"),
-          disabled: isSubmitting,
-          sx: {
-            display: "flex",
-            padding: "16px",
-            alignItems: "center",
-            gap: "8px",
-            borderRadius: "8px",
-            background: "rgba(0, 0, 0, 0.02)",
-            boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
-            width: 72,
-            height: 72,
-            "&:hover": {
-              background: "rgba(0, 0, 0, 0.04)"
-            }
-          },
-          children: /* @__PURE__ */ jsx2(GoogleColorIcon, { sx: { width: 24, height: 24 } })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        IconButton,
-        {
-          color: "default",
-          variant: "contained",
-          onClick: () => onProviderLogin("twitter"),
-          disabled: isSubmitting,
-          sx: {
-            display: "flex",
-            padding: "16px",
-            alignItems: "center",
-            gap: "8px",
-            borderRadius: "8px",
-            background: "rgba(0, 0, 0, 0.02)",
-            boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
-            width: 72,
-            height: 72,
-            "&:hover": {
-              background: "rgba(0, 0, 0, 0.04)"
-            }
-          },
-          children: /* @__PURE__ */ jsx2(XTwitterIcon, { sx: { width: 24, height: 24 } })
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        IconButton,
-        {
-          color: "default",
-          variant: "contained",
-          onClick: () => onProviderLogin("apple"),
-          disabled: isSubmitting,
-          sx: {
-            display: "flex",
-            padding: "16px",
-            alignItems: "center",
-            gap: "8px",
-            borderRadius: "8px",
-            background: "rgba(0, 0, 0, 0.02)",
-            boxShadow: "2px 1px 4px 0px rgba(0, 0, 0, 0.20)",
-            width: 72,
-            height: 72,
-            "&:hover": {
-              background: "rgba(0, 0, 0, 0.04)"
-            }
-          },
-          children: /* @__PURE__ */ jsx2(AppleIcon, { sx: { width: 24, height: 24 } })
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx2(Stack2, { direction: "row", spacing: 3, sx: { justifyContent: "center" }, children: socialLogins.map((loginType) => renderSocialLoginButton(loginType)) }),
     /* @__PURE__ */ jsx2(Divider, { children: /* @__PURE__ */ jsx2(Typography2, { variant: "body2", color: "text.secondary", children: "or" }) }),
     /* @__PURE__ */ jsx2("form", { onSubmit: handleEmailSubmit, children: /* @__PURE__ */ jsxs2(Stack2, { gap: 2, children: [
       /* @__PURE__ */ jsx2(
@@ -522,7 +548,7 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
           helperText: error,
           sx: {
             "& .MuiOutlinedInput-root": {
-              backgroundColor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
+              backgroundColor: (theme) => theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "grey.50"
             }
           }
         }
@@ -625,9 +651,11 @@ function SignInContent({ onEmailLogin, onProviderLogin, error, isSubmitting }) {
 // src/components/Modal.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function LoginModal({ open, onClose }) {
-  const { iframe } = useAvaCloudWallet();
+  var _a;
+  const { iframe, orgConfig } = useAvaCloudWallet();
   const [isSubmitting, setIsSubmitting] = useState2(false);
   const [error, setError] = useState2("");
+  const socialLogins = (_a = orgConfig == null ? void 0 : orgConfig.adminPortalSettings) == null ? void 0 : _a.socialLogins;
   useEffect2(() => {
     const handleMessage = (event) => {
       if (event.data.type === "ERROR") {
@@ -642,11 +670,11 @@ function LoginModal({ open, onClose }) {
     return () => window.removeEventListener("message", handleMessage);
   }, [onClose]);
   const handleProviderLogin = (provider) => {
-    var _a;
+    var _a2;
     setError("");
     if (iframe) {
       console.log(`Sending LOGIN_REQUEST to auth service iframe with ${provider} connection`);
-      (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage({
+      (_a2 = iframe.contentWindow) == null ? void 0 : _a2.postMessage({
         type: "LOGIN_REQUEST",
         connection: provider
       }, "*");
@@ -657,12 +685,12 @@ function LoginModal({ open, onClose }) {
     }
   };
   const handleEmailLogin = (email, password) => {
-    var _a;
+    var _a2;
     setError("");
     setIsSubmitting(true);
     if (iframe) {
       console.log("Sending email/password LOGIN_REQUEST to auth service iframe");
-      (_a = iframe.contentWindow) == null ? void 0 : _a.postMessage({
+      (_a2 = iframe.contentWindow) == null ? void 0 : _a2.postMessage({
         type: "LOGIN_REQUEST",
         email,
         password
@@ -746,7 +774,8 @@ function LoginModal({ open, onClose }) {
             onEmailLogin: handleEmailLogin,
             onProviderLogin: handleProviderLogin,
             error,
-            isSubmitting
+            isSubmitting,
+            socialLogins
           }
         ) })
       ]
@@ -1406,11 +1435,15 @@ function AvaCloudWalletProvider({
     localStorage.removeItem(AUTH0_STORAGE_KEYS.ID_TOKEN);
     localStorage.removeItem(AUTH0_STORAGE_KEYS.EXPIRES_AT);
     localStorage.removeItem(CUBIST_USER_ID_KEY);
+    if (orgId) {
+      const cachedConfigKey = `${ORG_CONFIG_CACHE_KEY}-${orgId}-${environment}`;
+      localStorage.removeItem(cachedConfigKey);
+    }
     sessionStorage.removeItem(OIDC_TOKEN_KEY);
     setCubistClient(null);
     setCubistError(null);
     setPendingOidcToken(null);
-  }, [sendMessage]);
+  }, [sendMessage, orgId, environment]);
   const addAccount = useCallback5(async (accountIndex) => {
     console.log("[addAccount] Called with accountIndex:", accountIndex);
     if (!isAuthenticated || !user || !wallet.mnemonicId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avalabs/avacloud-waas-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React SDK for AvaCloud Wallet as a Service",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -8,7 +8,8 @@
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "dist/**"
+    "dist/**",
+    "public/**"
   ],
   "devDependencies": {
     "@iconify/types": "^2.0.0",
@@ -51,7 +52,7 @@
   "homepage": "https://github.com/ava-labs/avacloud-auth-react#readme",
   "author": "Ava Labs, Inc.",
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react && cp -r public dist/",
     "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"