# Sign In Widget AuthSdkError **URL:** \ **Category:** Questions\ **Created:** [May 27, 2021, 3:14pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432 "2021-05-27T15:14:26Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![EverydayDiesel](https://avatars.discourse-cdn.com/v4/letter/e/b5e925/32.png) [@EverydayDiesel](https://devforum.okta.com/u/EverydayDiesel)\ **Post date:** [May 27, 2021, 3:14pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/1 "2021-05-27T15:14:26Z")
Hello I am following this guide [https://developer.okta.com/code/react/okta\_react\_sign-in\_widget/#connect-the-routes](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? ---
**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\ **Post date:** [May 27, 2021, 3:34pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/2 "2021-05-27T15:34:03Z")
Okta React v5.1.x depends on Okta Auth JS 4.9.x. See [Okta React v5.1.2](https://github.com/okta/okta-react/releases/tag/okta-react-5.1.2) for more information. ---
**Author:** ![EverydayDiesel](https://avatars.discourse-cdn.com/v4/letter/e/b5e925/32.png) [@EverydayDiesel](https://devforum.okta.com/u/EverydayDiesel)\ **Post date:** [May 27, 2021, 3:49pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/3 "2021-05-27T15:49:07Z")
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. ---
**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\ **Post date:** [May 27, 2021, 4:12pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/4 "2021-05-27T16:12:57Z")
Yes. I updated this one recently. > **[A Quick Guide to React Login Options](https://developer.okta.com/blog/2020/12/16/react-login)** > > This tutorial shows you how to add login options to a React app. Includes redirecting to log in, embedding a sign-in widget, and using plain ol' JavaScript. ---
**Author:** ![EverydayDiesel](https://avatars.discourse-cdn.com/v4/letter/e/b5e925/32.png) [@EverydayDiesel](https://devforum.okta.com/u/EverydayDiesel)\ **Post date:** [May 27, 2021, 11:27pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/5 "2021-05-27T23:27:45Z")
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](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. ![image](https://global.discourse-cdn.com/oktadev/original/2X/5/56d9c8c476be596982554d247c48b3531a45ec8b.png) 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](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](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 ---
**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\ **Post date:** [May 28, 2021, 4:07am UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/6 "2021-05-28T04:07:14Z")
Security \> API \> Trusted Origins (I think). ---
**Author:** ![mraible](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/mraible/32/37_2.png) [@mraible](https://devforum.okta.com/u/mraible)\ **Post date:** [May 28, 2021, 4:08am UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/7 "2021-05-28T04:08:31Z")
The redirect error means you need to add the redirect\_uri parameter you’re sending to the redirect URIs in your app. ---
**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\ **Post date:** [May 28, 2021, 4:10pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/8 "2021-05-28T16:10:15Z")
> [@EverydayDiesel](#): > > 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 Yup, looks like your app is trying to use [http://localhost:300/callback](http://localhost:300/callback) as the redirect\_uri, but you have only allowed [http://localhost:3000/login/callback](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](http://localhost:300/callback), to the application settings, that error should go away. ---
**Author:** ![EverydayDiesel](https://avatars.discourse-cdn.com/v4/letter/e/b5e925/32.png) [@EverydayDiesel](https://devforum.okta.com/u/EverydayDiesel)\ **Post date:** [May 29, 2021, 4:45am UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/9 "2021-05-29T04:45:07Z")
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. ---
**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\ **Post date:** [February 12, 2024, 9:01pm UTC](https://devforum.okta.com/t/sign-in-widget-authsdkerror/14432/10 "2024-02-12T21:01:25Z")
Closed on February 12, 2024, 9:01pm UTC