# Okta Hosted Custom Sign In Widget - transformUsername

**URL:** <https://devforum.okta.com/t/okta-hosted-custom-sign-in-widget-transformusername/32059>\
**Category:** Questions\
**Created:** [February 20, 2025, 9:22am UTC](https://devforum.okta.com/t/okta-hosted-custom-sign-in-widget-transformusername/32059 "2025-02-20T09:22:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aversor](https://avatars.discourse-cdn.com/v4/letter/a/e0b2c6/32.png) [@aversor](https://devforum.okta.com/u/aversor)\
**Post date:** [February 20, 2025, 9:22am UTC](https://devforum.okta.com/t/okta-hosted-custom-sign-in-widget-transformusername/32059/1 "2025-02-20T09:22:27Z")

</div>

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:

```auto
<!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.

---

<div class="post-metadata">

**Author:** ![vk-giri](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/vk-giri/32/5178_2.png) [@vk-giri](https://devforum.okta.com/u/vk-giri)\
**Post date:** [February 24, 2025, 10:34am UTC](https://devforum.okta.com/t/okta-hosted-custom-sign-in-widget-transformusername/32059/2 "2025-02-24T10:34:53Z")

</div>

Can you try the following to see if this helps

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

```

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [March 26, 2025, 10:35am UTC](https://devforum.okta.com/t/okta-hosted-custom-sign-in-widget-transformusername/32059/3 "2025-03-26T10:35:08Z")

</div>

Closed on March 26, 2025, 10:35am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
