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";
}
});
}
}