Skip to main content

Variable.KeybanInput

const KeybanInput: ForwardRefExoticComponent<ContainerProps & InputProps & {
  inputStyles?: Pick<{
  }, "color" | "backgroundColor" | "colorScheme" | "fontSize" | "textAlign">;
  name: string;
  onBlur?: () => void;
  onChange?: () => void;
  onFocus?: () => void;
  onInput?: () => void;
} & RefAttributes<KeybanInputRef>>;

KeybanInput renders a secure iframe-based input component for the Keyban SDK client. This component provides a secure way to handle sensitive user inputs like emails, phone numbers, passwords, and OTP codes by isolating them in a sandboxed iframe.

Param​

KeybanInput props

Returns​

The iframe element for SDK client input.

Examples​

Basic email input:

<KeybanInput
  name="email"
  type="email"
/>

Phone number input:

<KeybanInput
  name="phone"
  type="tel"
/>

OTP code input with custom styling:

<KeybanInput
  name="otp"
  inputMode="numeric"
  inputStyles={{ textAlign: "center" }}
/>

Password input:

<KeybanInput
  name="password"
  type="password"
/>

Integration with Material-UI TextField:

<TextField
  label="Email"
  variant="outlined"
  fullWidth
  slots={{
    htmlInput: () => (
      <Box
        component={KeybanInput}
        name="email"
        type="email"
        sx={{ flexGrow: 1 }}
      />
    ),
  }}
/>

Integration with MUI Tel Input:

const PhoneInput = () => (
  <Box
    component={KeybanInput}
    type="tel"
    name="phone"
    sx={{ flexGrow: 1, p: 2, pl: 0 }}
  />
);

<MuiTelInput
  name="phone"
  defaultCountry="FR"
  fullWidth
  slots={{ htmlInput: PhoneInput }}
/>

With event handlers:

<KeybanInput
  name="email"
  type="email"
  onFocus={() => console.log('Input focused')}
  onBlur={() => console.log('Input blurred')}
  onInput={() => console.log('Input changed')}
/>

Using with forwardRef for focus control:

const inputRef = useRef<KeybanInputRef>(null);

const handleFocus = () => {
  inputRef.current?.focus();
};

<KeybanInput
  ref={inputRef}
  name="email"
  type="email"
/>

Remarks​

Common Use Cases:

  • Authentication flows: Email/password login, passwordless authentication
  • OTP verification: SMS or email verification codes
  • Phone number input: International phone numbers with country codes
  • Secure form inputs: Any sensitive user data that needs to be handled securely

Integration Patterns:

  • Standalone: Direct usage as a form input
  • Material-UI: Integration with TextField using slots
  • Custom components: Wrapped in Box or other container components
  • Third-party libraries: Integration with specialized input libraries like MUI Tel Input

Security Features:

  • Iframe isolation: Input is rendered in a sandboxed iframe for security
  • Cross-origin messaging: Secure communication between iframe and parent
  • No direct DOM access: Input values are not accessible from the parent context

Styling Options:

  • Container styling: Use style and className props for container appearance
  • Input styling: Use inputStyles prop for iframe input appearance
  • Theme integration: Automatically inherits color scheme from parent document

See​