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.
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.
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
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.
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?
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!
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
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
Roman Garasymovych
Thanks for a fast reply. The error was in oktaClient.js - dumb me put an incomplete url in orgUrl property.
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… 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!
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.
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.
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 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!
AlexDoom
I found the repo for this example here: https://github.com/oktadeve…
AlexDoom
The onClick handler for login/logout should look like this
onClick={() => this.props.auth.login()}
Lee Brandt
You are correct sir.
Jiwon Yune
Can you share how you created test users? Am I only allowed to register my email address?
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.
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.
leebrandt
You may have to enable user registration.
I will update the post soon.