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';
// Sets the adminRestrictedOperation configuration for providers including
// federated, email/password, email link and phone number.
adminRestrictedOperation?: {
// Specifies whether to provide additional instructions to the end user when
// a user tries to create a new user account and the authorization server
// blocks the operation.
status: boolean;
// The optional site administrator email to contact for access when sign up
// is disabled. For example: `admin@example.com`.
adminEmail?: string;
// The optional help link to provide information on how to get access to the
// site when sign up is disabled.
// For example: `https://www.example.com/trouble_signing_in`.
helpLink?: string;
}
}
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[];
// Sets the disableSignUp config for email/password or email link sign in
// method.
disableSignUp?: {
// Whether to disable users from signing up with email providers
// (email/password or email link).
status: boolean;
// The optional site administrator email to contact for access when sign
// up is disabled.
// For example: `admin@example.com`.
adminEmail?: string;
// The optional help link to provide information on how to get access to
// the site when sign up is disabled.
// For example: `https://www.example.com/trouble_signing_in`.
helpLink?: string;
}
}