Skip to main content
The setCredentialsValidator handler returned by useHotglue registers custom validation for credential forms in Widget v3 before the widget sends a link or relink request.

​
Types

type CredentialsFormValidationResult =
  | { success: true }
  | { success: false; errorMessage: string };

type CredentialsValidator<TConfig> = (
  oldConfig: TConfig | undefined,
  newConfig: TConfig,
  availableEntity: Record<string, unknown>,
  flowId: string,
  tenantId?: string
) =>
  | CredentialsFormValidationResult
  | Promise<CredentialsFormValidationResult>;

setCredentialsValidator<TConfig>(
  validator: CredentialsValidator<TConfig>
): void;
The generic passed to setCredentialsValidator<TConfig>() types both oldConfig and newConfig in the validator.

​
Parameters

  • oldConfig: The connector configuration already saved for the tenant. This is undefined when there is no existing config yet.
  • newConfig: The values the user just entered in the widget form.
  • availableEntity: The selected source, target, or connector metadata for the current link flow. This is provided as context.
  • flowId: The flow being linked or relinked. This is provided as context.
  • tenantId: The tenant id for the current session, when available. This is provided as context.

​
Behavior

  • Return { success: true } when the credentials are valid.
  • Return { success: false, errorMessage: string } when the credentials are invalid. The widget stops submission and shows the message in the form.
  • You can return the result directly or asynchronously from a promise.

​
React Example

const { setCredentialsValidator } = useHotglue({
  tenantId,
  environmentId,
  apiKey,
});

setCredentialsValidator<{ api_key: string }>(async (
  oldConfig,
  newConfig,
  availableEntity,
  flowId,
  tenantId,
) => {
  if (!newConfig.api_key) {
    return {
      success: false,
      errorMessage: 'API key is required',
    };
  }

  return { success: true };
});