This article discusses how to add warning or consent text to the Okta Sign-In Widget during Phone Authenticator (Voice or SMS) enrollment or verification.

• Phone Authenticator (Voice and SMS)
• Custom Sign-In Widget (Okta-Hosted or Self-Hosted/Embedded)
• Okta Identity Engine (OIE)

Using the afterRender event for the widget, it is possible to modify the DOM after the widget has finished loading a given view.

The code below will allow the widget to show users a message when they are prompted to select an authenticator for enrollment/verification, and after choosing to enroll/verify with the Phone authenticator.

oktaSignIn.on('afterRender', function (context) {
    // create div to hold advisory message
    var advisoryDiv = document.createElement('div');
    advisoryDiv.setAttribute("align", "center"); 
    advisoryDiv.style.color = 'red';

    // Add any additional CSS styling to this DIV here
    advisoryDiv.innerHTML = "Use of SMS and call authenticators is not recommended. Please use other authenticator options if possible"

    // Display this advisory message when user is prompted to select an authenticator in which to enroll/verify
    if (context.controller == 'enroll-choices'){
        var phoneSetup = document.querySelector('[data-se="phone_number"]');

        if (!phoneSetup) {
            return;
        }
        
        // Append the div after the main form content. This code can be changed
        // depending on where the message should appear
        phoneSetup.appendChild(advisoryDiv);
    }

    // Display this advisory message for the phone verification and enrollment views 
    if (context.methodType == 'sms' || context.methodType == 'voice') {
        var formFieldset = document.getElementsByClassName('siw-main-body')[0];

        if (!formFieldset) {
            return;
        }

        // Append the div after the main form content. This code can be changed
        // depending on where the message should appear
        formFieldset.appendChild(advisoryDiv);
    }
});

NOTE: This code was tested with widget v7.30.1; modifications may be required if using a different version (particularly if using a different major version). This code is NOT compatible with the third generation Sign-In Widget.

Related References

• Style the Sign-In Widget (third generation)
• Semantic Versioning