The article presents how to create a Template Two Page Plugin SWA app when credential auto fill is needed for an application that has 2 different pages for the Username and Password.

• Template Two Page Plugin App
• Okta Classic Engine
• Okta Identity Engine (OIE)

1. Navigate to Applications > Applications.
2. Click Browse App Catalog.
3. Search for Template Two Page Plugin App.
4. Click Add Integration.

5. Name the application using the Application label field.

6. Fill out the rest of the fields as appropriate. For example, for Login URL, a Login URL would be needed (for example: https://<HOST>/login).
7. In the Redirect URL field, insert the redirection link if the Login URL brings the user to another page. If not, copy the same Login URL.
8. For the Password page URL, copy the link of the page that contains the password field and paste it into this field.
9. For the Username field, navigate to the application's login page, right-click on the Username/Email Address field, and select Inspect.

10. The browser console will open, highlighting the CSS part of the specific field. Right-click, select Copy, then Copy Selector.

10. Navigate to the Template Two Page Plugin App and paste the information in the Username field. This will be the step to follow for the rest of the fields, as there will be a need to copy the CSS of the Next button from the Username page by clicking Inspect on it and then using the Copy selector on the highlighted section from the console once more.

 

12. The same steps can be used for the Password field, the Next button, and the Submit button.
13. At the end of this process, the fields should be populated with the designated values: 

NOTE: The SWA integration method does not support the integration of dynamic URL pages, and pages that have their username/password field inside a Shadow DOM.

Related References

• Configure the Okta Template App and Okta Plugin Template App
• SWA App Does Not Autofill Credentials