How to wait for the Widget feedback?


#1

Hello,

I want to make my website depending of Okta widget authentication. I’m using vanilla Javascript and HTML / CSS.
I wrote a function in an external script (I will post it after) and I call this function in every html pages. This function is wrapping the Okta Signin Widget to manage credentials. I notice the functions are asynchronous.
I have two problems because of the asynchronous execution :

  • Some of the HTML need information retrived from Okta so they get undefined value (because of asynchronous result)
  • The widget is shown later than HTML pages in case it need to show the widget or refuse accesses

So my main question is : how to make my function synchronous ? I tried with awayt / sync javascript function but i didn’t achieve anything. Is there a callback available i’m missing ?

Thanks for you help !!

The code :

function invokeOkta(onLoginPage) {
onLoginPage = onLoginPage || false
var oktaSignIn = new OktaSignIn({
    baseUrl: "xxxx",
    clientId: "xxx",
	logo: 'xxxx',
	redirectUri: "xxx" ,
    authParams: {
      issuer: "https://xxxx",
      responseType: ["token", "id_token"],
      display: "page"
    }
  });

  if (oktaSignIn.token.hasTokensInUrl()) {
    oktaSignIn.token.parseTokensFromUrl(
      // If we get here, the user just logged in.
      function success(res) {
        var accessToken = res[0];
        var idToken = res[1]
        oktaSignIn.tokenManager.add("accessToken", accessToken);
        oktaSignIn.tokenManager.add("idToken", idToken);


      },
      function error(err) {
        console.error(err);
      }
    );
  } else {
    oktaSignIn.session.get(function (res) {
      // If we get here, the user is already signed in.
      if (res.status === 'ACTIVE' && !onLoginPage)
		{
			// do some code

			return;
		}

      // If we get here, the user is not logged in, so we should show the sign-in form.
      if(onLoginPage) {
        oktaSignIn.renderEl(
            { el: '#sign-in-container' },
              function success(res) {},
                function error(err) {
                  console.error(err);
            }
        );
      } else {
        window.location.href = "login.html";
      }
    });
  }

}