IAM HTML body attributes

The Loginapp UI adds IAM-related attributes to the HTML body tag in order to make customizing easier.

Example: HTML body tag with IAM-specific attributes

<body 
	id="iamAuthPassword" 
	data-iam-flow-id="demo" 
	data-iam-step-id="pwcheck" 
	data-iam-domain="authentication"
>
  • In particular, the following attributes are added:
  • data-iam-flow-id: The ID of the current IAM flow.
  • data-iam-step-id: The ID of the current IAM flow step.
  • data-iam-domain: The affected domain in the Loginapp.
    • The attribute assumes one of the following values (more values may have been added):
    • authentication
    • registration
    • protected.self-service
    • public-self-service
    • error

The attributes may, for example, be used to change the color of the header depending on flow ID and step ID by adapting _custom-styles.scss as follows:

 // Change background color when flow ID equals 'demo'
 [data-iam-flow-id='demo'] {
    .iam-card-header { 
        background-color: red;
    }
}

// Change background color when step ID equals 'example'
 [data-iam-step-id='example'] {
    .iam-card-header {
         background-color: green;
    } 
} 

// Change background color when flow ID equals 'demo' and step ID equals 'example'
   [data-iam-flow-id='demo'][data-iam-step-id='example'] {
    .iam-card-header { 
        background-color: blue;
    }
}

// Change background color for all pages in the authentication domain
[data-iam-domain='authentication'] {
    .iam-card-header {
        background-color: gray;
    }
}

For more information on how to add flow ID and step ID to the Loginapp Design Kit's navigation menu, see SDK navigation menu configuration.