OAuth with MERN

API
1

Ok so here is the issue we have. We are developing a system with a React frontend and a Node backend . The frontend exists on port 3000 and the backend runs on port 5000. We have the OAuth working from the backend however when we add a button to the front end that calls our API that triggers the auth we are getting a CORS error:

Access to fetch at ‘Twitch’ (redirected from ‘http://localhost:5000/twitchapi/auth’) from origin ‘http://localhost:3000’ has been blocked by CORS policy: 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.

It appears to be caused by the fact we are calling it from the frontend. Any suggestions would be appreciated.

2

The first step of oAuth is to redirect the user to the oAuth service.

It seems that you are trying to fetch the oAuth entry point instead of directing the user to the oAuth entry point.

You might also find it easier if your backend is whats serving the frontend as that will reduce issues caused from two ports/two urls to things

3

Of course. I tried doing a GET and a Fetch and neither worked with on an onClick on the button but changing it to a href and adding a href=‘http://localhost:5000/twitchapi/auth’>LOGIN WITH TWITCH</a That now works for me. Cheers

4

onclick would probably work if the action was to navigate. But an a href is for sure the preferred solution.