Sign In Widget AuthSdkError

Hello

I am following this guide
https://developer.okta.com/code/react/okta_react_sign-in_widget/#connect-the-routes

but I get error

“AuthSdkError: Passed in oktaAuth is not compatible with the SDK, okta-auth-js version 4.x is the current supported version.”

I have made no changes other then what the tutorial instructed. How can I get this to work?

Thanks in advance for any help you can give.

package.json

  "dependencies": {
    "@okta/okta-auth-js": "^5.0.2",
    "@okta/okta-react": "^5.1.2",
    "@okta/okta-signin-widget": "^5.6.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

I could downgrade the package.json version but I dont think this it the right approach since this is related to security. How do I make this work?

Okta React v5.1.x depends on Okta Auth JS 4.9.x. See Okta React v5.1.2 for more information.

Hello and thank you for the reply. Is there a working guide that I can follow that will show me how to use the widget in my application? That link has tons of errors (following README.md instructions) I am just looking for a simple SPA authentication guide that works.

Yes. I updated this one recently.

Hello, Thank you for the link. I was able to get that one to work…well kind of. Right now I am running into CORS message.

Access to fetch at ‘https://dev-MY_API_UID.okta.com/api/v1/authn’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I dont see where I can enable coors on the okta dev dashboard

I also found this
https://support.okta.com/help/s/question/0D51Y00008Mubcl/cors-exception-no-accesscontrolalloworigin-header-is-present-on-the-requested-resource?language=en_US

so I add the orgin of https://localhost:3000 and then I get a 400 bad request

Identity Provider: Unknown

Error Code: invalid_request

Description: The ‘redirect_uri’ parameter must be a Login redirect URI in the client app settings: https://dev-##################-admin.okta.com/admin/app/oidc_client/instance/xxxxxxxxxxxxxxx#tab-general

​ GET https://dev-########.okta.com/oauth2/default/v1/authorize?client_id=xxxxxxxxxxx&code_challenge=xxxxxx-I&code_challenge_method=xxxxxx&nonce=xxxxxxxxxxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&response_type=code&sessionToken=xxxxxxxxxx&state=lxxx2MZR9KRsb15dq2l3N9leHXKxq351IIGBcc2GZ5DRFbgzwBTIPOMB1Il15F&scope=openid%20email%20profile 400
_setLocation @ localhost:3000/stati…~main.chunk.js:4568
(anonymous) @ localhost:3000/stati…~main.chunk.js:2357
Promise.then (async)
re @ localhost:3000/stati…~main.chunk.js:2339
value @ localhost:3000/stati…~main.chunk.js:4260
(anonymous) @ localhost:3000/stati…~main.chunk.js:4249
value @ localhost:3000/stati…~main.chunk.js:4242
(anonymous) @ localhost:3000/stati…~main.chunk.js:4637
u @ localhost:3000/stati…~main.chunk.js:5677
(anonymous) @ localhost:3000/stati…~main.chunk.js:5657
e. @ localhost:3000/stati…~main.chunk.js:5710
(anonymous) @ localhost:3000/stati…~main.chunk.js:4483
ne @ localhost:3000/stati…~main.chunk.js:4459
value @ localhost:3000/stati…~main.chunk.js:4622
signIn @ localhost:3000/stati…s/main.chunk.js:902
authorize?client_id=xxxxxxxxxxxxxxxxxx&code_challenge=xxxxxxxxxxxxxxxxxxx-I&code_challenge_method=S256&nonce=xxxxxxxxxxxxxxxxxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&response_type=code&sessionToken=xxxxxxxxxxxxxxxxxxxxxxxx&state=lRWuHt2MZR9KRsb15dq2l3N9leHXKxq351IIGBcc2GZ5DRFbgzwBTIPOMB1Il15F&scope=openid email profile:110 error.errorCode: invalid_request, error.description: The ‘redirect_uri’ parameter must be a Login redirect URI in the client app settings: https://dev-########-admin.okta.com/admin/app/oidc_client/instance/0xxxxxxxxxxxxxxxx6#tab-general

Security > API > Trusted Origins (I think).

The redirect error means you need to add the redirect_uri parameter you’re sending to the redirect URIs in your app.

Yup, looks like your app is trying to use http://localhost:300/callback as the redirect_uri, but you have only allowed http://localhost:3000/login/callback as a “Sign-in redirect URI” for the application in Okta. If you add this one, http://localhost:300/callback, to the application settings, that error should go away.

Thank you so much Andrea and mraible. It is working now.

This takes care of how to secure/restrict secured areas of the front end (reactjs client rendering)

Do either of you have any hints on how I secure the node.js backend (api calls only)?

Im just an old C/C++ guy trying to learn this web stuff.

The main thing I am confused on, is when the user logs on, how do I also setup the authentication (auth2.0 / jwt / or whatever is appropriate) to keep people from just calling the API directly. An example of how to do this in combination of the reactjs front end would be awesome.