How to Create a Template Two Page Plugin SWA App in Okta
Last Updated:
Overview
The article presents how to create a Template Two Page Plugin Secure Web Authentication (SWA) app when credential auto-fill is needed for an application that has 2 different pages for the Username and Password.
Applies To
- Template Two Page Plugin App
- Okta Classic Engine
- Okta Identity Engine (OIE)
- Secure Web Authentication (SWA)
Solution
Follow the steps below to create the to create a Template Two Page Plugin app:
- In the Okta Admin Console, navigate to Applications > Applications.
- Click Browse App Catalog.
- Search for Template Two Page Plugin App.
- Click Add Integration.
- Name the application using the Application label field.
- Fill in the remaining fields as appropriate. For example, for Login URL, a Login URL would be needed (for example:
https://<HOST>/login). - 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.
- For the Password page URL, copy the link of the page that contains the password field and paste it into this field.
- For the Username field, navigate to the application's login page, right-click on the Username/Email Address field, and select Inspect.
- The browser console will open, highlighting the CSS part of the specific field. Right-click, select Copy, then Copy Selector.
- 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.
- The same steps can be used for the Password field, the Next button, and the Submit button.
- 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.
