Sign-In Widget CDN Customisation

Questions
1

Hi Team,

We are using widget 2.14.0 version. Now we are trying to use 7.12.2 version. We have the below code in place to populate username place holder. With the 7.12.2 widget version
it’s not working.

var oktaSignIn = new OktaSignIn({baseUrl: orgUrl,i18n: {‘en’:
{‘primaryauth.username.placeholder’:‘myapp Username’,
‘primaryauth.username.tooltip’:‘user@agency.virginia.gov or registered email address’,
‘primaryauth.password.tooltip’:‘Case sensitive password’,
‘errors.E0000004’: ‘We do not recognize the username and/or password entered. Please try again.’,
‘oform.errorbanner.title’: ‘Invalid Credentials’}}});

I saw in another post here that “afterRender” needs to be used. Please illaborate on that.

2

Which of these i18n keys aren’t being customized as expected?

And are you on an Okta Identity Engine org? Version 2.x of the widget is/was only able to use the original /authn pipeline from Okta Classic, but the widget views and i18n login properties have changed a bit in OIE, so some of these may not even exist or may have been renamed

3

hi thanks for the response.

The place holder and tool tip is customized but not working with the latest version.

‘primaryauth.username.placeholder’:‘myapp Username’,
‘primaryauth.username.tooltip’:‘user@agency.virginia.gov or registered email address’,
‘primaryauth.password.tooltip’:‘Case sensitive password’

We are using Okta classic for now.

4

We removed placeholders (and switched to using label) and tooltips between widget major versions 2 and 3 to make the widget more accessible, see release notes for Widget v3.0.0: Release 3.0.0 · okta/okta-signin-widget · GitHub

  • Removes tooltip in favor of explains (#718)
  • Updates inputs to use labels instead of placeholders (#706, #744)
5

Thanks for the response.

When we checked with Inspect element in browser, the place holders are blank for User Name and Password fields of the widget. Request to let us know how to customize the widget to have the place holders for User name and password.

6

we were able to customize the widget using afterRender to have placeholders for User id and password fields.

We have the requirement to populate tooltip in username and password fields. Also need to have user icon and password icon in the fields. request to let us know how to customize these in the sign in widget.

7

Looks like that is handled via CSS with some fontawesome icons? You should be able to mimic this yourself, but as I’m no CSS expert, I was unable to divine how it was done previously.

If you want, you can always look through the CSS or source code for widget v2.x to see how it was done there and try to mimic it. But the widget is not longer designed/intended to display these icons at this point, so I’m unable to provide specific advice about how to accomplish this.