UI Configuration Overrides

Property reference for ui_config_overrides.json, the file that controls logos, titles, and languages

This page describes how ui_config is overridden in all frontend applications and authenticators.

Configure the ui_config_overrides.json

Use an overlay to provide the custom file and place it in <overlay_dir>/assets/ui_config_overrides.json.

The file is merged with the application defaults, one level deep. A property you set replaces the default value outright; properties you leave out keep their defaults.

Name	Description	Default value
`logos`	An object containing logos for `app_logo` (top bar of apps like forms and portal), and `access_header` and `access_footer` for Access authentication apps	Per app. See Default values are per app.
`logos.app_logo/logos.access_header/logos.access_footer`	Logo objects. All logos are configured in the same way. Properties below are for all logos (`app_logo`, `access_header` and `access_footer`). Can be configured as `false` to disable the logo. Example: `{ "logos": { "access_header": false } [...]}` See next section for more information about logos.
`logos.app_logo.src`	Path to the logo file, relative to the application. If `undefined` or empty string `""` no logo will be shown
`logos.app_logo.size`	Shorthand for the height of the logo. Takes precedence over `height` when both are set. Use css values like "40px". This is the property used by most built-in configurations.
`logos.app_logo.width`	The width of the logo. Use css values like "40px"	`"auto"`
`logos.app_logo.height`	The height of the logo. Use css values like "40px"	`"100%"`
`logos.app_logo.margin`	CSS margin applied to the logo. Useful for logo files with built-in whitespace.
`logos.app_logo.link`	Link object. Can be configured as `false` to disable
`logos.app_logo.link.url`	Target of the link.
`logos.app_logo.link.text`	If `undefined` or empty string `""` no link text will be shown	""
`logos.app_logo.link.target`	Link target attribute. Use `"_blank"` to open in a new tab.
`supportedLanguages`	List of supported languages. If a language is specified here it is assumed to be available under the folder `assets/locales/<code>.json` See more in section below	`[ { "code": "en", "name": "English" }, { "code": "sv", "name": "Svenska" } ]`
`title`	Browser tab title	`"Fortified ID"`
`localesMergePath`	Path for merging locale files, relative to the application. If omitted or empty string `""` is used no locale merging will be done. A trailing `/` is added automatically when missing.	`""`
`fallbackLanguage`	Default/fallback language if user has not saved a language in cookies	`"sv"`
`favicon`	Path to the site icon, relative to the application. Use it to point at a favicon with a different file name. Replacing `assets/favicon.ico` through the overlay works without setting this property.
`variables`	Object of placeholder names and their values. Every occurrence of a name in the configuration is replaced with its value before the configuration is used. See Variables in Config.	`{}`
`webauthn.auto_start`	Start the passkey dialogue automatically instead of waiting for the user to press a button.
`enrollment_oath_sw.app_link_ios`, `enrollment_oath_sw.app_link_android`	App store links shown during software token enrollment.
`enrollment_mobile.app_link_ios`, `enrollment_mobile.app_link_android`	App store links shown during mobile enrollment.
`enrollment_oath_sw.token_type_logo`, `enrollment_oath_hw.token_type_logo`, `enrollment_mobile.token_type_logo`, `enrollment_webauthn.token_type_logo`	Show or hide the token type logo in the corresponding enrollment application.

{
  "variables": {},
  "logos": {
    "app_logo": {
      "src": "assets/logo_vit.svg",
      "size": "40px"
    },
    "access_header": {
      "src": "assets/logo.svg",
      "size": "80px"
    },
    "access_footer": {
      "src": "assets/logo.svg",
      "size": "40px",
      "link": {
        "url": "https://example.org"
      }
    }
  },
  "supportedLanguages": [
    {
      "code": "en",
      "name": "English"
    },
    {
      "code": "sv",
      "name": "Svenska"
    }
  ],
  "title": "Acme",
  "localesMergePath": "assets/custom_locales/",
  "fallbackLanguage": "sv"
}

Default values are per app

