Cannot get widget example to work, fails silently

Hi. I am an okta n00b ( but I have been a full-stack dev for 10 years ) trying to get the sign-in widget example working, from here:

I have and Okta dev / trial account and last week I did a lot of messing around with the API, creating users, groups, assigning aps, etc. etc. That all went pretty well and made sense.

The widget though, just doesn’t seem to work at all post-login. If I copy / paste the code in the example and run it locally, the widget renders ( latest Chrome on Windows 10 ) and it definitely seems to authenticate. If I put in the wrong password, it tells me. If put in correct details and look at the network tab in developer tools I can see the profile for the user coming back in the JSON. But in the browser, all that happens is that the login box greys out, and the spinner just spins forever. I’ve stuck console.logs() in all the function calls, not one of them ever seems to get invoked. Also, if I change the client id in the oktaSignIn() parameters to garbage, the auth still works fine! It makes zero difference… which seems really odd. I have made sure the App is assigned to the group the user is assigned to, the group is active, the user is active, and the client ID in the oktaSignIn() parameters matches the App’s settings under Client Credentials.

What am I missing?

Try cloning and running one of the sample apps from GitHub. That should be more clear. There are quite a few, here’s the React one for example - GitHub - okta/samples-js-react: React Auth SDK sample

Thanks for the reply. Building an App in React or Angular adds several layers of dependency, and is not relevant to adding authentication to an existing page. Are there any other examples where that works?

Looks like you are having the same issue as I did here. Have you tried using other browsers? I found the widget works correctly in safari but exhibits the behavior you mentioned in both firefox and chrome. Apparently it is a known bug with chrome. This was what an official okta developer told me. So far no fix has been found at least from what I have been able to research

1 Like

I think I found the problem. The widget borks on cross-site cookies in Chrome. And I agree… looks like no fix. Glad I didn’t spend 5 days going through all the VueJS, Angular and React examples as was suggested! Looks like I’ll have to write middleware to solve it… not everyone has that luxury though. :open_mouth:

1 Like

Would you mind sharing your solution if you are able to find one? Have been stuck on this issue myself for quite a while and would appreciate the help as I don’t have much experience writing middleware

I’d write something in PHP and maybe proxy it ( so the cookie looks like it came from the same origin ), or bin the whole Okta widget approach and do it all via server-side API calls. You could do the same in NodeJS if you wanted. Must be causing a lot of grief for Okta customers, surprised it’s not a forum sticky TBH. I’ll pop back when I have something, might take a me a few days of messing around. Now I’m off to break the news to the stakeholders… :open_mouth:

1 Like

Following up on this because I found a fix (although not sure how permanent). This may be a dumb mistake but it turns out all we had to do was set pkce: false in our okta config and it works. I believe the reason Chrome wasn’t allowing the redirect initially because our app was only running on http (which is okay for our situation as we are working strictly within a VPN). Still trying to learn more and this may not be the best explanation but that resolved our issue. Hope this helps you as well :slight_smile:

Thanks for the suggestion. No joy with that config change here. Also, I made the changes as suggested by Okta here:

I have the test page from here:

With our credentials running here:

The developer console shows there is no change to the cross domain cookie issue.