Build User Registration with Node, React, and Okta

Developer Blog Comments
21

Matt Roig

Followed this and login is working great. Getting a Verification_Error in my Okta dashboard on submitting a new user for registration. Upon checking the log i am getting error: E0000022The endpoint does not support the provided HTTP method.404

22

Rafael Nogueira

Hi! Thanks for this post! I have a question though:
1. Why do we need a NodeJs server to register the user? Why can’t we just call the API from the client’s application?

23

Lee Brandt

You can, this was just for demonstrating how to use our service from the client and server.

24

disqus_lM0mjkOwDk

1980beyond I agree

25

X Yz

Any immediate plans to update this tutorial for the new authorization code flow (with PKCE) for SPA apps?

26

Matt Raible

Our SPA SDKs don’t yet support PKCE. It’s on our roadmap. Once they do support it, we’ll likely publish new tutorials rather than updating old ones. Follow us on @oktadev to get notified when we publish new posts. We have an RSS Feed too.

27

steve

for anyone receiving a 401 unauthorized response when registering in the app make sure the password follows the okta criteria. at least 8 characters, a lowercase letter, an uppercase letter, a number, no parts of your username. Took me some digging to realise this!

28

Travis Neiderhiser

If you get the error when clicking on “Login”, you need to call the login() method in a function:

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

Technically, it should not be an anchor tag either

<li><button classname=“link-button” onclick="{()" ==""> {this.props.auth.login()}}>Login</button></li>


.link-button {
background-color: transparent;
border: none;
cursor: pointer;
text-decoration: underline;
display: inline;
margin: 0;
padding: 0;
font-size: 16px;
}

.link-button:hover,
.link-button:focus {
text-decoration: none;
}

29

Steve Meckman

I have some users set up in my Okta account, and assigned to this application. When I try to login using one of their credentials, I am getting the following error:

Access to XMLHttpRequest at 'https://my-awesome-test.okt… from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Is there a way to resolve the CORS issue using create-react-app? How did everyone else get this to work?

30

Matt Raible

You should be able to add http://localhost:3000 as a trusted origin in your Okta account. You can do this at API > Trusted Origins.

31

Steve Meckman

Thanks for your response. Unfortunately I already have that configured, it doesn’t make a difference.

32

Steve Meckman

I ejected out of create-react-app, found the webpack.config.js file that was created, and added the following to the returned object:

devServer: {
headers: {
“Access-Control-Allow-Origin”: “https://my-awesome-test.okta.com:443”,
“Access-Control-Allow-Methods”: “GET, POST, PUT, DELETE, PATCH, OPTIONS”,
“Access-Control-Allow-Headers”: “X-Requested-With, content-type, Authorization”
}
}

Sadly, this also didn’t change a thing. I get the exact same error, including the following clause:

The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘'…

I am not sure where that (the '’ wildcard) is being set, or why the configuration in webpack.config.js is apparently being overridden. Where is the wildcard ‘*’ coming from?

Edit: In the Chrome dev tools network tab, for the https://my-awesome-test.okt… request being sent, one of the request headers is “Sec-Fetch-Mode” with a value of “no-cors”. I am not able to find much information about that header in Google, nor can I tell where it is being set by webpack. Does this ring a bell for anyone?

33

Matt Raible

I haven’t seen anything like this in the past. Maybe try a different browser like Firefox? I just ran through the tutorial myself and didn’t have any CORS issues. You can find my completed example at https://github.com/mraible/okta-node-react-example.

34

Steve Meckman

Thanks, I really appreciate your time with this. Unfortunately, in your repository, there is nothing in the client directory, and that is where I am experiencing the problem. It manifests itself In the login page, when I am entering the username and password of a test user and hit Submit.

35

Steve Meckman

Update: This works just fine in Firefox lol

36

Matt Raible

Sorry about that. I’ve since fixed it and re-added the client directory. I also updated this post to use the latest versions of dependencies. You can see links to specific changes at the changelog at the bottom.

37

Matt Raible

In that case, you might have a Chrome plugin that’s adding the header. If you’re using Chrome 77, that could be an issue too since they block 3rd party cookies by default. However, I don’t think that has anything to do with CORS.

38

Steve Meckman

Many thanks. I can’t tell you how much I appreciate your assistance.

39

Ben Wallis

Thanks, It’s mostly working. But I get this error in Firefox 69.0.2 when starting the app:

Unhandled Rejection (SecurityError): The operation is insecure.
navigator.serviceWorker.ready.then(registration => {

No error in Chrome.

40

Pierce Krouse

[SOLVED]
Right off the bat, I do a npm install in the api folder, and get a string of:
Unknown system error -122
I am using node version 12.16.1, npm version 6.13.4
The client folder, this works fine.

Any ideas?