# Ignition 8 - Webdev - React front-end **URL:** \ **Category:** Ignition\ **Created:** [March 5, 2020, 9:21pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856 "2020-03-05T21:21:57Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [March 5, 2020, 9:21pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/1 "2020-03-05T21:21:57Z")
I try to configure Webdev with Authentication. I build a front-end web application with React and try to reach my Webdev module. If I don’t use Authentication all works great, but with Authentication I don’t reach my module, I always received an 401 http error. I have tried with fetch() and axios(). Below a code i’ve tried. const token = window.btoa(`${self.state.username}:${self.state.password}`) let auth = 'Basic ’ + token let h = new Headers(); h.append(‘Content-Type’, ‘application/json’); h.append(‘Accept’, ‘application/json’); h.append(‘Authorization’, auth); const API = apiBaseUrl+“get\_buffer?m” fetch(API, { withCredentials: true, method: ‘GET’, headers: h, }) Hope that anybody can help me to fix that! ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [March 5, 2020, 9:28pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/2 "2020-03-05T21:28:30Z")
What Ignition version? Is there any content attached to the 401 result? Does the user you’re trying to authenticate as have any roles assigned? Are there any role restrictions on the endpoint you’re trying to reach? ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [March 5, 2020, 9:35pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/3 "2020-03-05T21:35:24Z")
Ignition 8, last webdev… 401 Unauthorized ---
**Author:** ![jspecht](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jspecht/32/6465_2.png) [@jspecht](https://forum.inductiveautomation.com/u/jspecht)\ **Post date:** [March 5, 2020, 9:52pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/4 "2020-03-05T21:52:44Z")
~~Looks like you are not adding the `Basic` prefix before your encoded credentials in the Authorization header value~~ nvm misread ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [March 5, 2020, 10:12pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/5 "2020-03-05T22:12:44Z")
What _specific_ Ignition version? **Is there any content attached to the 401 response**? Not just the error code, but an actual payload. You may need to change your `fetch` call to return the actual body. If it's got a body of "Access Denied", then that means the code reached a different place than if it doesn't have any content. > [@paul-griffith](#): > > Does the user you’re trying to authenticate as have any roles assigned? Are there any role restrictions on the endpoint you’re trying to reach? These last two questions are particularly important, because there's literally only one possible code path that could be resulting in a 401 unauthorized - I'm leaning towards there being a possible bug in the logic, but you're not giving me enough information to make sure. ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [March 6, 2020, 2:15pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/6 "2020-03-06T14:15:32Z")
I did another try with axios const token = window.btoa(`${self.state.username}:${self.state.password}`) let auth = 'Basic ’ + token let h = new Headers(); h.append(‘Content-Type’, ‘application/json’); h.append(‘Accept’, ‘application/json’); h.append(‘Authorization’, auth); const API = apiBaseUrl+“get\_buffer?m” axios.get(API, { withCredentials: true, headers: h, }) I got network error… Access to XMLHttpRequest at ‘[http://localhost:8088/system/webdev/Public\_Script\_DB/get\_buffer?m](http://localhost:8088/system/webdev/Public_Script_DB/get_buffer?m)’ from origin ‘[http://localhost:3000](http://localhost:3000)’ has been blocked by CORS policy: 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. My doGet module in Wendev is: lm=[] results = system.tag.browse(path, filter = {}) for result in results.getResults(): test = system.tag.read(path + ‘/’ + result[‘name’] + ‘/data\_store/export\_state/pulse’) if str(test.quality) == “Good”: lm.append(result[‘name’]) return {‘json’: lm} ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [March 6, 2020, 4:54pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/7 "2020-03-06T16:54:18Z")
> [@luc.martin](#): > > Access to XMLHttpRequest at ‘[http://localhost:8088/system/webdev/Public\_Script\_DB/get\_buffer?m’](http://localhost:8088/system/webdev/Public_Script_DB/get_buffer?m%E2%80%99) from origin ‘[http://localhost:3000](http://localhost:3000)’ has been blocked by CORS policy: 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. I mean, it's telling you what the problem is, and what to change. CORS is not an Ignition thing, it's a general web-development thing. ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [March 6, 2020, 6:04pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/8 "2020-03-06T18:04:24Z")
Now I got xhr.js:178 GET [http://localhost:8088/system/webdev/Public\_Script\_DB/get\_buffer?m](http://localhost:8088/system/webdev/Public_Script_DB/get_buffer?m) 401 (Unauthorized) const token = window.btoa(`${self.state.username}:${self.state.password}`) let auth = "Basic " + token let h = new Headers(); h.append(“Content-Type”, “application/json”); h.append(“Accept”, “application/json”); h.append(“Access-Control-Allow-Origin”, “[http://localhost:8088](http://localhost:8088)”) h.append(“Authorization”, auth); ``` const API = apiBaseUrl+"get_buffer?m" axios.get(API, { headers: h, }) ``` My module only require Athentication without roles… I try with my admin login Do you have some codes you can provide me with credential conn? ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [March 9, 2020, 1:50pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/9 "2020-03-09T13:50:19Z")
Can you provide me an example of front-end login form to connect to the webdev ? ---
**Author:** ![Kevin.McClusky](https://avatars.discourse-cdn.com/v4/letter/k/47e85d/32.png) [@Kevin.McClusky](https://forum.inductiveautomation.com/u/Kevin.McClusky)\ **Post date:** [March 27, 2020, 12:57am UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/10 "2020-03-27T00:57:32Z")
Hi Luc - are you still trying to get this to work? CORS sends a preflight OPTIONS request to see if cross origin requests are allowed by the remote server (Ignition in this example). We recently updated the webdev module to allow each method to be able to set authentication independently, so an OPTIONS request could be done without authentication. Handling this OPTIONS request is up to you. Have you tried doing this in order to handle the expected CORS communication patterns? Ignition doesn’t have anything built in to do this for you, but I think the latest version of the WebDev module has the tools to allow you to properly service CORS requests. (I haven’t tried this myself, though, so I’m not 100% certain.) ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [March 27, 2020, 10:13am UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/11 "2020-03-27T10:13:02Z")
Thanks, I will try ---
**Author:** ![Ricardo\_Sanchez](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@Ricardo\_Sanchez](https://forum.inductiveautomation.com/u/Ricardo_Sanchez)\ **Post date:** [November 12, 2021, 1:49pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/12 "2021-11-12T13:49:33Z")
sorry Luc. Did you manage to solve the cors problem within REACT when consuming the information from webdev? ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [November 12, 2021, 2:06pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/13 "2021-11-12T14:06:24Z")
Long time I’ved not played with REACT, but yes the CORS as resolved my issue. ---
**Author:** ![Ricardo\_Sanchez](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@Ricardo\_Sanchez](https://forum.inductiveautomation.com/u/Ricardo_Sanchez)\ **Post date:** [November 17, 2021, 8:34am UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/14 "2021-11-17T08:34:23Z")
How did you manage to solve the cors problem? ---
**Author:** ![luc.martin](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@luc.martin](https://forum.inductiveautomation.com/u/luc.martin)\ **Post date:** [November 17, 2021, 12:48pm UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/15 "2021-11-17T12:48:18Z")
> **[Allow CORS: Access-Control-Allow-Origin](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)** > > Easily add (Access-Control-Allow-Origin: \*) rule to the response header. ---
**Author:** ![Ricardo\_Sanchez](https://avatars.discourse-cdn.com/v4/letter/r/da6949/32.png) [@Ricardo\_Sanchez](https://forum.inductiveautomation.com/u/Ricardo_Sanchez)\ **Post date:** [November 19, 2021, 5:47am UTC](https://forum.inductiveautomation.com/t/ignition-8-webdev-react-front-end/32856/16 "2021-11-19T05:47:45Z")
Thanks, but due to company policies, extensions are not allowed. I solved it from the front end. I am currently using react JS. but i have this error “Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘JSON’)” I will continue investigating and reviewing what my mistake is when consuming the information