• Sign In Widget, using setCookieAndRedirect to redirect users after successful login

• Social Login/External IDP

When using the Social Login buttons with the Sign In Widget, users are redirected to their Identity Provider to authenticate, but they are always sent back to Okta (and, once the Okta session is established, their Okta end user dashboard).

This occurs despite having passed a redirect URI to setCookieAndRedirect.


Example:

var config = {
  baseUrl: oktaDomain, // pass in your Okta Domain URL here
  redirectUri: redirectUrl,
  idps: [
    {
      type: 'GOOGLE',
      id: googleIdpId // pass in the ID for the external Identity Provider you are creating this button for (Google, in this example)
    }
  ]
};
oktaSignIn.authClient.session.exists()
  .then(function(exists) {
    if (exists) {
      window.location.href = redirectUrl;
    } else {
      oktaSignIn.renderEl(
        { el: '#login-container' },
        function success(res) {
          if (res.status === 'SUCCESS') {
            res.session.setCookieAndRedirect(redirectUrl); // here is where the redirectUrl you want them to go is passed in
          }
        },
        function error(err) {
          console.log("ERROR");
        }
      );
    }
  });

Instead of using the built-in IDP buttons already styled for each Identity Provider (Sign in with Google, Sign in with Facebook, etc) by setting the 'idps' property of the Widget config, a custom button will need to be created. Creating a custom button allows a URL (as the fromURI parameter) to be passed that users should be redirected to once they have logged in. In order to create the button, the Identity Provider's ID is needed, as done when using the 'idps' property (as mentioned above).

Example:

var config = {
  baseUrl: oktaDomain, // pass in your Okta Domain URL here
  redirectUri: redirectUrl,
  customButtons: [
    {
      title: "Sign in with Google",
      className: 'btn-customAuth', // you can pass different classes here as well. For example, the button that the 'idps' setting creates will use the following classes for the Google button, if you want to mimic that style: social-auth-button social-auth-google-button link-button
      click: function() {
        window.location.href = "https://{oktaDomain}/sso/idps/{googleIdpId}?fromURI=" + encodeURI(redirectUrl); // this is the same URL that the Widget uses for the built-in buttons, but we're adding a fromURI parameter (with its value URL encoded) to indicate where the user should be sent after they authenticate
      }
    }
  ]
};

oktaSignIn.authClient.session.exists()
  .then(function(exists) {
    if (exists) {
      window.location.href = redirectUrl;
    } else {
      oktaSignIn.renderEl(
        { el: '#login-container' },
        function success(res) {
          if (res.status === 'SUCCESS') {
            res.session.setCookieAndRedirect(redirectUrl); // this will still be used to redirect local Okta users to the correct location
          }
        },
        function error(err) {
          console.log("ERROR");
        }
      );
    }
  });