There is no single set of default values. Each application ships its own assets/ui_config.json, and the logo slots it uses differ. Read that file in the installed application to see what you are overriding.

Application	Logo slots used by default
`selector`	`access_footer`
`otp_validation`	`access_header`
`username_password`	`access_header`, and `access_footer` disabled
`bidomd`	`access_header` with the BankID logo, `access_footer`
`webauthn`	`access_footer`
`portal`, `forms`, `password_reset`	`app_logo`, `access_header`

Logo Configuration

All logos are configured as follows:

{
  "logos": {
    "app_logo": {
      "src": "assets/fortified_logo_green-white.svg",
      "height": "40px"
    },
    "access_header": {
      "src": "assets/fortified_logo_green-teal.svg"
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "height": "40px",
      "link": {
        "url": "https://fortifiedid.se",
        "text": "FortifiedID"
      }
    }
  }
}

All logos can be made into links.

For example, BankID has the following default configuration, where it has BankID's logo at the top (with some negative margins because it has so much whitespace in it and we have our own margins otherwise):

{
  "logos": {
    "access_header": {
      "src": "assets/svg/logo_bankid.svg",
      "link": false,
      "width": "14rem",
      "margin": "-2.5rem auto -1.75rem auto"
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "size": "40px",
      "link": {
        "text": "",
        "url": "https://fortifiedid.se"
      }
    }
  }
}

"link": false turns the logo into a plain image; omitting link has the same effect. The rest of the configuration, such as title, follows in the same file.

Advanced Configuration

If you want or need to have the same overrides file for several apps, you can scope parts of the configuration. The available scopes are apps (Password Reset, Forms, Portal, Enrollment), access (the authentication applications such as bidomd and selector), infoendpoint, and logout. You can also scope to a specific application by its name.

{
  "logos": {
    "access_header": {
      "src": "assets/logo.svg",
      "size": "80px"
    },
    "access_footer": {
      "src": "assets/logo.svg",
      "size": "40px"
    }
  },
  "title": "Acme",
  "access": {
    "title": "Acme IdP",
    "logos": {
      "access_header": {
        "src": "assets/logo_idp.svg",
        "size": "80px"
      }
    }
  },
  "bidomd": {
    "logos": {
      "access_header": "default"
    },
    "title": "Acme BankID"
  },
  "selector": {
    "logos": {
      "access_header": false
    }
  }
}

In the example above:

"title": "Acme" at the root applies everywhere, including Password Reset.
The access scope gives all Access authentication apps a different title and header logo.
bidomd restores the built-in header logo with the value "default", which in this case is the BankID logo.
selector turns the header logo off entirely.

Resolution order

A property is looked up from the most specific scope to the least specific, and the first scope that defines it wins:

The application name, such as bidomd or selector.
An alternate name, when the application declares one. Some applications are published under more than one name.
The application scope: access, apps, infoendpoint, or logout.
The root of the file.

Two values have special meaning at any level:

Value	Meaning
`"default"`	Use the application's own built-in value instead of anything set higher up in the file. Use it to exempt one application from a broad override.
`true`	Continue the lookup at the next, less specific level. Use it to let one application fall through to a scope or root value.

Example: a header logo is set for every Access application, bidomd keeps its built-in BankID logo, and selector shows none.

{
  "access": {
    "logos": {
      "access_header": {
        "src": "assets/logo.svg",
        "size": "80px"
      }
    }
  },
  "bidomd": {
    "logos": {
      "access_header": "default"
    }
  },
  "selector": {
    "logos": {
      "access_header": false
    }
  }
}

Variables in Config

If variables are defined in the variables object, all instances of the variable will be replaced in the output to the browser. Each name is applied as a regular expression over the whole configuration, so a name containing regular expression characters, or one that occurs inside another value, will produce surprising results. Use a distinctive naming convention such as __VARIABLE_NAME__ to avoid that.

Variables are most useful for values that repeat, such as a file name referenced from several logo slots.

{
  "variables": {
    "__NAME__": "Acme"
  },
  "title": "__NAME__ title"
}

The browser tab title becomes Acme title.