Okta Hosted Custom Sign In Widget - transformUsername

Questions
1

Hi,

I’m just wondering if someone is able to assist me with getting the transformUsername function to work with the Okta hosted custom sign in widget. For the life of me i can’t get it to append the domain suffix onto the username.

For context, im using a trial okta tenant with my custom domain setup and the default configuration for the sign in widget, with only the transformUsername function added in. Widget code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex,nofollow" />
    <!-- Styles generated from theme -->
    <link href="{{themedStylesUrl}}" rel="stylesheet" type="text/css">
    <!-- Favicon from theme -->
    <link rel="shortcut icon" href="{{faviconUrl}}" type="image/x-icon" />

    <title>{{pageTitle}}</title>
    {{{SignInWidgetResources}}}

    <style nonce="{{nonceValue}}">
        #login-bg-image-id {
            background-image: {
                    {
                    bgImageUrl
                }
            }
        }
    </style>
</head>

<body>
    <div id="login-bg-image-id" class="login-bg-image tb--background"></div>
    <div id="okta-login-container"></div>

    <!--
        "OktaUtil" defines a global OktaUtil object
        that contains methods used to complete the Okta login flow.
     -->
    {{{OktaUtil}}}

    <script type="text/javascript" nonce="{{nonceValue}}">

        transformUsername: (username, operation) => {
            // This example will append the '@acme.com' domain if the user has
            // not entered it
            return username.includes('@acme.com')
                ? username
                : username + '@acme.com';
        };
        // "config" object contains default widget configuration
        // with any custom overrides defined in your admin settings.
        var config = OktaUtil.getSignInWidgetConfig();

        // Render the Okta Sign-In Widget
        var oktaSignIn = new OktaSignIn(config);
        oktaSignIn.renderEl({ el: '#okta-login-container' },
            OktaUtil.completeLogin,
            function (error) {
                // Logs errors that occur when configuring the widget.
                // Remove or replace this with your own custom error handler.
                console.log(error.message, error);
            }
        );
    </script>
</body>

</html>

Any assistance would be greatly appreciated, as im trying to see if this will solve an issue for us.

2

Can you try the following to see if this helps

 config.transformUsername = function(username,operation) {
              value = 'abc@' + username;     
              return value
          }