Okta widget on localhost - custom localhost domain

[Ijp]

Hi,

I have a problem with Okta Widget and localhost.
I can login through Okta Widget only if I use localhost in domain.
The problem I have is, that our solution to work on localhost need custom localhost domain and not localhost. If I go through localhost, not all functionalities works in the application.

When I try to use the custom domain on Okta it sends me an error back:

AuthSdkError: PKCE requires a modern browser with encryption support running in a secure context.
The current page is not being served with HTTPS protocol. PKCE requires secure HTTPS protocol.

I understand that it is http and not https but it is possible to somehow work around it?

I have seen that I should be able to turn off PKCE by adding these options to my widget config:

var oktaConfig = {
issuer: oIssurerUri
, redirectUri: oRedirectUri
, clientId: oClientId
, pkce: false
, cookies: {
secure: false
}
}

But it doesn’t work. Is it possible to make it work like that or it must use HTTPS and that’s it?

Thank you,

[warren]

I believe it is because PKCE flow requires secure context.

Locally-delivered resources such as those with http://127.0.0.1 URLs, http://localhost and http://*.localhost URLs (e.g. http://dev.whatever.localhost/ ), and file:// URLs are also considered to have been delivered securely.

Secure contexts - Security on the web | MDN

What error do you encounter when you attempt to disable PKCE?

[Ijp]

Hi Warren,

Thank you for your replay.

My Okta Widget version:

7.1.1

My Okta widget settings:

var oktaConfig = {
issuer: oIssurerUri
, redirectUri: oRedirectUri
, clientId: oClientId
, pkce: false
, cookies: {
secure: false
}
}

var searchParams = new URL(window.location.href).searchParams;
oktaConfig.otp = searchParams.get(‘otp’);
oktaConfig.state = searchParams.get(‘state’);
const oktaSignIn = new OktaSignIn(oktaConfig);

My Okta Widget error:

{
“errorSummary”: “PKCE requires a modern browser with encryption support running in a secure context.\nThe current page is not being served with HTTPS protocol. PKCE requires secure HTTPS protocol.”,
“errorCode”: “INTERNAL”,
“errorLink”: “INTERNAL”,
“errorId”: “INTERNAL”,
“errorCauses”: ,
“name”: “AuthSdkError”
}

Okta throws the error:
When I go through custom http local domain so i.e., http://customdomain.com:8080

oktaSignIn = initialiseOktaSignIn(oIssurerUri, oRedirectUri, oClientId);
oktaSignIn.authClient.token.getUserInfo().then(function(user) {
document.getElementById(“messageBox”).innerHTML = "Hello, " + user.email + “! You are still logged in! :)”;
document.getElementById(“logoutUri”).style.display = ‘block’;
}, function(error) {
oktaSignIn.showSignInToGetTokens({
el: ‘#okta-login-container’
}).then(function(tokens) {
oktaSignIn.authClient.tokenManager.setTokens(tokens);
oktaSignIn.remove();
const idToken = tokens.idToken;
document.getElementById(“messageBox”).innerHTML = "Hello, " + idToken.claims.email + “! You just logged in! :)”;
document.getElementById(“logoutUri”).style.display = ‘block’;
setupCookiesOnBackEnd(caPostLoginPerformUri, caPostLoginRedirectUri, idToken);
}).catch(function(error) {
console.error(‘There was an error1!’, error);
});
}
);

It looks like the provided flag doesn’t turn the PKCE off.