# Build User Registration with Node, React, and Okta

**URL:** <https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824>\
**Category:** Developer Blog Comments\
**Created:** [February 6, 2018, 6:56pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824 "2018-02-06T18:56:32Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [February 6, 2018, 6:56pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/1 "2018-02-06T18:56:32Z")

</div>

[Build User Registration with Node, React, and Okta](https://developer.okta.com/blog/2018/02/06/build-user-registration-with-node-react-and-okta)

In this tutorial, you’ll learn how to set up a Node API that feeds a React UI, and build a user registration that keeps the user’s information private and personal.

---

<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:** [February 20, 2018, 10:14pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/2 "2018-02-20T22:14:57Z")

</div>

**DB**

[SOLVED]  
was getting a VERIFICATION\_ERROR on the Okta dashboard when registering new users.

Turns out Okta has some great built in validation rules for the API, but I didn’t know about them when creating test users 😉 Once I logged the response from Okta err and made a proper set of test users everything is fine!

Great write up, thanks for having great walk throughs.

---

<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:** [March 24, 2018, 9:16am UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/3 "2018-03-24T09:16:20Z")

</div>

**C0smn**

hey,  
"In the app.js file at the root of the Node app, update the file to have all calls route to /api/\<something\>. You’ll see a section below the block of app.use statements."  
Up until this point you point out paths and how the file should look after the edits, then comment on why you changed what you changed. Then you just mention something about the app.js and sign off, this is why i’m confused as to where I should make those changes for the 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:** [March 30, 2018, 6:44pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/4 "2018-03-30T18:44:58Z")

</div>

**leebrandt**

Sorry. In the app.js file, right below a bunch of app.use… statements. By default it puts them on the root:

app.use(’/’, index);  
app.use(’/users’, users);

I just suggest moving them to the “api” route:

app.use(’/api’, index);  
app.use(’/api/users’, users);

Hope that helps.

---

<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:** [April 15, 2018, 3:42pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/5 "2018-04-15T15:42:24Z")

</div>

**TurtleWolf**

I’ve been doing my research to do this with LoopBack… which is built on top of Express, but they are not the same. I may have more specific questions as I go through the process. Do you have any similar material that covers LoopBack instead?

---

<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:** [April 15, 2018, 4:00pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/6 "2018-04-15T16:00:53Z")

</div>

**Randall Degges**

We do not right now. To make Okta work with Loopback is a bit more involved, as there’s a lot of considerations you need to take into account. I wrote a Loopback library a few years ago for a similar service, but it took a lot of effort.

If you do end up building an integration, I’d love to see it!

---

<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:** [May 4, 2018, 4:51pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/7 "2018-05-04T16:51:32Z")

</div>

**Roman Garasymovych**

[SOLVED]  
Great blog. However, I am getting a 400 status when registering new user. I tracked the error to this  
 oktaClient.createUser(newUser)  
 .then(user =\> {  
 res.status(201);  
 res.send(user);  
 })  
 .catch(err =\> {  
 res.status(400);  
 res.send(err);  
 })

at users.js

Error: only absolute urls are supported

---

<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:** [May 4, 2018, 5:09pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/8 "2018-05-04T17:09:39Z")

</div>

**leebrandt**

I’d double-check your oktaClient.js file and maybe check the developer tools to see what the actual URL of the call is. I seem to remember seeing this error once before, and IIRC it was something simple (like a trailing slash getting doubled up or missing in the oktaClient file).

also, feel free to email me at [lee.brandt@okta.com](mailto:lee.brandt@okta.com)

---

<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:** [May 4, 2018, 5:17pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/9 "2018-05-04T17:17:44Z")

</div>

**Roman Garasymovych**

Thanks for a fast reply. The error was in oktaClient.js - dumb me put an incomplete url in orgUrl property.

---

<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 6, 2018, 4:48pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/10 "2018-06-06T16:48:12Z")

</div>

**HM**

[SOLVED]

Great tutorial. I’ve been testing the feasibility of using this in a production environment, using npm run build instead of npm start, however this seems to break the registration component - I’m getting ‘POST [https://dev-xxxxxx.oktaprev…](https://dev-xxxxxx.oktapreview.com/api/v1/authn "https://dev-xxxxxx.oktapreview.com/api/v1/authn") 401 (Unauthorized)’ in the console when I try to register a user.

Everything works as expected in when using npm start to serve the client - any ideas on why this might be breaking with a static bundle?

----

The answer is of course that you need to move the static files to the root of the Node 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:** [June 13, 2018, 5:17pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/11 "2018-06-13T17:17:52Z")

</div>

**Matt D**

I had one problem getting this working. When I clicked on the “Login” link, I got the error following error on the browser console:

```
Uncaught (in promise) TypeError: Converting circular structure to JSON
at Object.stringify (<anonymous>)
at stringify (stringify.js:4)
at Auth._callee6$ (Auth.js:318)
…
```

So I changed line 33 in `Navigation.js` from:

```
<li><a href=“javascript:void(0)” onClick={this.props.auth.login}>Login</a></li>
```

to:

```
<li><link to="/login">Login</link></li>
```

And everything appears to be working well.

Useful tutorial overall – would be great if the code were in Github someplace.

---

<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, 8:26pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/12 "2018-06-29T20:26:48Z")

</div>

**mike**

How will I go about implementing this into a react app, that already has 2 back end servers running at 8080, and 8888 ? When I add the proxy to the client app’s package.json, my app bombs.

---

<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:** [July 26, 2018, 11:42pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/13 "2018-07-26T23:42:18Z")

</div>

**html5cat**

Great post! I’m getting the following error when I try to login:  
`undefined error AuthApiError {name: "AuthApiError", message: "Authentication failed", errorSummary: "Authentication failed", errorCode: "E0000004", errorLink: "E0000004", …}`

And this one when I try to register a new user:  
POST [http://localhost:3000/api/users](http://localhost:3000/api/users) 400 (Bad Request)  
POST https://dev-\*\*\*.oktapreview.com/api/v1/authn 401 (Unauthorized)

Do you happen to have a GitHub repo with the full code running?   
Thank you!

---

<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 4, 2018, 2:52am UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/14 "2018-08-04T02:52:26Z")

</div>

**AlexDoom**

I found the repo for this example here: [https://github.com/oktadeve…](https://github.com/oktadeveloper/okta-node-react-registration-example "https://github.com/oktadeveloper/okta-node-react-registration-example")

---

<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 4, 2018, 2:53am UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/15 "2018-08-04T02:53:16Z")

</div>

**AlexDoom**

The onClick handler for login/logout should look like this

onClick={() =\> this.props.auth.login()}

---

<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 15, 2018, 6:15pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/16 "2018-08-15T18:15:12Z")

