@authing/react-ui-components 4.4.0-alpha.7 → 4.4.0-alpha.70

package/types/Login/interface.d.ts

@@ -0,0 +1,41 @@
+import { IG2Config, IG2Events, IG2FCProps, IG2FCViewProps } from '../Type';
+import { AuthenticationClient, User } from 'authing-js-sdk';
+import { QrCodeAuthenticationClient } from 'authing-js-sdk/build/main/lib/authentication/QrCodeAuthenticationClient';
+import { Agreement, LoginMethods, SocialConnectionProvider } from '../Type/application';
+export interface LoginConfig extends IG2Config {
+    autoRegister?: boolean;
+    disableResetPwd?: boolean;
+    disableRegister?: boolean;
+    defaultLoginMethod?: LoginMethods;
+    loginMethods?: LoginMethods[];
+    passwordLoginMethods?: string[];
+    socialConnections?: SocialConnectionProvider[];
+    socialConnectionsBtnShape?: 'default' | 'button' | 'icon';
+    enterpriseConnections?: string[];
+    qrCodeScanOptions?: Parameters<QrCodeAuthenticationClient['startScanning']>[1];
+    publicKey?: string;
+    agreementEnabled?: boolean;
+    agreements?: Agreement[];
+    /**
+     * 关闭二维码状态check轮询(console上使用)
+     */
+    _closeLoopCheckQrcode?: boolean;
+}
+export interface LoginEvents extends IG2Events {
+    onLogin?: (user: User, authClient: AuthenticationClient) => void;
+    onLoginError?: (errorMessages: any) => void;
+    onLoginTabChange?: (activeTab: LoginMethods) => void;
+    onBeforeLogin?: (loginInfo: any, authClient: AuthenticationClient) => boolean | Promise<boolean>;
+}
+export interface GuardLoginProps extends IG2FCProps, LoginEvents {
+    config?: Partial<LoginConfig>;
+}
+export interface GuardLoginViewProps extends GuardLoginProps, IG2FCViewProps {
+    config: LoginConfig;
+}
+export interface GuardLoginInitData {
+    specifyDefaultLoginMethod?: LoginMethods;
+    _firstItemInitialValue?: string;
+    _lockMethod?: string;
+}
+export declare const getDefaultLoginConfig: () => LoginConfig;

package/types/Login/multipleAccounts/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LoginWay, StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
+import { GuardModuleType } from '../../Guard';
+interface MultipleAccountsProps {
+    /**
+     * 多账号存储实例
+     */
+    multipleInstance?: StoreInstance;
+    /**
+     * 切换 Guard 方法
+     */
+    changeModule?: (moduleName: GuardModuleType, initData?: any) => Promise<void>;
+    /**
+     * 切换多账号状态
+     */
+    referMultipleState?: (type: 'login' | 'multiple', data?: {
+        account: string;
+        way: LoginWay;
+    }) => void;
+}
+declare const MultipleAccounts: React.NamedExoticComponent<MultipleAccountsProps>;
+export { MultipleAccounts };

package/types/Login/multipleAccounts/panel.d.ts

@@ -0,0 +1,46 @@
+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;
+    way: string;
+}
+declare const SelectPanel: React.FC<SelectPanelProps>;
+export { SelectPanel };

package/types/Login/resetAccountName/businessRequest.d.ts

@@ -0,0 +1,6 @@
+export declare const enum ResetAccountBusinessAction {
+    ResetName = "reset-username-before-auth"
+}
+export declare const authFlow: (action: ResetAccountBusinessAction, content: {
+    username: string;
+}) => Promise<import("../../_utils/http").AuthingGuardResponse<any>>;

package/types/Login/resetAccountName/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import './style.less';
+export declare const ResetAccountName: FC;

package/types/Login/socialLogin/IdpButton/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const IdpButton: (props: any) => JSX.Element | null;

