Hosted sign-in page configuration interfaces

This article describes the UiConfig, ExtendedTenantUiConfig, and SignInOption interfaces that are available when creating a sign-in page for Identity-Aware Proxy using Cloud Run.

UiConfig

interface UiConfig {
  // The API key for the current Identity Platform project.
  apiKeyValue: {
    // Provisioned by Identity Platform.
    authDomain?: string;
    // The display mode for tenant selection flow. This could be 'optionFirst'
    // or 'identifierFirst'. The default is 'optionFirst'.
    displayMode: string;
    // The tenant selection screen title. By default, this is the project ID.
    selectTenantUiTitle?: string;
    // The tenant selection screen logo in the form of an HTTPS URL. By default,
    // no logo is provided.
    selectTenantUiLogo?: string;
    // The CSS stylesheet used to override the default CSS styles in the form of
    // an HTTPS URL. The hosted UI uses a superset of the FirebaseUI-web CSS
    // styles. By default, no custom stylesheet is provided.
    styleUrl?: string;
    // The tenants configurations.
    tenants: {
      // Each tenant configuration is keyed by the tenant identifier.
      tenantIdValue: ExtendedTenantUiConfig;
    };
    // The application terms of service URL in the form of an HTTPS URL.
    // By default, this is empty.
    tosUrl?: string,
    // The application privacy policy URL in the form of an HTTPS URL.
    // By default, this is empty.
    privacyPolicyUrl?: string,
  };
}

ExtendedTenantUiConfig

interface ExtendedTenantUiConfig {
  // The optional tenant full label. This is used for the "Sign in with tenant"
  // button label.
  // When not provided, "Sign in to ${displayName}" is used as the full label.
  fullLabel?: string;
  // The tenant display name. This is used for the "Sign in with tenant" label.
  // For tenants, the default is the tenant display name. For projects-level
  // identity providers, the default is the project ID.
  displayName: string;
  // The tenant icon URL in the form of an HTTPS URL. This is used for the
  // "Sign in with tenant" button icon URL. The default is a placeholder icon.
  iconUrl: string;
  // The tenant logo URL in the form of an HTTPS URL. This is displayed after
  // the user selects the tenant and is presented with the identity providers
  // associated with the tenant. By default, no logo URL is provided.
  logoUrl?: string;
  // The tenant button color. This is used for the "sign in with tenant" button.
  // A default color is used for all tenants.
  buttonColor: string;
  // The sign-in options associated with the tenant. This is auto-populated
  // using the enabled providers for the current tenant.
  signInOptions: (SignInOption | string)[];
  // The terms of service URL associated with the current tenant in the form
  // of an HTTPS URL. Empty by default.
  tosUrl?: string;
  // The privacy policy URL associated with the current tenant in the form of
  // an HTTPS URL. Empty by default.
  privacyPolicyUrl?: string;
  // For single providers with signInFlow set to 'redirect', setting this to
  // 'true' will result with a redirect to the provider without user
  // interaction. Set to true by default.
  immediateFederatedRedirect?: boolean;
  // Whether to use popup or redirect flows for federated providers.
  // Redirect flows are used by default.
  signInFlow?: 'redirect' | 'popup';
}

SignInOption

interface SignInOption {
  // The provider identifier, such as facebook.com or saml.my-saml-provider-id.
  provider: string;
  // The provider label name.
  providerName?: string;
  // The full label of the button. Instead of "Sign in with $providerName",
  // this button label will be used. Default: Sign in with $providerName
  fullLabel?: string;
  // For identifier first flows, this is the user email domain: tenant1.com
  hd?: string;
  // The button color, such as "#ff00ff".
  buttonColor?: string;
  // The button icon URL in the form of an HTTPS URL.
  iconUrl?: string;
  // Additional OAuth scopes to request for OAuth providers.
  scopes?: string[];
  // Additional custom OAuth parameters to set on sign-in.
  // For example, setting {auth_type: 'reauthenticate'} will
  // require password re-entry on Facebook re-authentication.
  customParameters?: {[key: string]: any};
  // In the "identifierFirst' flow, a login hint key makes it possible
  // to pass the email to the provider to sign in with. This is useful when a
  // user has multiple accounts. For many providers, this is "login_hint".
  loginHintKey?: string;
  // Whether to require display name when creating an email and password
  // account. True by default.
  requireDisplayName?: boolean;
  // reCAPTCHA customization for phone providers.
  recaptchaParameters?: {
    // The type of the reCAPTCHA ("audio" or "image")
    type?: string;
    // Whether the reCAPTCHA is invisible or not. Valid options are
    // "invisible", "normal", and "compact".
    size?: string;
    // For invisible reCAPTCHAs, this defines how the invisible reCAPTCHA badge
    // is displayed (for example, "bottomleft", "bottomright" or "inline").
    badge?: string;
  };
  // The default country for phone providers.
  defaultCountry?: string;
  // Sets the whitelisted countries for phone providers. Accepts either ISO
  // (alpha-2) or E164 formatted country codes. For example: ['US', '+44']
  whitelistedCountries?: string[];
  // Sets the blacklisted countries for phone providers. Accepts either ISO
  // (alpha-2) or E164 formatted country codes. For example: ['US', '+44']
  blacklistedCountries?: string[];
}