Stanley_Krute
I also was unable to get this to run. Wasted several hours trying everything noted here.
I spent a number of years writing user docs and sample code. It is VITAL that such things WORK !!
Grrrrrr … not a happy camper.
Matt Raible
I was able to make it work a few months ago. See my results at https://gist.github.com/mra…
KingJovs
Org URL is not working. When i put in the script the login disappears.
Matt Raible
Are you sure you have a Okta developer account? I got it working with this code a few months ago.
Canto74
Hi, not sure if missed anything. How is it possible to add a LOGOUT button?
Matt Raible
Hello! I created an example using this blog post that has a logout button. https://gist.github.com/mra…
Canto74
Hi Matt. Thanks for this. I have some more questions that may seem silly…I am just trying to figure this out. Must I post them here or is there a way to send the questions to you in a private message?
Thanks,
Blaise
Matt Raible
No questions are silly! If it’s related to this blog post, please ask it here. If not, hit up our developer forums. https://devforum.okta.com/
Canto74
Thanks, okay so the first one is can the login page be redirected to a page that is ‘protected’ by the login script. And then, I tried to publish the project to my hosting company, the pages shows up perfectly but then once I enter username and password it give an error about not being able to connect to the server. I assume that there is potentially something I need to do in my hosting to give it access to OKTA?
Thanks,
Matt Raible
You probably need to allow the URL for your server in the Okta app, or in the trusted origins. If you see a 400 error when you try to login, you need to add a redirect URL to your app. If you see a CORS error in your browser’s console, you need to add your app’s URL as a trusted origin in API > Trusted Origins.
Canto74
Thanks, got it working.
So how do you then get the login to open a new webpage?
Matt Raible
This is a pretty minimal example that just shows how to protect a web page. If you want to use Okta in a SPA (single-page app), I recommend you use one of our JavaScript SDKs with the framework you’re using. They’re all contained in our okta-oidc-js project. You can also use okta-auth-js, but it’s a pretty low-level library. All our JS libraries, including the Sign-In Widget, use it under the covers.
Kendall LeBerte
Okay, I’ve been running into issues for a couple days now and Googling this until my fingers fall off every night. Maybe someone can help me determine the issue faster! Please note - I’m coming from a place of either being a business professional trying to solve some basic code, or you could view me as a really really bad software developer. Point being, I may need things in simpler less technical terms if possible, but happy to look up anything I need that I don’t know!
At this point, I’ve literally just copy pasted the code below into an HTML doc to try and isolate the issue. I’m running the code on a test URL on our website and running into the below error (attached photo 404/405 error). https://uploads.disquscdn.c…
Likely worth noting, is that I only get the 405 error after I try to login and get the unexpected internal error. The console does return a 404 error from that same JS line (10245) before I even try to login however. Best I can tell, it looks like it’s running everything correctly on the client side but having an issue when trying to connect with the OKTA site from the xhr.send. Does this sound right? More importantly, any recommendations on workarounds?
Thank you in advance to anyone willing to help out!
Matt Raible
@canto74 I don’t think it’s possible to configure the sign-in widget to open in a new page. Can you please explain your use case and why you’d like this functionality?
Matt Raible
Hello Kendall,
I discovered an issue with this tutorial today. It doesn’t specify you need to enable Implicit Flow in your Okta app settings. This used to be the default when v2.16.0 of the Sign-In Widget was released. I’ll update this post to reflect that.
If you want to use v4.3.0 of the widget, the code does change quite a bit. I published working examples for both 2.16.0 and 4.3.0 as a Gist on GitHub.
1 Like
Kendall LeBerte
Thanks, Matt!
I think that helped me make some progress using the code you used for version 4.3. It looks as though I’m successfully logging in based on the logs from my admin dashboard. That said, I’m still running into a couple issues. After logging in, the message box doesn’t change, and the option to log out isn’t appearing. The login Widget does however disappear unless I refresh the page.
I think I might be getting a false negative on the client JS though. When I run the code from the attached screenshot, my console always returns “User is logged in” in the developer console of Chrome. https://uploads.disquscdn.c…
But if I’m understanding the “if” statement in the JS script correctly, isn’t the logic: "Check to to see if there’s a token in the URL - if so that means they just logged in a moment ago. Edit the message box and tell them they just logged in.If there isn’t a token in the URL, they session may already be active. Check to see if the user info is available from the token properties, and if it is tell the user they are still logged in. If there’s not token or user information then the just the initlal JS files will run and load the login Widget. Does that sound right?
Because if so, I feel like maybe I have something wrong in the dependencies here. I just went to a completely different instance and profile in Chrome that I haven’t logged into yet, and it still told me the User was logged in.
(second Screenshot) https://uploads.disquscdn.c…
Thank you again for all your help and patience!
Matt Raible
The hasTokensInUrl() block will only be called when a redirect back to your app from Okta happens, or if you refresh the page. The redirect usually happens so fast that you barely see it, but it does happen.
As far as the JS logic, yes, you are correct.
If you’re using a new incognito window, it shouldn’t show you as logged in. Make sure that your “logged in” console.log is in the same block that gets the user’s information. Putting it outside that block (as you have in the above screenshot) is merely saying that there were no tokens in the URL.
Kendall LeBerte
Oh whoops, good catch, ty! I went ahead and adjusted the JS code to put the console log within the same block and it no longer shows me logged in when I’m not. But I’m still running into nothing happening after I log in as far as the message box changing. It keeps the initial message of, “you are not logged in etc…”. The logout button also doesn’t show.
Even when I refresh the page, shouldn’t it show that I just logged in if that retriggers the hastokensinurl? Or does refreshing the page completely reset the session? I apologize if these are rookie questions/mistakes on my part haha!
Matt Raible
I was mistaken. The hasTokensInUrl() will only be called after you login. Can you compare the code from my Gist with yours? I tried them both with my developer account yesterday and they worked just fine.