[Okta signin widget] Customizing error message when suspended user tries to login

Questions
1

I need to customize the error message when a suspended user tries to log in using Okta signin widget.
Currently, I’m getting the ‘Authentication failed’ error message which is the same error message I get when I try to log in with invalid credentials.

I want to differentiate the error message when a user enters invalid credentials or when a suspended user tries to login.

1 Like
2

Hello,

You can use the afterError() callback in the widget when an error occurs.

This will give access to the error message, but the error will already have been rendered, so you would either need to update the DOM or display your own error message / take some sort of action.

In the case of suspended, I don’t believe Okta will provide those details in the authentication failure. If a user locks their account Okta will return this. For invalid username/password typically Okta will just fail the authentication. I believe the same will be for a suspended user.

1 Like
3

Thank you for the response. @erik

Follow-up question:

Once I get the error response from Okta (E0000004) inside the afterError event, I will be calling an API. I need to show the error message on the widget based on the API response.

Is it something possible to do?

Sample code below.

    this.signIn.on('afterError', async (_ctx: EventContext, err: EventErrorContext) => {
      if (errorKeys.includes('errors.E0000004')) {
        const userEmail = document.cookie.split('=')[1];
        this.oktaService
          .getOktaUser(userEmail)
          .pipe(take(1))
          .subscribe(
            (response) => {
                if (response.data.getOktaUser.status === 'SUSPENDED'){
                     // Show an error message on the sign-in widget [Something like] 
                     err.E0000004 =  'Your account has been suspended; to unsuspended the account please speak to your advisor or contact the help desk.';
                 }
             },
            (error) => {
               // Show an error message on the sign-in widget [Something like] 
               err.E0000004 =  'Something went wrong. Please try again';
            }
          );
      }
   });
4

You can but not sure how well it will turn out.

afterError runs after the widget is rendered I believe, so if you need to make a call to the your own service which will then make a Okta Management call to check the user status, while all this is happening the Widget will first render it’s normal error message.

Once you have the error you want to display you could just update the DOM. Below is something I did a few versions back so you may need to come up with a different/better qualifier.

document.getElementsByClassName('okta-form-infobox-error infobox infobox-error')[0].childNodes[1].textContent = 'Your Custom Error';
2 Likes
5

Very helpful. Thank you much :smiley:

6

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