package/types/Login/socialLogin/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './style.less';
+import { GuardLocalConfig } from '../../Guard';
+import { ApplicationConfig, SocialConnectionItem } from '../../Type/application';
+import { StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
+export interface SocialLoginProps {
+    appId: string;
+    config: GuardLocalConfig;
+    onLoginFailed: any;
+    onLoginSuccess: any;
+    enterpriseConnectionObjs: ApplicationConfig['identityProviders'];
+    socialConnectionObjs: SocialConnectionItem[];
+    /**
+     * 根据输入的账号 & 返回获得对应的登录方法
+     */
+    multipleInstance?: StoreInstance;
+}
+export declare const SocialLogin: React.FC<SocialLoginProps>;

package/types/Login/socialLogin/postMessage.d.ts

@@ -0,0 +1,7 @@
+import { AuthingResponse } from '../../_utils/http';
+export declare const usePostMessage: () => (evt: MessageEvent) => import("../../_utils/http").AuthingGuardResponse<any> | {
+    code: any;
+    data: any;
+    onGuardHandling: undefined;
+} | undefined;
+export declare const useErrorHandling: () => (res: AuthingResponse) => import("../../_utils/http").AuthingGuardResponse<any>;

package/types/MFA/VerifyCodeInput/VerifyCodeFormItem.d.ts

@@ -0,0 +1,8 @@
+import { FormItemProps } from 'antd/lib/form';
+import React from 'react';
+import './style.less';
+export interface VerifyCodeFormItemProps extends FormItemProps {
+    codeLength: number;
+    ruleKeyword?: string;
+}
+export declare const VerifyCodeFormItem: React.FC<VerifyCodeFormItemProps>;

package/types/MFA/VerifyCodeInput/index.d.ts

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import './style.less';
+interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    length?: number;
+    size?: string;
+    gutter?: string;
+    onEenter?: Function;
+    showDivider?: boolean;
+    onChange?: any;
+    value?: Array<number | string>;
+    onFinish?: any;
+}
+export declare const VerifyCodeInput: FC<VerifyCodeInputProps>;
+export {};

package/types/MFA/businessRequest.d.ts

@@ -0,0 +1,46 @@
+export declare enum MfaBusinessAction {
+    VerifyEmail = "verify-email",
+    VerifySms = "verify-sms",
+    VerifyTotp = "verify-totp",
+    VerifyFace = "verify-face",
+    AssociateFace = "associate-face"
+}
+export declare const authFlow: (action: MfaBusinessAction, content: any) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+interface VerifySmsContent {
+    phone: string;
+    code: string;
+    mfaToken?: string;
+    phoneCountryCode?: string;
+}
+interface VerifyEmailContent {
+    email: string;
+    code: string;
+    mfaToken?: string;
+}
+interface VerifyTotpContent {
+    totp: string;
+    mfaToken?: string;
+}
+interface VerifyFaceContent {
+    photo: string;
+    mfaToken?: string;
+}
+interface AssociateFaceContent {
+    photoA: string;
+    photoB: string;
+    isExternalPhoto?: boolean;
+    mfaToken?: string;
+}
+export declare const VerifyEmail: (content: VerifyEmailContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+export declare const VerifySms: (content: VerifySmsContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+export declare const VerifyTotp: (content: VerifyTotpContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+export declare const VerifyFace: (content: VerifyFaceContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+export declare const AssociateFace: (content: AssociateFaceContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+export declare const useMfaBusinessRequest: () => {
+    "verify-email": (content: VerifyEmailContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+    "verify-sms": (content: VerifySmsContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+    "verify-totp": (content: VerifyTotpContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+    "verify-face": (content: VerifyFaceContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+    "associate-face": (content: AssociateFaceContent) => Promise<import("../_utils/http").AuthingGuardResponse<any>>;
+};
+export {};

package/types/MFA/codemap.d.ts

@@ -0,0 +1,2 @@
+import { GuardModuleAction } from '../Guard/module';
+export declare const codeMap: Record<number, GuardModuleAction>;

package/types/MFA/core/email.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MFAConfig } from '../interface';
+interface BindMFAEmailProps {
+    mfaToken: string;
+    onBind: (email: string) => void;
+    config: any;
+}
+export declare const BindMFAEmail: React.FC<BindMFAEmailProps>;
+interface VerifyMFAEmailProps {
+    email: string;
+    mfaToken: string;
+    onVerify: (code: number, data: any) => void;
+    sendCodeRef: React.RefObject<HTMLButtonElement>;
+    codeLength: number;
+}
+export declare const VerifyMFAEmail: React.FC<VerifyMFAEmailProps>;
+export declare const MFAEmail: React.FC<{
+    mfaToken: string;
+    email?: string;
+    mfaLogin: any;
+    config: MFAConfig;
+}>;
+export {};

package/types/MFA/core/face.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MFAFace: (props: any) => JSX.Element;

package/types/MFA/core/face_deps.d.ts

@@ -0,0 +1,11 @@
+export declare const devicesConstraints: {
+    video: {
+        width: number;
+        height: number;
+    };
+};
+export declare const FACE_SCORE = 0.65;
+export declare function getFaceDetectorOptions(): any;
+export declare function getCurrentFaceDetectionNet(): any;
+export declare function isFaceDetectionModelLoaded(): boolean;
+export declare function dataURItoBlob(base64Data: any): Blob;

package/types/MFA/core/sms.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { GuardMFAInitData, MFAConfig } from '../interface';
+export interface BindMFASmsProps {
+    mfaToken: string;
+    onBind: (phone: string) => void;
+    config: any;
+    areaCode: string;
+    setAreaCode: (areaCode: string) => void;
+    isInternationSms: boolean;
+}
+export declare const BindMFASms: React.FC<BindMFASmsProps>;
+export interface VerifyMFASmsProps {
+    mfaToken: string;
+    phone: string;
+    onVerify: (code: number, data: any) => void;
+    sendCodeRef: React.RefObject<HTMLButtonElement>;
+    codeLength: number;
+    areaCode: string;
+    phoneCountryCode?: string;
+    isInternationSms: boolean;
+    userPhone?: string;
+}
+export declare const VerifyMFASms: React.FC<VerifyMFASmsProps>;
+export declare const MFASms: React.FC<{
+    mfaLogin: any;
+    config: MFAConfig;
+    initData: GuardMFAInitData;
+}>;

package/types/MFA/core/totp.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { GuardMFAInitData, MFAConfig } from '../interface';
+export interface BindMFATotpProps {
+    initData: GuardMFAInitData;
+    changeModule: any;
+}
+export declare const BindMFATotp: React.FC<BindMFATotpProps>;
+export interface VerifyMFATotpProps {
+    mfaToken: string;
+    mfaLogin: any;
+    changeModule: any;
+}
+export declare const VerifyMFATotp: React.FC<VerifyMFATotpProps>;
+export interface MFATotpProps {
+    changeModule: any;
+    config: MFAConfig;
+    initData: GuardMFAInitData;
+    mfaLogin: any;
+}
+export declare const MFATotp: React.FC<MFATotpProps>;

package/types/MFA/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './styles.less';
+interface MFABackStateContextType {
+    setMfaBackState: React.Dispatch<React.SetStateAction<string>>;
+    mfaBackState: string;
+}
+export declare const MFABackStateContext: React.Context<MFABackStateContextType | undefined>;
+export declare const GuardMFAView: React.FC;
+export {};

package/types/MFA/interface.d.ts

@@ -0,0 +1,43 @@
+import { IG2Config, IG2Events, IG2FCProps } from '../Type';
+import { AuthenticationClient, User } from 'authing-js-sdk';
+export interface MFAConfig extends IG2Config {
+    autoRegister: boolean;
+}
+export declare const getDefaultMFAConfig: () => MFAConfig;
+export interface MFAEvents extends IG2Events {
+    onLogin?: (user: User, authClient: AuthenticationClient) => void;
+}
+export declare enum MFAType {
+    SMS = "SMS",
+    EMAIL = "EMAIL",
+    TOTP = "OTP",
+    FACE = "FACE"
+}
+export interface GuardMFAInitData {
+    mfaToken: string;
+    applicationMfa: {
+        mfaPolicy: MFAType;
+        sort: number;
+        status: 0 | 1;
+    }[];
+    phoneCountryCode?: string;
+    faceMfaEnabled: boolean;
+    totpMfaEnabled: boolean;
+    email?: string;
+    phone?: string;
+    avatar?: string;
+    nickme?: string;
+    username?: string;
+    current?: MFAType;
+    mfaPhoneCountryCode?: string;
+    mfaPhone?: string;
+    mfaEmail?: string;
+}
+export interface GuardMFAProps extends IG2FCProps, MFAEvents {
+    config: Partial<MFAConfig>;
+    initData: GuardMFAInitData;
+}
+export interface GuardMFAViewProps extends GuardMFAProps {
+    config: MFAConfig;
+    initData: GuardMFAInitData;
+}

package/types/MFA/mfaMethods/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MFAType } from '../interface';
+import './style.less';
+export interface MFAMethodsProps {
+    method: MFAType;
+    onChangeMethod: (type: MFAType) => void;
+}
+export declare const MFAMethods: React.FC<MFAMethodsProps>;

package/types/NeedHelpView/core/describeQuestions.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface describeQuestionsProps {
+    appId: string;
+    host: string;
+    onSuccess: any;
+}
+export declare const DescribeQuestions: (props: describeQuestionsProps) => JSX.Element;
+export {};

package/types/NeedHelpView/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GuardNeedHelpView: (props: any) => JSX.Element;

package/types/NewSubmitSuccess/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GuardNewSubmitSuccessView: React.FC;

package/types/NewSubmitSuccess/interface.d.ts

@@ -0,0 +1,19 @@
+import { GuardModuleType } from '../Guard';
+import { IG2Config, IG2Events, IG2FCViewProps } from '../Type';
+export interface SubmitSuccessEvents extends IG2Events {
+}
+export interface SubmitSuccessConfig extends IG2Config {
+}
+export interface SubmitSuccessInitData {
+    title?: string;
+    message?: string;
+    text?: string;
+    countDesc?: string;
+    changeModule?: GuardModuleType;
+    needBack?: boolean;
+    goBack?: () => void;
+}
+export interface GuardNewSubmitSuccessViewProps extends IG2FCViewProps, SubmitSuccessEvents {
+    config: SubmitSuccessConfig;
+    initData?: SubmitSuccessInitData;
+}

package/types/Qrcode/UiQrCode.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './index.less';
+import { CodeStatusDescriptions } from './WorkQrCode';
+export declare type CodeStatus = 'loading' | 'ready' | 'already' | 'success' | 'error' | 'expired' | 'cancel' | 'MFA';
+export declare const prefix: string;
+export interface UiQrProps {
+    /**
+     * Loading 组件
+     */
+    loadingComponent?: React.ReactElement;
+    /**
+     * 二维码组件三种状态
+     * ready 准备状态
+     * already 已扫描状态
+     * success 扫描成功/登录成功状态
+     * error 错误状态（超时、网络错误）
+     */
+    status: CodeStatus;
+    /**
+     * 二维码 URL
+     */
+    src?: string;
+    /**
+     * 二维码底部内容
+     */
+    descriptions: CodeStatusDescriptions;
+    /**
+     * 外层 container 样式
+     */
+    containerStyle?: React.CSSProperties;
+    /**
+     * 内层 container 样式(图片)
+     */
+    imageStyle?: React.CSSProperties;
+    /**
+     * 二维码图片准备好的回调
+     */
+    onLoad?: () => void;
+    /**
+     * 点击遮罩中的内容区
+     * status 当前组件所处状态
+     */
+    onClickMaskEl?: (status: CodeStatus) => void;
+    /**
+     * 点击全部遮罩区域
+     * status 当前组件所处状态
+     */
+    onMaskContent?: (status: CodeStatus) => void;
+}
+declare const UiQrCode: React.NamedExoticComponent<UiQrProps>;
+export { UiQrCode };

package/types/Qrcode/WorkQrCode.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { QrCodeResponse } from './hooks/usePostQrCode';
+import { CodeStatus, UiQrProps } from './UiQrCode';
+/**
+ * 二维码不同状态下的底部描述文字
+ */
+export declare type CodeStatusDescriptions = Partial<Record<Exclude<CodeStatus, 'loading'>, React.ReactNode | ((referQrCode?: () => void) => React.ReactNode)>>;
+export interface WorkQrCodeRef {
+    referQrCode: () => Promise<{
+        random: string;
+        url: string;
+    } | undefined>;
+}
+interface WorkQrCodeProps extends Omit<UiQrProps, 'description' | 'status'> {
+    /**
+     * 二维码场景
+     */
+    scene: 'WXAPP_AUTH' | 'APP_AUTH' | 'WECHATMP_AUTH';
+    /**
+     * 不同状态请求文字
+     */
+    descriptions: CodeStatusDescriptions;
+    /**
+     * 睡眠时间 默认 1000
+     */
+    sleepTime?: number;
+    /**
+     * 每当状态变化时，触发的 callback 。
+     */
+    onStatusChange?: (status: CodeStatus, data: QrCodeResponse) => void;
+    /**
+     * 不同状态下点击遮罩中间区域方法
+     */
+    onClickMaskContent?: (status: CodeStatus) => void;
+    /**
+     * 不同二维码下生成配置
+     */
+    qrCodeScanOptions?: any;
+}
+declare const WorkQrCode: React.ForwardRefExoticComponent<WorkQrCodeProps & React.RefAttributes<any>>;
+export { WorkQrCode };

package/types/Qrcode/hooks/useImage.d.ts

@@ -0,0 +1,4 @@
+declare const useImage: (src: string | undefined, options: {
+    onLoad?: (() => void) | undefined;
+}) => (string | undefined)[];
+export { useImage };

package/types/Qrcode/hooks/usePostQrCode.d.ts

@@ -0,0 +1,72 @@
+/// <reference types="react" />
+import { AuthingGuardResponse, AuthingResponse } from '../../_utils/http';
+import { CodeStatus } from '../UiQrCode';
+import { CodeStatusDescriptions } from '../WorkQrCode';
+import { ReducerType, RootState } from './usePreQrCode';
+export interface QrCodeResponse {
+    /**
+     * 根据状态确定不同的流程
+     */
+    status: number;
+    /**
+     * 返回的随机值
+     */
+    random: number;
+    /**
+     * 返回的用户信息
+     */
+    userInfo?: any;
+    /**
+     * 扫码成功后 Tick 换取用户信息
+     */
+    ticket?: string;
+    /**
+     * MFA 状态下的返回
+     */
+    scannedResult?: AuthingResponse;
+}
+/**
+ * 二维码请求相关
+ */
+interface QrCodeRequest {
+    genCodeRequest?: () => Promise<AuthingGuardResponse<{
+        random: string;
+        url: string;
+    }>>;
+    /**
+     * 未扫码下的请求方法
+     */
+    readyCheckedRequest?: () => Promise<AuthingGuardResponse<QrCodeResponse>>;
+    /**
+     * 已经扫码下的请求方法（待确认）
+     */
+    alreadyCheckedRequest?: () => Promise<AuthingGuardResponse<QrCodeResponse>>;
+    /**
+     * 使用 ticket 交换用户信息
+     */
+    exchangeUserInfo?: (ticket: string) => Promise<any>;
+}
+interface QrCodeOptions {
+    state: RootState;
+    dispatch: React.Dispatch<{
+        type: ReducerType;
+        payload: Partial<RootState>;
+    }>;
+    descriptions: CodeStatusDescriptions;
+    /**
+     * check 轮询间隔时间
+     */
+    sleepTime?: number;
+    /**
+     * 状态改变时触发事件，仅在 Server 返回的二维码状态改变时进行触发
+     */
+    onStatusChange?: (status: CodeStatus, data: QrCodeResponse) => void;
+}
+/**
+ * 二维码处理阶段
+ * 二维码处理阶段分为两个主要流程
+ * 1. 同一状态下的轮询逻辑处理
+ * 2. 根据不同返回状态码进行处理
+ */
+export declare const useQrCode: (options: QrCodeOptions, request: QrCodeRequest) => void;
+export {};

package/types/Qrcode/hooks/usePreQrCode.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { CodeStatus } from '../UiQrCode';
+export declare type ReducerType = 'change' | 'changeStatus' | 'changeDesc';
+export declare type RootState = {
+    /**
+     * 状态
+     */
+    status: CodeStatus;
+    /**
+     * 底部描述
+     */
+    /**
+     * 当前二维码 URL
+     */
+    src?: string;
+    /**
+     * 二维码随机值
+     */
+    random?: string;
+};
+/**
+ * QrCode 准备阶段 Hook
+ */
+declare const usePreQrCode: () => {
+    state: RootState;
+    dispatch: import("react").Dispatch<{
+        type: ReducerType;
+        payload: Partial<RootState>;
+    }>;
+};
+export { usePreQrCode };

package/types/Qrcode/hooks/useStatus.d.ts

@@ -0,0 +1,7 @@
+import { CodeStatus } from '../UiQrCode';
+/**
+ * 根据不同状态添加不同的元素
+ * 维护不同状态的处理
+ */
+declare const useStatus: (status: CodeStatus) => ({} | null | undefined)[];
+export { useStatus };

package/types/Qrcode/index.d.ts

@@ -0,0 +1,7 @@
+import { UiQrCode } from './UiQrCode';
+import { WorkQrCode } from './WorkQrCode';
+declare type IQrCode = typeof WorkQrCode & {
+    UI: typeof UiQrCode;
+};
+declare const QrCode: IQrCode;
+export { QrCode };

package/types/RecoveryCode/businessRequest.d.ts

@@ -0,0 +1,5 @@
+export declare enum TotpRecoveryCodeBusinessAction {
+    RecoveryTotp = "recovery-totp",
+    ConfirmTotpRecoveryCode = "confirm-totp-recovery-code"
+}
+export declare function authFlow<T>(action: TotpRecoveryCodeBusinessAction, content: any): Promise<import("../_utils/http").AuthingGuardResponse<T>>;

package/types/RecoveryCode/core/saveCode.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SaveCode: React.FC<{
+    secret: string;
+    onBind: any;
+}>;