I'm trying to authenticate with a third party API using OAuth 2 via a NodeJS + Express REST api. We're doing this through a ReactJS webapp
The current flow is that we send a request to our Express API from the front-end with the Fetch API, with a username as parameter
This request builds an authUrl object containing a redirect_url and then responds with
return res.redirect(authUrl);
When we initiate this endpoint straight from the browser, we get redirected to the Third Party API, and after authenticating a user is successfully created.
But the problem lies when we try to send a request to this endpoint from the front-end. We added CORS headers to our Express app so we can reach this endpoint, but it still gave us the following error:
Fetch API cannot load OUR ENDPOINT. Redirect from 'OUR ENDPOINT' to 'THIRD PARTY API' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.
When we just do a res.json(authUrl) instead of res.redirect(authUrl) we retrieve a proper response containing the URL. But redirecting doesn't seem to work.
We experimented a bit with different headers but can't seem to find a suitable solution.
So we were wondering does res.redirect() handle requests differently? Are we implementing the OAuth flow properly? Do we need specific headers?
Any help would be welcome!
Summary of our flow:
- Browser receives request for front-end
- User enters his name and clicks the signup button
- Our Rest API receives the request and builds an authentication url
- Rest API sends a response that redirects the browser to the authurl.
- After successful authentication, third party sends a confirmation to the callback endpoint of our Rest API.
- With the confirmation, the Rest API then sends another request to the third Party API.
- Rest API sends a response back to ReactJS app with the token.
