How to Configure the Okta Sign Widget with a SAML App (non-OIDC)
Last Updated:
Okta Classic Engine
SDKs & Libraries
Overview
This article describes how to configure the Okta Sign Widget with a Security Assertion Markup Language (SAML) App (non-OIDC).
Applies To
- Okta Classic Engine
- Self-Hosted Okta Sign-in Widget
- Security Assertion Markup Language (SAML) application
Solution
- Create a SAML App.
- Locate the App Embed Link at the bottom of the SAML App's General page.
- Pass the Embed Link to session.setCookieAndRedirect() in the Okta Sign-in Widget config.
Here is a minimum working example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://global.oktacdn.com/okta-signin-widget/5.7.1/js/okta-sign-in.min.js" type="text/javascript" ></script> <link href="https://global.oktacdn.com/okta-signin-widget/5.7.1/css/okta-sign-in.min.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="osw-container"></div> <script> var appEmbedLink = "REPLACE ME"; //replace with the URL for the SAML app in question var signIn = new OktaSignIn({ // Okta domain URL baseUrl: "https://<domain>.okta.com", }); signIn .renderEl({ el: "#osw-container", }) .then(function (res) { if (res.status === "SUCCESS") { // user is authenticated // redirect them to the SAML app res.session.setCookieAndRedirect(appEmbedLink); } }); </script> </body> </html>
NOTE: It is recommended to use the latest version of our Sign-In Widget. If using Widget version 7 or above, ensure useClassicEngine is set to true in the widget config, as the above will not work with Interaction Code flow (as Interaction Code flow requires use of an OpenID Connect application)
