Okta Signin Widget/Password Recovery Flow Skip to main content
https://support.okta.com/help/answers?id=9062a000000qukkqak&refurl=http%3a%2f%2fsupport.okta.com%2fhelp%2fanswers
How satisfied are you with the Okta Help Center?
Thank you for your feedback!
How satisfied are you with the Okta Help Center?
1
2
3
4
5
Very Dissatisfied
Very satisfied
Enter content less than 200 characters.
Ask Search:
Charles FlatenCharles Flaten 

Okta Signin Widget/Password Recovery Flow

We have been using a in house page with your sign in widget embedded. However, we don’t know how to redirect to page and instruct the widget to go to a different starting point other than the sign in. we would like to redirect to the page with the widget, but the widget needs to go to the password question challenge, then password reset rather than the sign in. Is this possible?
Is the password question challenge/password reset available in the widget?
As of now we have a vanilla Okta page and need to be performing the password reset flow inside our properly skinned Okta widget.
 
BehrouzBehrouz (Okta, Inc.) 
Thanks for contacting Okta.

Here is our article regarding the Sign-in Widget that would help you with your implemention:
https://developer.okta.com/code/javascript/okta_sign-in_widget_ref#api

There is "Adding a Redirect" section there that you can check and follow the instructions there to add a redirect URL to your widget.

Also the following would help as well:

Username and password

username: Prefills the username input with the provided username

  username: 'john@acme.com'
transformUsername: Transforms the username before sending requests with the username to Okta. This is useful when you have an internal mapping between what the user enters and their Okta username.

  // The callback function is passed two arguments:
  // 1) username: The name entered by the user
  // 2) operation: The type of operation the user is trying to perform:
  //      - PRIMARY_AUTH
  //      - FORGOT_PASSWORD
  //      - UNLOCK_ACCOUNT
  transformUsername: function (username, operation) {
    // This example will append the '@acme.com' domain if the user has
    // not entered it
    return username.indexOf('@acme.com') > -1
      ? username
      : username + '@acme.com';
  }
processCreds: Hook to handle the credentials before they are sent to Okta in the Primary Auth, Password Expiration, and Password Reset flows.

If processCreds takes a single argument it will be executed as a synchronous hook:

  // Passed a creds object {username, password}
  processCreds: function (creds) {
    // This example demonstrates a partial integration with ChromeOS
    google.principal.add({
      token: creds.username,
      user: creds.username,
      passwordBytes: creds.password,
      keyType: 'KEY_TYPE_PASSWORD_PLAIN'
    });
  }
If processCreds takes two arguments it will be executed as an asynchronous hook:

  // Passed a creds object {username, password} and a callback for further processing
  processCreds: function (creds, callback) {
    // This example demonstrates optional legacy form-based login
    $.ajax({
      method: "POST",
      url: "/logintype",
      data: {
        username : creds.username
      },
      success: function (logintype) {
        if (logintype == "LEGACY") {
          $('#legacyUser').val(creds.username);
          $('#legacyPassword').val(creds.password);
          $('#legacyLogonForm').submit();
        } else {
          callback();
        }
      }
    });
  }
Changing help links

You can override the help link urls on the Primary Auth page by setting the following config options. If you’d like to change the help link text, use the i18n config option.

// An example that overrides all help links, and sets two custom links
helpLinks: {
  help: 'https://acme.com/help',
  forgotPassword: 'https://acme.com/forgot-password',
  unlock: 'https://acme.com/unlock-account',
  custom: [
    {
      text: 'What is Okta?',
      href: 'https://acme.com/what-is-okta'
    },
    {
      text: 'Acme Portal',
      href: 'https://acme.com'
    }
  ]
}
helpLinks.help - Custom link href for the “Help” link

helpLinks.forgotPassword - Custom link href for the “Forgot Password” link

helpLinks.unlock - Custom link href for the “Unlock Account” link. For this link to display, features.selfServiceUnlock must be set to true, and the self service unlock feature must be enabled in your admin settings.

helpLinks.custom - Array of custom link objects {text, href} that will be added to the “Need help signing in?” section.


Thanks,
Behrouz Ghorchi
Technical Support Engineer
Okta Global Customer Care
Chris BarryChris Barry (Okta, Inc.)
I would add to Behrouz's great answer that you may want to take a look at "features.router" on that page.