CORS error when calling the OAuth token endpoint

monday Apps & Developers
, ,
1

I’m building a new React app (which needs to call my .NET API) with the Monday.com developer platform. Ultimately, I want my API to interact with Monday.com APIs impersonating the user.

The first thing I’m trying right now is to authenticate the user to my app using OAuth as described in OAuth and Permissions (monday.com) to get the access token.

Then I can provide the access token to backend API calls.

Currently, I’m only have the app running locally.

I do get an authentication code when calling the authorization endpoint.

The problem arises when I call the token endpoint with the authentication code:

Access to fetch at ‘https://auth.monday.com/oauth2/token?client_id=ad49806d39aac9386caedbb064d870e4&grant_type=authorization_code&code=a45b5efefe767f0735afc7e5a8287f87&redirect_uri=https%3A%2F%2F23ee4be0f152.apps-tunnel.monday.com%2Fcallback&state=0TE9iekeuXAnP22fhwlSs1cMxesCvHwZrvPtvkK9’ from origin ‘https://23ee4be0f152.apps-tunnel.monday.com’ 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.

How do I fix this?
I didn’t find any CORS settings in the Monday.com app configuration.

2

It looks like you’re doing this on the client side. Can your .net app proxy the call on the server side instead?

3

At this moment, the .NET API is not into play yet. I’m doing the OAuth dance in the React app. I think it’s being done server side, but I’m not sure as I’m fairly new to React.
You can see it here: monday-oauth/src/components/Login.js at main · ngruson/monday-oauth (github.com)

First, I call the authorize endpoint which is showing the Monday authorization page with the Authorize button. When I click that button, I get an authorization code back on my callback URL.
Then, I try to call the token endpoint with the authorization code to get the access token. I overhauled the code a bit, but I’m still stuck with the same error message.

Access to fetch at ‘https://auth.monday.com/oauth2/token’ from origin ‘https://23ee4be0f152.apps-tunnel.monday.com’ 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.
The tunnel is forwarding requests to my app running locally in Visual Studio Code.

Or can I not test it in this way with the tunnel? I’d like to test before I publish.

4

David’s answer was leading me in the right direction.
I created a new React application with Next.js and the Nextauth library to do the OAuth authentication. Now I have a working login process.