# Build a React Application with User Authentication in 15 Minutes

**URL:** <https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765>\
**Category:** Developer Blog Comments\
**Created:** [November 21, 2017, 5:37pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765 "2017-11-21T17:37:42Z")\
**Posts on this page:** 10\
**Page:** 2

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [June 12, 2018, 6:38pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/21 "2018-06-12T18:38:30Z")

</div>

**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!

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [June 12, 2018, 6:51pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/22 "2018-06-12T18:51:49Z")

</div>

**Matt Raible**

Our [Okta Sign-In Widget and React documentation](https://developer.okta.com/code/react/okta_react_sign-in_widget#create-a-widget-wrapper "https://developer.okta.com/code/react/okta\_react\_sign-in\_widget#create-a-widget-wrapper") has an example like this. I tried to copy/paste it below, but Disqus keeps jacking up the HTML.

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [June 29, 2018, 5:48am UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/23 "2018-06-29T05:48:45Z")

</div>

**mike**

’Backbone’ is not defined

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [August 19, 2018, 9:07am UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/24 "2018-08-19T09:07:34Z")

</div>

**ayeshasilvia**

I had to enable CORS and add localhost:3000 as a trusted origin (following this: [https://developer.okta.com/…](https://developer.okta.com/docs/api/getting_started/enabling_cors) "https://developer.okta.com/docs/api/getting\_started/enabling\_cors)") 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`

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [August 19, 2018, 2:34pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/25 "2018-08-19T14:34:19Z")

</div>

**Matt Raible**

Yes, adding [http://localhost:3000](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.

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [January 23, 2019, 8:16pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/26 "2019-01-23T20:16:56Z")

</div>

**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…](https://github.com/okta/okta-signin-widget "https://github.com/okta/okta-signin-widget") ). 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.

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [September 12, 2019, 4:44pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/27 "2019-09-12T16:44:13Z")

</div>

**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.

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [September 16, 2019, 12:40pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/28 "2019-09-16T12:40:55Z")

</div>

**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.

[https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/237cc06fe6607b4b9bbc9d76452bce57c1e81b5f598d631f8fc6ed53f90cca52.png "https://uploads.disquscdn.com/images/237cc06fe6607b4b9bbc9d76452bce57c1e81b5f598d631f8fc6ed53f90cca52.png")

Then I created a new SPA, using port 3000.

[https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/60ba36b5cfe9e4cbc4ad134152ecfe3722fab89690dbbd4b13bf3a3a9a5c42f5.png "https://uploads.disquscdn.com/images/60ba36b5cfe9e4cbc4ad134152ecfe3722fab89690dbbd4b13bf3a3a9a5c42f5.png")

After clicking **Done** , I navigated to **API** \> **Trusted Origins** and confirmed that a new trusted origin was created.

[https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/20f8340059acb7634eda8042ccc466ab63edb9a4d0afc8ed6124fe7d831e7d58.png "https://uploads.disquscdn.com/images/20f8340059acb7634eda8042ccc466ab63edb9a4d0afc8ed6124fe7d831e7d58.png")

Note that if you edit your app to change its redirect URI _after_ you initially create it, a trusted origin will NOT be created.

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [June 1, 2020, 11:35am UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/29 "2020-06-01T11:35:59Z")

</div>

**Herve Tusse**

Hi Nice content but i got an error running this : ‘Backbone’ is not defined

---

<div class="post-metadata">

**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\
**Post date:** [June 1, 2020, 12:01pm UTC](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765/30 "2020-06-01T12:01:13Z")

</div>

**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](https://github.com/leebrandt/okta-react-widget-sample "https://github.com/leebrandt/okta-react-widget-sample"), does it work?

[Previous page](https://devforum.okta.com/t/build-a-react-application-with-user-authentication-in-15-minutes/16765.md?page=1)
