1 of 1

UI Configuration Overrides

This is how overrides of ui_config should be done in all frontend apps/auth.

Configure the ui_config_overrides.json

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

The data in ui_config_overrides.json will be merged with the default values.

Name

Description

Default value

{
  "variables": {},
  "logos": {
    "app_logo": {
      "src": "assets/fortified_logo_green-white.svg",
      "size": "40px"
    },
    "access_header": {
      "src": "assets/logo.svg",
      "link": false
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-white.svg",
      "size": "80px",
      "link": {
        "url": "https://fortifiedid.se"
      }
    }
  },
  "supportedLanguages": [
    {
      "code": "en",
      "name": "English"
    },
    {
      "code": "sv",
      "name": "Svenska"
    }
  ],
  "title": "Fortified ID",
  "localesMergePath": "",
  "fallbackLanguage": "sv"
}

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, //or omit 
      "width": "14rem",
      "margin": "-2.5rem auto -0.5rem auto"
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "size": "40px",
      "link": {
        "text": "",
        "url": "https://fortifiedid.se"
      }
    }
  },
  // ... remaining configuration with title etc.
}

Advanced Configuration

If you want or need to have the same overrides file for several apps, you can also configure more advanced for all apps (password_reset, forms, portal, enrollment), all access (bidomd selector etc) and all infoendpoint by scoping as below. You can also make configuration for a specific app/auth/infoendpoint.

{
  "logos": {
    "access_header": { ... },
    "access_footer": { ... }
  },
  "title": "Acme", // all get this title, even pwd_reset for example
  "access": {
    "title": "Acme IdP", // all Access get this
    "logos": {
      "access_header": { ... } // more specific. all Access auth apps will get a designated header logo
    }
  },
  "bidomd": {
    "logos": {
        "access_header": "default" // most specific, will become the Bankid logo which is default 
    },
    "title": "Acme BankID" // bidomd gets this title
  },
  "selector": {
     "logos": {
         "access_header": false // most specific, turn off the upper logo only on the selector
     }
  }
  // ... remaining configuration with title etc.
}

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. Note: since search and replace are used for variables, use caution when naming the variables. Use for example __VARIABLE_NAME__ as naming convention to avoid unexpected bugs.

{
  "variables": {
    "__NAME__": "Acme"
  },
  "title": "__NAME__ title" // becomes "Acme title" in the browser
}