Okta Widget Error

Error in this source.
What is wrong?
{mydomain} is replacing.
ID and Password is correct.
Error Message is [There was an unexpected internal error. Please try again.].

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Okta Widget</title>
  <meta name="description" content="Okta Widget">

  <script src="https://global.oktacdn.com/okta-signin-widget/3.2.0/js/okta-sign-in.min.js" type="text/javascript"></script>
  <link href="https://global.oktacdn.com/okta-signin-widget/3.2.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/> 

</head>
<body>

<div id="widget-container"></div>
<script>
  var config = {
    logo: './logo.png',
    baseUrl: 'https://{mydomain}.okta.com/',
    language: 'en'
  };

  var signIn = new OktaSignIn(config);

  signIn.renderEl({

    el: '#widget-container'

  }, function success(res) {

    if (res.status === 'SUCCESS') {

      console.log('Do something with this sessionToken', res.session.token);
      res.session.setCookieAndRedirect('https://{mydomain}.okta.com/app/UserHome');

    } 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
    }
  }, function error(err) {
    var errorEl = document.createElement('div');
    errorEl.textContent = 'Error! ' + err.message;
    document.body.insertBefore(
      errorEl,
      document.body.firstChild
    );
  });
</script>
</body>
</html>

Hi @hashizumes

Can you please check the browser’s javascript console and let us know what is the JavaScript error that you are seeing?

Hi. thanks

Console error is this.

Access to XMLHttpRequest at ‘https://{mydomain}.okta.com/api/v1/authn’ from origin ‘null’ has been blocked by CORS policy:
Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Hi @hashizumes

Thanks for providing the error. The widget does a CORS request to /api/v1/authn endpoint to authenticate the user. This requires your web server to be added in Okta under Admin >> Security >> API >> Trusted Origins. (or Admin >> API >> Trusted Origins) if using the admin developer console interface.

Based on the error, I see that you are using a local file in the browser. Can you please add this file on a web server (either public or localhost), add the hostname inside the Trusted Origins section with both CORS and Redirect options enabled and then try again?

Thank you!
This issue has been resolved!

1 Like