Okta Not Redirecting due to insecure connection

Question

I got a request from the partner website to establish SSO with them and they provided their OKTA keys to us.

Vue.use(Auth, {
  issuer: 'https://{theirURL}.com/',
  clientId: '{theirCliendId}',
  redirectUri: 'http://localhost:8080/auth/callback',
  scope: 'openid profile email'
})


let token = {};

const handleAuth = cb => {
  webAuth.parseHash((error, authResult) => {
    if (authResult && authResult.accessToken && authResult.idToken) {
      token.accessToken = authResult.accessToken;
      token.idToken = authResult.idToken;
      token.expiry = new Date().getTime() + authResult.expiresIn * 100000000;
      cb();
    } else {
      console.log(error);
    }
  });
};

const isLogged = () => {
  console.log("heyt", token)
  return token.accessToken && new Date().getTime() < token.expiry;
};

const login = () => {
  webAuth.authorize();
};

const logUserOut = () => {
  token = {};
};

above is the code I used for setting up and I was able to get to their Login page from my website and I was able to signin.

However, when it was redirecting to my side (LOCALHOST), it gave me an error as below

This site can’t provide a secure connection

What am I doing wrong? Is it impossible to test in on localhost? They mustve been testing on localhost when they were developing.

Please let me know what to do!! Thanks in advance!

Edit:

Access to fetch at 'https://{theirURL}' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This message is shown on console after it was logged in and tried to redirect back to my page.

@MattRaible their Authorization url is /oauth/authorize. I am able to get to the login stage — john316, Apr 18 '21 at 01:21
I'm taking about the issuer, not the authorize endpoint. Okta has two kinds of authorization servers. The org Auth server cannot validate JWTs outside of Okta. https://developer.okta.com/docs/reference/api/authorization-servers/ — Matt Raible, Apr 18 '21 at 14:53

kissu · Accepted Answer · 2021-04-18T02:06:42.673

1

The quickest and simplest solution is the following:

"serve": "vue-cli-service serve --https true"

Then, just say "okay" when it's warning you that the connection is not safe and you're ready using https on localhost!

As shown in this answer: https://stackoverflow.com/a/64149923/8816585

edited Apr 18 '21 at 02:06

answered Apr 18 '21 at 01:29

kissu

40,416
14
65
133

`Access to fetch at 'https://{theirURL}/.well-known/jwks.json' from origin 'https://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.` I still get this error. – john316 Apr 18 '21 at 01:50
1

This is a totally different issue. CORS is a security thing that needs to be done on the backend (here, the okta dashboard I guess) to whitelist your localhost (and allow your client side code to perform actions on their service). A quick search may give you a lot of results ! – kissu Apr 18 '21 at 01:55
do you think it is the partner website's setting that is causing the problem? Should I ask them to get localhost CORS whitelisted? – john316 Apr 18 '21 at 01:57
1

Yep, exactly. Also, be sure to give them the port (`https://localhost:8080`) too, it will be required as `localhost` is usually not enough for this kind of service. – kissu Apr 18 '21 at 02:02

Okta Not Redirecting due to insecure connection

1 Answers1