Build a React Application with User Authentication in 15 Minutes
In this tutorial, you’ll start with a very simple React app with a couple of pages and some routing built in, and add authentication using Okta’s Sign-In Widget.
Sateesh Smart
Hi,
I am getting below error when i used the code from the repository you shared.
Refused to display https://dev-936324-admin.ok……
in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.
Matt Raible
Sateesh: Your {oktaOrgUrl} should not have “-admin” in it. Try removing it and see if it works.
Sateesh Smart
Thank you very much Matt, I spend a week digging into it 
Jeanbean
Where do the sessions go in this?
Lee Brandt
If you mean the tokens, they are in your application cookies.
Jeanbean
yes the tokens , but the code for the tokens is not discussed here. When I enter an email in , I get this error on the app page: Unable to connect to the server. Please check your network connection. The server is open in the terminal.
However the console says this: Failed to load https://dev-827074.oktaprev… Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.
app.bundle.js:91741 UnsupportedBrowserError {name: “UNSUPPORTED_BROWSER_ERROR”, message: “There was an error sending the request - have you enabled CORS?”}
In otherwords, where does the if (oktaSignIn.token.hasTokensInUrl()) {
oktaSignIn.token.parseTokensFromUrl( etc. go?
Matt Raible
This could be the same issue that Sateesh had below. Make sure your {oktaOrgUrl} does not have “-admin” in it. If it does, remove it and see if it works.
Jeanbean
nope -admin is not in it.
Matt Raible
Then you’ll need to allow CORS access to your client. Log in to your Okta org, navigate to API > Trusted Origins and add a new Origin with “http://localhost:3000” as its Origin URL. If you don’t see API > Trusted Origins in your menu, switch from Classic UI to Developer Console in the top left corner.
Jeanbean
Ok I added localhost:3000. When I reloaded the page, the odd thing is that Welcome with my email showed up in the left as if I had signed in, however I never entered it. When I logout and try entering a totally different email, It is a 404 error in the console.
Matt Raible
The reason you didn’t have to login is you were likely already logged in. You can confirm this by going to your Okta domain and logging out. If the 404 is from a /me endpoint, this happens because the Sign-In Widget looks for a session and there isn’t one (404 == not found).
Ithinks ithinks
Hi, I just wanted to know, Is HTTPonly flag set is mandate in this scenarios, Because if we set the HTTPonly flag for my tokens/cookie, then I’m unable to fetch it from the JS.
what if my browser application needs to read the access token, because it wants to use the information in the token?
Lee Brandt
I’m not sure what you mean. Where is the HTTPOnly flag that you are setting?
Matt Raible
Are you using an Okta tutorial to configure your Auth0 account? That won’t work. 
Matt Raible
Attached is a screenshot of what I see in my browser - with the Org URL highlighted. If you don’t see this screen, there’s a toggle in the top-left that allows you to toggle between the Classic UI and Developer Console. https://uploads.disquscdn.c…
Nate Barbettini
That is odd. We’d need to see your code in context to understand why it’s throwing that error. Do you have a github repo or code example that reproduces the problem?
Jared Gholston
I’ve never seen this approach to a react component integration. I’m curious why you didn’t make a component like so that we can render it like: <oktaloginwidget baseurl=“someUrl” etc=“someothersettings”/>
Steven McCullar
I finished the exercise and launch the redirect URL, and I see the login link, but when I click it, no login screen appears. There are some small differences between the well-documented description on the web site and the github version, which is the newer one, and the one I am using. Not clear what I am missing?
Steven McCullar
Solved. I needed to add the route path to the app.js file. I am good. Thank you for publishing this tutorial.