leebrandt
That’s an awesome idea. These tutorials are meant to be simplistic to illustrate a quick idea, but look forward to that in a future post! Thanks, Jared!
Matt Raible
Our Okta Sign-In Widget and React documentation has an example like this. I tried to copy/paste it below, but Disqus keeps jacking up the HTML.
mike
’Backbone’ is not defined
ayeshasilvia
I had to enable CORS and add localhost:3000 as a trusted origin (following this: https://developer.okta.com/… to get things going… is that the right thing to do? Otherwise I kept getting this error on the browser console: login:1 Failed to load <a href="https://dev-418782.oktapreview.com/api/v1/sessions/me:" rel="nofollow noopener" title="https://dev-418782.oktapreview.com/api/v1/sessions/me:">https://dev-418782.oktaprev...</a> No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.<br>There was an error sending the request - have you enabled CORS
Matt Raible
Yes, adding http://localhost:3000 as a trusted origin is required. If you specify localhost:3000 as a login redirect URI when creating your app, a trusted origin is created automatically.
benjamindanis
I was having the same problem as Jeanbean. I would get a 404 from the /me endpoint unless I was already logged into Okta in another window… at that point the tutorial app recognized that I was logged in and rendered the welcome div. I fixed this by installing an older version of the okta-signin-widget @2.15.0 (according to NPM this is the latest version released, following the hyperlink given in the tutorial - https://github.com/okta/okt… ). If the @okta folder is not present in the root level of node_modules (that was another issue I was having), I suggest trying this solution.
John Keath
You need to fix the instructions, to include going into “Trusted Origins” section under “Security”, and adding the CORS Redirect stuff, otherwise this fails to log you in with a completely worthless and actually misdirection message of “Unable to connect to the server. Please check your network connection.”. Dev tools console and network traffic show nothing. The reason I didn’t jump to CORS right away was the bad information provided by Matt Raible below stating that the trusted origin is created automatically, as this did not happen for my app.
Matt Raible
Hello John,
The instructions are correct. If you create a SPA app on Okta and specify port 3000 for the redirect URI, a trusted origin will automatically be created for you. I just went through this process to confirm it still works. I started by deleting all my trusted origins.
Then I created a new SPA, using port 3000.
After clicking Done, I navigated to API > Trusted Origins and confirmed that a new trusted origin was created.
Note that if you edit your app to change its redirect URI after you initially create it, a trusted origin will NOT be created.
Herve Tusse
Hi Nice content but i got an error running this : ‘Backbone’ is not defined
Matt Raible
Hello Herve,
This blog post is kinda old, but I’d like to help you get it working. Are you using the same versions used in this post or are you trying to use the latest versions?
Also, if you try to run the example code from GitHub, does it work?