Make apps detectable to the Okta Browser Plugin

The Okta Browser Plugin automatically detects sign-in form elements on most web app pages. Sometimes, however, the plugin doesn't detect the form elements and then can't fill in the fields for the user. This topic describes how to code your sign-in form elements to ensure that the Okta Browser Plugin can detect your sign-in form and fill in its fields.

Guidelines for coding submit buttons

1. Use the <button>, <input> or <a> DOM elements for submitting a form. Don't use <div> or <img> for this control.
2. The submit button must be visible to the user. Explicitly configure its height and width dimensions. Register the click event directly to this button, and not to its parent or child nodes.
3. The submit button must be physically close to the username and password fields on the page.
4. Keep your DOM tree hierarchy as simple as possible. This makes it easier for the Okta Browser Plugin to scan.
5. In the DOM tree hierarchy, don't place too many parent and child nodes between the submit button entry and the username and password entries.
6. Use English key words for the button text or value, like Continue, Go, Next, Ok, Save, Sign in, Submit, or Verify. The plugin uses the following regular expressions when it searches for submit button elements on a form:
   • /^(?!forgot).(log\W(i|o)n)/i,
   • /save/i,
   • /sign\Win/i,
   • /^ok$/i,
   • /^submit$/i
   • /continue\s$/i,
   • /next\s*$/i,
   • /go\s*$/i,
   • /verify\s*$/i