</div>

**Lee Brandt**

You are correct sir.

---

<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, 3:56am UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/17 "2018-08-19T03:56:08Z")

</div>

**Jiwon Yune**

Can you share how you created test users? Am I only allowed to register my email address?

---

<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 20, 2018, 1:30am UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/18 "2018-08-20T01:30:44Z")

</div>

**leebrandt**

The only way I can think of to handle multiple backend servers is to have a load-balancer that runs at some port, say 3001, and then have that route the requests to the appropriate services. This post is mostly about having the API and UI as one entity that you can deploy together. I tend to have the UI and API separate.

---

<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 20, 2018, 1:34am UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/19 "2018-08-20T01:34:57Z")

</div>

**leebrandt**

Not at all. You can create users with any email. Just bear in mind that if you have email verification turned on, the users won’t be able to log in until the email verification link is clicked.

I turned off Email verification for my users in the Okta dashboard.

---

<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 13, 2018, 6:11pm UTC](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824/20 "2018-09-13T18:11:16Z")

</div>

**leebrandt**

You may have to enable user registration.

[https://developer.okta.com/…](https://developer.okta.com/blog/2018/07/23/build-a-simple-crud-app-with-flask-and-python#step-4-enable-user-registration "https://developer.okta.com/blog/2018/07/23/build-a-simple-crud-app-with-flask-and-python#step-4-enable-user-registration")

I will update the post soon.

[Next page](https://devforum.okta.com/t/build-user-registration-with-node-react-and-okta/16824.md?page=2)