Using OKTA Widget for SP login flow Skip to main content
https://support.okta.com/help/oktaarticledetailpage?childcateg=&id=ka02a000000xaezsa0&source=documentation&refurl=http%3a%2f%2fsupport.okta.com%2fhelp%2fdocumentation%2fknowledge_article%2fusing-okta-widget-for-sp-login-flow
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.
Using OKTA Widget for SP login flow
Published: Jan 10, 2017   -   Updated: Jun 22, 2018
 
   Issue :
With a SAML integrated application, if SP initiated login is permitted by the application, an Okta login screen will be presented. If a customer has customized their main login page with the Okta Widget, typically, they would also like to use the Okta Widget as the app login page for SP initiated flow and not the Okta default page.

   Solution : Some extra javascript coding is required to allow the Okta Widget to be used for SP login and redirect to the fromURI. Below you'll find the necessary steps you need to follow to achieve this.

         
  • First we need to go to the desired app in Okta on the General Tab and under App Embed Link you'll have Application Login Page. Chose "Use a custom login page for this application", and type in your widget url.   
User-added image 

 
  • Second we need to change the code a bit, the below is a basic example of a custom widget html that was changed.
 
 
<html lang="en-us">
<head>
  <script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.7.0/js/okta-sign-in.min.js" type="text/javascript"></script>
  <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.7.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet">
  <!-- Optional, customizable css theme options. Link your own customized copy of this file or override styles in-line -->
  <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/1.7.0/css/okta-theme.css" type="text/css" rel="stylesheet">
</head>
<body>
  <!-- Render the login widget here -->
  <div id="okta-login-container"></div>
 
  <!-- Script to init the widget -->
  <script>
      var orgUrl = 'https://test.okta.com';
      var str = decodeURIComponent(window.location.href);
      var redirectUrl = str.substr(str.indexOf("?fromURI=") + 9);
 
      var oktaSignIn = new OktaSignIn({baseUrl: orgUrl});
 
    oktaSignIn.renderEl(
      { el: '#okta-login-container' },
      function (res) {
        if (res.status === 'SUCCESS') {
        console.log('User %s successfully authenticated %o', res.user.profile.login, res.user);
 
         if (str.includes("?fromURI")) {
         res.session.setCookieAndRedirect(redirectUrl);
}
        else {
res.session.setCookieAndRedirect(orgUrl);
}
 
        }
      }
    );
  </script>
</body>
</html>


     These 2 lines of code var str = decodeURIComponent(window.location.href); and var redirectUrl = str.substr(str.indexOf("?fromURI=") + 9); will decode the URL and retrieve the fromURI from it.
 
      The bellow code checks to see if the decoded URL contains a fromURI and redirects either to the redirectUrl ( fromURI ) or to the orgUrl ( https://test.okta.com ) .
 
if (str.includes("?fromURI")) {
         res.session.setCookieAndRedirect(redirectUrl); }
        else {res.session.setCookieAndRedirect(orgUrl);}