Sign-in widget - session object missing

Hi there,

I’m trying to login using the sign-in widget and noticed that the session object is missing in the onSuccess response:

onSuccess = response => {
// response.session is undefined
// response object includes next, status, type, user

oktaAuth.signInWithRedirect({
  sessionToken: res.session.token
});

};

This is for a non-OIDC application. Was hoping to understand how to pass the session token to the response?

Thanks,
Grayson

If you’re using the Okta Sign In Widget to log users into a non-OIDC application, you should look into using renderEl instead of AuthJS’ signInWithRedirect, which is designed for use in OAuth flows.

Within the success function for renderEl, you can then fetch the sessionToken with res.session.token. There’s an example of this code in our widget guide:

<div id="widget-container"></div>

<script>
  const signIn = new OktaSignIn({baseUrl: 'https://${yourOktaDomain}'});
  signIn.renderEl({
el: '#widget-container'
  }, function success(res) {
if (res.status === 'SUCCESS') {
  console.log('Do something with this sessionToken', res.session.token);
} else {
// The user can be in another authentication state that requires further action.
// For more information about these states, see:
//   https://github.com/okta/okta-signin-widget#rendereloptions-success-error
}
  });
</script>

Hi Andrea,

Thanks for the reply. It looks like we are using renderEl, and are able to enter onSuccess, but missing the sessionToken in the response:

class OktaSignInWidget extends Component {
  constructor(props) {
    super(props);

    this.widget = new OktaSignIn({
      baseUrl: props.baseUrl,
      helpLinks: {
        forgotPassword: '/password/recover'
      },
      redirectUri: `${window.location.origin}/login/callback`,
      language: props.language,
      authParams: { pkce: true },
      i18n: translationsMap
    });
  }

  componentDidMount() {
    const { onSuccess, onError } = this.props;
    this.widget.renderEl({ el: '#sign-in-widget' }, onSuccess, onError);
  }

  componentWillUnmount() {
    this.widget.remove();
  }

  render() {
    return <div id='sign-in-widget' />;
  }
}

Could it be the ubiquitous third-party cookie issue?

Interesting! Thanks Pete for sharing this link. We noticed that this started occurring after updating the okta-signin-widget from version 2.21.0 to 5.2.0. Perhaps there’s a change in a later version related to third-party cookies that we may not be aware of.

1 Like

No probs, it’s just bitten us as well. The workaround is to create a subdomain and then add that as a custom url in your Okta config - but not everyone can just provision infrastructure like that on a whim! I’m doing some testing tomorrow to wrap my head around how it should work, e.g. what pages / scripts etc. need to be hosted where. I’ll pop back and share my findings in a day or two, hopefully might save a few customers some pain. :slight_smile:

Sounds great, appreciate it! It turns out that we are seeing this after updating okta-auth-js from a very early version to 4.7.1, even if the okta-signin-widget version remains at 2.21.0. Thanks for your help!

I followed the guide and set up the subdomain and custom URL this morning. It does not solve the cross site issue, the auth script still attempts to write cookies from your okta custom url, and fails. I am amazed more people are not jumping up and down about this.

Thanks Pete for following up. As a workaround we created a custom login form based on this example: Okta Auth JS and React | Okta Developer. It seems that by calling oktaAuth.signInWithCredentials (instead of signIn.renderEl), we are able to get the session token:

  const handleSubmit = () => {
    oktaAuth.signInWithCredentials({ username, password })
    .then(res => {
      const sessionToken = res.sessionToken;
      oktaAuth.signInWithRedirect({ sessionToken });
    })
  };

Hope that helps anyone else who has come across the same issue.

Thanks for that Grayson. It does seem to work, definitely returns a session token so that’s progress!

Unfortunately, I can’t get around the “Policy evaluation failed for this request” error. Read several different “fixes” today, tried all, but after several hours I can’t fix it. Hasn’t been a smooth integration so far, to say the least!

If you’re still having an issue with “Policy evaluation failed for this request” error, I recommend reaching out to support for assistance (either through the Help Center or by emailing support@okta.com)

Does your app include any custom scopes? I was getting the same error after adding a custom scope owned by another team:

  const oktaAuth = new OktaAuth({
    clientId: oAuth.clientId,
    issuer: oAuth.issuer,
    redirectUri: window.location.origin + oAuth.callbackUrl,
    pkce: true,
    scopes: ['email', 'openid', 'profile', 'my-custom-scope']
  });

Removing the custom scope resolved the error for us, as well as when the scope’s owner granted our app permission.

Thanks for the reply. No, I tried to keep it simple:

scopes: ['openid','email']

I also tried adding

pkce:false

Which solved another error I was getting, but didn’t fix it :(.

@pmariner For the policy evaluation failed for this request, can you please check if you setup any rules for application or groups under policy? If the rule is set up by default, you can create a support ticket through an email to support@okta.com. One of our dev support engineers will take a further look. Thanks

Thanks Lijia. I only have the default policy, no customisations:

I will raise a support ticket back through our vendor, I just wanted to be sure I had done everything I could before stepping through each “suggestion” one by one.