Customising Okta Sign in Widget Error Messaging

Questions
1

We are using the Okta Sign in Widget for a particular project where the business owners feel the generic error message ‘Sign-in Failed’ does not give a great user experience. The business owners feel this could lead their users to feel there is an issue on the businesses side, rather than their being an issue with the authentication credentials themselves.

Is there any way with the widget to improve this messaging to say ‘Invalid Credentials’ or ‘failed to validate your request’? Otherwise may need to have some jQuery listener.

2

Hi @James-Distology

You should be able to override using the i18n config for the widget:

var oktaSignIn = new OktaSignIn({
  baseUrl: 'XXXXX',
  clientId:'XXXXX',
  redirectUri:'http://localhost:3000',
  authParams: {
    display: 'page',
    responseType: 'id_token',
    responseMode: 'form_post',
    scopes: ['offline_access','email','profile','openid']
  },
  i18n: {
    en: {
      'errors.E0000004': 'Invalid Credentials'
    }
  }
});

You can see the keys for the i18n properties that you can override here:

3

HI @tom

That doesn’t seem to work unfortunately. Any i18n parameters passed that are on the sign in widget reference page (https://okta-developer.pixtulate.com/code/javascript/okta_sign-in_widget_ref), however, if I pass the errors thing as described it fails to load the widget.

Kind Regards,

James

4

I need a little more information because this works for me.

What version of the widget are you using? Can you share your code?

Below is a gif of it working and the code used to modify it.

LztmEk9xDg.gif1440×597 347 KB

Git_—__Development_authjs-test_and_untitled—___Development_okta_github_io
Git_—___Development_authjs-test_and_untitled_—___Development_okta_github_io.png1587×1125 134 KB

5

Please see my code below

 var orgUrl = '<?php echo $SystemSettings['Okta_Org']?>';
            var redirectUrl = '<?php echo base_url()."auth-user"?>';
            var oktaSignIn = new OktaSignIn({
                baseUrl: orgUrl,
                logo: '<?php echo base_url()."assets/img/core_brand/logos/CR_Logo_Trans.png"?>',
                labels: {
                },
                i18n: {
                    en: {
                        'errors.E0000004': 'Invalid Credentials'
                    }
                },
                helpLinks: {
                    forgotPassword: '/reset-password'
                }
            });

            oktaSignIn.session.get(function (res) {
                if (res.status !== 'INACTIVE' && document.cookie.indexOf("CR_OSID=") >= 0 ) {
                    window.location.replace('<?php echo base_url()."dashboard"?>');
                } else {
                    // There is no active session. Show the login flow.
                    oktaSignIn.renderEl(
                        { el: '#okta-login-container' },
                        function (res) {
                            if (res.status === 'SUCCESS') {
                                console.log('User %s successfully authenticated %o', res.user.profile.login, res.user);
                                dataLayer.push({'event': 'login-success'});
                                res.session.setCookieAndRedirect();
                                document.cookie = "CR_OSID="+res.id+"; path=/";
                                res.session.setCookieAndRedirect(redirectUrl);
                            }
                        }
                    );}
            });
6

I think I just got lucky.

Remove:

labels: {
},

It seems like the i18n isn’t loading because of that property.

If you are still seeing an error, what error are you seeing? And if you are still having an issue, what version of the widget are you using? I tested with 1.11.0 and 2.3.0, this seems to work.

7

How tom,

Same again without labels field.

I’ve just tried latest version and same issue.

Kind Regards,

James

8

What error are you seeing? Anything else I should know? What things have you done to troubleshoot?

Does this code work for you?

var orgUrl = 'https://oktapre-dev-969118.pixtulate.com/';
var oktaSignIn = new OktaSignIn({
  baseUrl: orgUrl,
  i18n: {
    en: {
      'errors.E0000004': 'Invalid Creds'
    }
  }
});

var renderWidget = function(){
  oktaSignIn.renderEl(
    {
      el: '#widget'
    },
    function success(res) {
      if (res.status === 'SUCCESS') {
        console.log(res)
      }
    },
    function error(err) {
        console.log(err);
    }
  );
}

window.onload = renderWidget;
9

For some reason 2.3.0 didn’t work, and I thought I was trying 1.11.0 , but I was actually using 1.6.0.

Switching to 1.11.0 seems to have done the trick.

is there an Okta CDN for 2.3.0?

10

Yep!

doctype html
html
  head
    title= title

    link(rel='stylesheet', href='https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css')
    link(rel='stylesheet', href='https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/js/okta-sign-in.min.js')
    script(type='text/javascript', src='/javascripts/default.js')
  body
    block content

Glad we got this resolved for you :slight_smile: