@authing/react-ui-components 3.1.37 → 3.1.39

package/lib/index.d.ts

@@ -1575,6 +1575,329 @@ declare module '@authing/react-ui-components/components/Guard/config' {
   }
   export const getDefaultGuardLocalConfig: () => GuardLocalConfig;
 
+}
+declare module '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts' {
+  /**
+   * 整体的思路：
+   * 在所有登录方式中，当进行登录时保存登录方式（FE侧自定义）
+   * 之后在登录成功（onLogin）中，触发store的方法保存用户信息以及对应的登录方式进入localStorage。
+   * 当用户再次打开页面时，拿出数据进行对比。（主要对比 LoginWay ），TODO: 这里的代码主要显得乱的原因是因为枚举的不正当使用。（主要要和Server端进行互相映射，后续维护时可优化）
+   *
+   * 核心思路：登录成功时，保存的FE侧自定义 LoginWay
+   * 再次打开页面时，初始化时先根据 FE 自定义的 LoginWay 跳转到不同的 tab 下（way）下使用 account 进行回填。TODO: 这里也可优化，应该在登录成功时候就进行 LoginWay 的格式化，而非转来转去。（但是这样无法直观的体现是哪种方式进行登录）
+  */
+  import { SelectOptions } from '@authing/react-ui-components/components/Login/multipleAccounts/panel';
+  export const QR_CODE_WAY: LoginWay[];
+  /**
+   * 登录时所有支持的登录列表(前端定义列表)
+   * 这里稍微有点乱 因为Login中的登录方式和这里的不匹配，暂时放在了一起
+   */
+  export type LoginWay = 'email' | 'phone' | 'password' | 'phone-code' | 'email-code' | 'social' | 'wechat-miniprogram-qrcode' | 'wechatmp-qrcode' | 'app-qrcode' | 'ad' | 'ldap' | 'ldap-password' | 'ldap-email' | 'ldap-phone';
+  /**
+   * when： 多账号页面跳转进入登录页面
+   * 携带的回填数据信息
+   */
+  export interface BackFillMultipleState extends Omit<User, 'id' | 'name' | 'nickname' | 'username' | 'phone' | 'email' | 'photo' | '_updateTime'> {
+      /**
+       * 回填的账号名称 邮箱/用户名/手机
+        */
+      account: string;
+  }
+  /**
+   * Store instance
+   */
+  export type StoreInstance = ReturnType<MultipleAccount['getStore']>;
+  /**
+   * 当前 userId 对应的类型
+   */
+  export interface CurrentStore {
+      [id: string]: User;
+  }
+  export interface User {
+      /**
+       * userId
+       */
+      id: string;
+      /**
+       * Tab 栏状态
+       */
+      tab: 'input' | 'qrcode';
+      /**
+       * 登录方式
+       */
+      way: LoginWay;
+      /**
+       * 姓名
+       */
+      name?: string | null;
+      /**
+       * 昵称
+       */
+      nickname?: string | null;
+      /**
+       * 用户名
+       */
+      username?: string | null;
+      /**
+       * 手机号
+       */
+      phone?: string | null;
+      /**
+       * 邮箱
+       */
+      email?: string | null;
+      /**
+       * 头像
+       */
+      photo?: string | null;
+      /**
+       * qrCodeId 对应的ID
+       */
+      qrCodeId?: string;
+      /**
+       * 国际化短信区号
+       */
+      phoneCountryCode?: string;
+      /**
+       * 国际化短信选择框回填
+       */
+      areaCode?: string;
+      /**
+       * 登录时间
+       */
+      _updateTime?: string;
+  }
+  class MultipleAccount {
+      /**
+       * 原始的登录账号
+      */
+      private originAccount;
+      private originWay;
+      /**
+       * 原始的 localStore 值
+       */
+      private originStore;
+      /**
+       * 当前 AppId Store
+       */
+      private currentStore;
+      /**
+       * 单账号直接回填
+       */
+      private firstBackFillData?;
+      /**
+      * server 返回支持的登录方式
+      */
+      private serverSideLoginMethods;
+      /**
+       * 是否显示多账号登录页面
+       * true 存在
+       */
+      private memberState;
+      /**
+     * 二维码登录时的ID
+     */
+      private qrCodeId?;
+      /**
+     * 国际化短信前缀 区号
+     */
+      private phoneCountryCode?;
+      /**
+    * 国际化短信前缀 选中地区编号
+    */
+      private areaCode?;
+      private tabStatus?;
+      /**
+       * 当前登录二级状态
+       */
+      private loginWay?;
+      private appId;
+      /**
+       * 是否开启国际化短信
+       */
+      private isInternationSms?;
+      constructor();
+      /**
+       * 页面首次加载时初始化 Store
+       * 从 LocalStore 中拿值 放到这里来
+       */
+      private initStore;
+      /**
+       * 初始化记住账号相关信息
+       * @param normalCount
+       * @returns
+       */
+      private initMemberState;
+      /**
+       * 获取当前ID下有效账号个数
+       * @returns qrCount 有效的二维码登录个数 normalCount 有效的账号登录方式
+       */
+      private memberStateCount;
+      /**
+       * 初始化第一次的数据 TODO: 逻辑有点脏 待整理
+       */
+      private initBackfillData;
+      /**
+       * 根据前端存储的登录方式返回后端映射方式
+       * @param front
+       */
+      private getServerLoginMethodByFront;
+      /**
+       * 当前 Store  DONE
+       */
+      private getCurrentStore;
+      /**
+       * 国际化短信过滤
+       * true 表示通过 需要保留
+       * false 表示不通过 需要过滤
+       */
+      private validateInternationSms;
+      /**
+       * 校验有效的登录方式账号
+       * @param user
+       * @param serverSideLoginMethods
+       * @returns
+       */
+      private validateMethod;
+      /**
+       *
+       * @param tab 一级Tab状态
+       * @param way 二级Tab状态
+       * @param id 二维码登录时 记录对应的二维码 ID
+       */
+      private setLoginWay;
+      /**
+       * 设置/更新 store 内的用户信息
+       */
+      private setUserInfo;
+      /**
+       * 持久化保存
+       */
+      private saveStore;
+      /**
+       * 根据登录的 account 判断本次登录的方式
+       * @param account 登录输入的账号
+       * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+       * @returns
+       */
+      private setLoginWayByHttpData;
+      /**
+     * 根据登录的 account 判断本次LDAP登录方式
+     * @param account 登录输入的账号
+     * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+     * @returns
+     */
+      private setLoginWayByLDAPData;
+      /**
+       * 根据用户 ID 删除 localStorage 中当前用户 ID
+       */
+      private delUserById;
+      /**
+       * 获得多账号登录页面的所有用户列表
+       * @param excludeWays
+       */
+      private getMemoUser;
+      /**
+       * 根据 id 获得当前已登录的用户信息
+       * @param userId
+       * @returns User / undefined
+       */
+      private getMemoSingleUser;
+      /**
+       * 该方法仅仅需要回填账号的登录方式，其他都不计入
+       * 当用户名/手机号/邮箱/AD/LDAP 相同时，根据登录顺序匹配不同的账号
+       * 根据记住的用户登录方式获取对应的登录账户名
+       * @param way
+       * @param user
+       * @returns
+       */
+      private getAccountByWay;
+      private _mappingUser;
+      /**
+       * 外部暴露方法
+       */
+      getStore: () => {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      };
+  }
+  /**
+   * MultipleAccounts 相关 Hook
+   * Finally Config 类型过滤
+   */
+  const useMultipleAccounts: ({ appId, finallyConfig }: {
+      appId?: string | undefined;
+      finallyConfig?: any;
+  }) => {
+      instance: {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      } | undefined;
+      isMultipleAccount: boolean;
+      referMultipleState: (type: 'login' | 'multiple', data?: BackFillMultipleState | undefined) => void;
+      multipleAccountData: BackFillMultipleState | undefined;
+      clearBackFillData: () => void;
+  };
+  export default useMultipleAccounts;
+
 }
 declare module '@authing/react-ui-components/components/Guard/core/index' {
   /// <reference types="react" />
@@ -1634,7 +1957,39 @@ declare module '@authing/react-ui-components/components/Guard/event' {
   export interface GuardEvents extends LoginEvents, RegisterEvents, CompleteInfoEvents, ForgetPasswordEvents, IdentityBindingEvents, IdentityBindingAskEvents {
       onBeforeChangeModule?: (key: GuardModuleType, initData?: any) => boolean | Promise<boolean>;
   }
-  export const guardEventsFilter: (props: any, openEventsMapping?: boolean | undefined) => GuardEvents;
+  export const guardEventsFilter: (props: any, multipleInstance?: {
+      initStore: (appId: string, options: {
+          serverSideLoginMethods: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[];
+          isInternationSms: boolean;
+      }) => void;
+      setLoginWay: (tab: "input" | "qrcode", way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay, id?: string | undefined, internation?: {
+          phoneCountryCode: string;
+          areaCode: string;
+      } | undefined) => void;
+      setUserInfo: (user: Pick<import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").User & {
+          id: string;
+      }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+      setLoginWayByHttpData: (account: string, data: {
+          username?: string | undefined;
+          phone?: string | undefined;
+          email?: string | undefined;
+      }) => void;
+      setLoginWayByLDAPData: (account: string, data: {
+          name?: string | undefined;
+          phone?: string | undefined;
+          email?: string | undefined;
+      }) => void;
+      getMemoUser: (excludeWays?: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[]) => import("../Login/multipleAccounts/panel").SelectOptions[];
+      getMemoSingleUser: (id: string) => {
+          way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay;
+          account: string;
+      } | undefined;
+      delUserById: (id: string) => string;
+      getMemberState: () => boolean;
+      getFirstBackFillData: () => import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").BackFillMultipleState | undefined;
+      getOriginAccount: () => string;
+      getOriginWay: () => string;
+  } | undefined, openEventsMapping?: boolean | undefined) => GuardEvents;
   export const guardEventsHijacking: (events: GuardEvents, openEventsMapping?: boolean | undefined) => GuardEvents;
   export const GuardEventsCamelToKebabMapping: {
       readonly onLoad: "load";
@@ -1926,6 +2281,7 @@ declare module '@authing/react-ui-components/components/Login/codemap' {
 declare module '@authing/react-ui-components/components/Login/core/withAD' {
   /// <reference types="react" />
   import { Agreement } from '@authing/react-ui-components/components/AuthingGuard/api/index';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithADProps {
       publicKey: string;
       autoRegister?: boolean;
@@ -1933,6 +2289,14 @@ declare module '@authing/react-ui-components/components/Login/core/withAD' {
       onLoginFailed: any;
       onBeforeLogin: any;
       agreements: Agreement[];
+      /**
+       * 回填的数据
+       */
+      backfillData?: BackFillMultipleState;
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
   }
   export const LoginWithAD: (props: LoginWithADProps) => JSX.Element;
   export {};
@@ -1940,10 +2304,12 @@ declare module '@authing/react-ui-components/components/Login/core/withAD' {
 }
 declare module '@authing/react-ui-components/components/Login/core/withAppQrcode' {
   /// <reference types="react" />
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithAppQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
       qrCodeScanOptions: any;
+      multipleInstance?: StoreInstance;
   }
   export const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element;
   export {};
@@ -1952,6 +2318,7 @@ declare module '@authing/react-ui-components/components/Login/core/withAppQrcode
 declare module '@authing/react-ui-components/components/Login/core/withLDAP' {
   /// <reference types="react" />
   import { Agreement } from '@authing/react-ui-components/components/AuthingGuard/api/index';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithLDAPProps {
       publicKey: string;
       autoRegister?: boolean;
@@ -1960,6 +2327,14 @@ declare module '@authing/react-ui-components/components/Login/core/withLDAP' {
       onLoginFailed: any;
       onBeforeLogin: any;
       agreements: Agreement[];
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
+      /**
+       * 多账号回填的数据
+       */
+      backfillData?: BackFillMultipleState;
   }
   export const LoginWithLDAP: (props: LoginWithLDAPProps) => JSX.Element;
   export {};
@@ -2000,6 +2375,7 @@ declare module '@authing/react-ui-components/components/Login/core/withPassword/
   import { Agreement, PasswordLoginMethods } from '@authing/react-ui-components/components/AuthingGuard/api/index';
   import { LoginMethods } from '@authing/react-ui-components/components/index';
   import { AuthingResponse } from '@authing/react-ui-components/components/_utils/http';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithPasswordProps {
       publicKey: string;
       autoRegister?: boolean;
@@ -2013,6 +2389,14 @@ declare module '@authing/react-ui-components/components/Login/core/withPassword/
       loginWay?: LoginMethods;
       submitButText?: string;
       saveIdentify?: (type: LoginMethods, identity: string) => void;
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
+      /**
+       * 多账号回填的数据
+       */
+      backfillData?: BackFillMultipleState;
   }
   export const LoginWithPassword: (props: LoginWithPasswordProps) => JSX.Element;
   export {};
@@ -2046,6 +2430,10 @@ declare module '@authing/react-ui-components/components/Login/core/withVerifyCod
   import React, { FC } from 'react';
   import './styles.less';
   export interface VirtualDropdownProps {
+      /**
+       * 回填的国际化区号
+       */
+      regionCode?: string;
       value?: string;
       onChange?: (value: string) => void;
       style?: React.CSSProperties;
@@ -2056,7 +2444,8 @@ declare module '@authing/react-ui-components/components/Login/core/withVerifyCod
 declare module '@authing/react-ui-components/components/Login/core/withVerifyCode/index' {
   /// <reference types="react" />
   import './styles.less';
-  export const LoginWithVerifyCode: (props: any) => JSX.Element;
+  const LoginWithVerifyCode: (props: any) => JSX.Element;
+  export { LoginWithVerifyCode };
 
 }
 declare module '@authing/react-ui-components/components/Login/core/withVerifyCode/inputIdentify' {
@@ -2071,10 +2460,13 @@ declare module '@authing/react-ui-components/components/Login/core/withVerifyCod
 }
 declare module '@authing/react-ui-components/components/Login/core/withWechatMiniQrcode' {
   /// <reference types="react" />
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithWechatMiniQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
       qrCodeScanOptions: any;
+      id: string;
+      multipleInstance?: StoreInstance;
   }
   export const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element;
   export {};
@@ -2082,14 +2474,85 @@ declare module '@authing/react-ui-components/components/Login/core/withWechatMin
 }
 declare module '@authing/react-ui-components/components/Login/core/withWechatmpQrcode' {
   /// <reference types="react" />
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   interface LoginWithWechatmpQrcodeProps {
       onLoginSuccess: any;
       canLoop: boolean;
       qrCodeScanOptions: any;
+      id: string;
+      /**
+       * 多账号存储实例
+       */
+      multipleInstance?: StoreInstance;
   }
   export const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element;
   export {};
 
+}
+declare module '@authing/react-ui-components/components/Login/hooks/useLoginMultiple' {
+  /// <reference types="react" />
+  import { FormInstance } from 'antd/lib/form';
+  import { BackFillMultipleState, LoginWay } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
+  /**
+   * 多账号登录下 账户 & 登录方式自动回填
+   * TODO: HOOK 参数有时间整理成为对象，开始没有想到有这么多
+   * 调用地方 core 中需要回填的两个登录方式
+   */
+  function useLoginMultipleBackFill(options: {
+      form: FormInstance<any>;
+      way: LoginWay;
+      formKey: string;
+      backfillData?: BackFillMultipleState;
+      isOnlyInternationSms?: boolean;
+      setAreaCode?: React.Dispatch<React.SetStateAction<string>>;
+      cancelBackfill?: boolean;
+  }): void;
+  /**
+   * 多账号统一状态管理
+   * @param setLoginWay
+   * @returns
+   */
+  function useLoginMultiple(setLoginWay: React.Dispatch<any>): {
+      isMultipleAccount: boolean;
+      multipleInstance: {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: "input" | "qrcode", way: LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: LoginWay[]) => import("@authing/react-ui-components/components/Login/multipleAccounts/panel").SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      } | undefined;
+      referMultipleState: ((type: "login" | "multiple") => void) | undefined;
+      backfillData: BackFillMultipleState | undefined;
+      defaultQrWay: string | undefined;
+  };
+  export { useLoginMultipleBackFill, useLoginMultiple };
+
 }
 declare module '@authing/react-ui-components/components/Login/index' {
   /// <reference types="react" />
@@ -2138,6 +2601,79 @@ declare module '@authing/react-ui-components/components/Login/interface' {
   }
   export const getDefaultLoginConfig: () => LoginConfig;
 
+}
+declare module '@authing/react-ui-components/components/Login/multipleAccounts/index' {
+  import React from 'react';
+  import { LoginWay, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
+  import { GuardModuleType } from '@authing/react-ui-components/components/Guard/index';
+  interface MultipleAccountsProps {
+      /**
+       * 多账号存储实例
+       */
+      multipleInstance?: StoreInstance;
+      /**
+       * 切换 Guard 方法
+       */
+      changeModule?: (moduleName: GuardModuleType, initData?: any) => Promise<void>;
+      /**
+       * 切换多账号状态
+       */
+      referMultipleState?: (type: 'login' | 'multiple', data?: {
+          account: string;
+          way: LoginWay;
+      }) => void;
+  }
+  const MultipleAccounts: React.NamedExoticComponent<MultipleAccountsProps>;
+  export { MultipleAccounts };
+
+}
+declare module '@authing/react-ui-components/components/Login/multipleAccounts/panel' {
+  import React from 'react';
+  import './style.less';
+  interface SelectPanelProps {
+      lists: SelectOptions[];
+      /**
+       * 点击删除
+       */
+      handleDel: (id: string) => void;
+      /**
+       * 点击 li
+       */
+      onClick: (id: string) => void;
+  }
+  export interface SelectOptions {
+      /**
+       * 头像
+       */
+      photo?: string;
+      /**
+       * 标题
+       */
+      title?: string;
+      /**
+       * 描述
+       */
+      description?: string;
+      /**
+       * 用户 ID 唯一标识符
+       */
+      id: string | 'other';
+      /**
+       * 显示操作栏 default: true
+       */
+      operation?: boolean;
+      /**
+       * 登录时间
+       */
+      _updateTime: number;
+      /**
+       * 替代图片元素
+       */
+      element?: React.ReactElement;
+  }
+  const SelectPanel: React.FC<SelectPanelProps>;
+  export { SelectPanel };
+
 }
 declare module '@authing/react-ui-components/components/Login/socialLogin/IdpButton/index' {
   /// <reference types="react" />
@@ -2149,6 +2685,7 @@ declare module '@authing/react-ui-components/components/Login/socialLogin/index'
   import { ApplicationConfig, SocialConnectionItem } from '@authing/react-ui-components/components/AuthingGuard/api/index';
   import './style.less';
   import { GuardLocalConfig } from '@authing/react-ui-components/components/Guard/index';
+  import { StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   export interface SocialLoginProps {
       appId: string;
       config: GuardLocalConfig;
@@ -2156,6 +2693,10 @@ declare module '@authing/react-ui-components/components/Login/socialLogin/index'
       onLoginSuccess: any;
       enterpriseConnectionObjs: ApplicationConfig['identityProviders'];
       socialConnectionObjs: SocialConnectionItem[];
+      /**
+       * 根据输入的账号 & 返回获得对应的登录方法
+       */
+      multipleInstance?: StoreInstance;
   }
   export const SocialLogin: React.FC<SocialLoginProps>;
 
@@ -3021,6 +3562,7 @@ declare module '@authing/react-ui-components/components/_utils/context' {
   import React from 'react';
   import { GuardEvents, GuardLocalConfig, GuardModuleType, GuardPageConfig } from '@authing/react-ui-components/components/index';
   import { ApplicationConfig } from '@authing/react-ui-components/components/AuthingGuard/api/index';
+  import { BackFillMultipleState, StoreInstance } from '@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts';
   import { ModuleState } from '@authing/react-ui-components/components/Guard/GuardModule/stateMachine';
   import { GuardHttp } from '@authing/react-ui-components/components/_utils/guardHttp';
   export interface IGuardContext {
@@ -3038,6 +3580,29 @@ declare module '@authing/react-ui-components/components/_utils/context' {
       isAuthFlow: boolean;
       contextLoaded: boolean;
       guardPageConfig: Partial<GuardPageConfig>;
+      multipleInstance: {
+          /**
+           * 多账号相关
+           */
+          isMultipleAccount: boolean;
+          /**
+           * when： 多账号页面跳转进入登录页面
+           * 携带的回填数据信息
+           */
+          multipleAccountData?: BackFillMultipleState;
+          /**
+           * 多账号 store 实例
+           */
+          instance?: StoreInstance;
+          /**
+           * 切换多账号 isMultipleAccount 状态
+           */
+          referMultipleState?: (type: 'login' | 'multiple') => void;
+          /**
+           * 清空回填数据
+           */
+          clearBackFillData?: () => void;
+      };
   }
   export const createGuardXContext: () => {
       Provider: React.FC<{
@@ -3075,6 +3640,64 @@ declare module '@authing/react-ui-components/components/_utils/context' {
   export const useGuardContextLoaded: () => boolean;
   export const useGuardIsAuthFlow: () => boolean;
   export const useGuardPageConfig: () => Partial<GuardPageConfig>;
+  /**
+   * 多账号登录 store 实例
+   */
+  export const useGuardMultipleInstance: () => {
+      /**
+       * 多账号相关
+       */
+      isMultipleAccount: boolean;
+      /**
+       * when： 多账号页面跳转进入登录页面
+       * 携带的回填数据信息
+       */
+      multipleAccountData?: BackFillMultipleState | undefined;
+      /**
+       * 多账号 store 实例
+       */
+      instance?: {
+          initStore: (appId: string, options: {
+              serverSideLoginMethods: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[];
+              isInternationSms: boolean;
+          }) => void;
+          setLoginWay: (tab: "input" | "qrcode", way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay, id?: string | undefined, internation?: {
+              phoneCountryCode: string;
+              areaCode: string;
+          } | undefined) => void;
+          setUserInfo: (user: Pick<import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").User & {
+              id: string;
+          }, "email" | "username" | "phone" | "id" | "nickname" | "photo" | "name" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+          setLoginWayByHttpData: (account: string, data: {
+              username?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          setLoginWayByLDAPData: (account: string, data: {
+              name?: string | undefined;
+              phone?: string | undefined;
+              email?: string | undefined;
+          }) => void;
+          getMemoUser: (excludeWays?: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay[]) => import("../Login/multipleAccounts/panel").SelectOptions[];
+          getMemoSingleUser: (id: string) => {
+              way: import("@authing/react-ui-components/components/Guard/core/hooks/useMultipleAccounts").LoginWay;
+              account: string;
+          } | undefined;
+          delUserById: (id: string) => string;
+          getMemberState: () => boolean;
+          getFirstBackFillData: () => BackFillMultipleState | undefined;
+          getOriginAccount: () => string;
+          getOriginWay: () => string;
+      } | undefined;
+      /**
+       * 切换多账号 isMultipleAccount 状态
+       */
+      referMultipleState?: ((type: 'login' | 'multiple') => void) | undefined;
+      /**
+       * 清空回填数据
+       */
+      clearBackFillData?: (() => void) | undefined;
+  };
 
 }
 declare module '@authing/react-ui-components/components/_utils/corsVerification' {
@@ -3543,7 +4166,7 @@ declare module '@authing/react-ui-components/components/version/index' {
 
 }
 declare module '@authing/react-ui-components/components/version/version' {
-  const _default: "3.1.37";
+  const _default: "3.1.39";
   export default _default;
 
 }