OAuth "Invalid client_id param" *

[supernova]

I followed the OAuth Implementation guide & have my local server & ngrok tunnel running. Problem is when I click on the OAuth button, I get “invalid_request” - “Invalid client_id param” error even though I defined the client_id, client_secret & redirect_uri vars with the correct values ( to be certain ). What could the issue be?

*sorry for reposting…I accidentally deleted my previous post description

---

Edit:

In addition to the problem described above , I can’t perform a query / mutation using GraphQL. Doing so yields a 401 Unauthorized error. So yeah…sorta just stuck here since I can’t read / write to the board & idk how to resolve the issues I’m encountering with OAuth AND GraphQL.

Here’s my code:

  useEffect(() => {
    monday.setToken(process.env.REACT_APP_API_TOKEN);

    monday.listen("settings", (res) => {
      setSettings(res.data);
    });

    monday.listen("context", (res) => {
      setContext(res.data);
    });

    monday
      .api(
        `query ($boardIds: [Int]) { boards (ids:$boardIds) 
            { name items(limit:1) { name column_values { title text } } } }`,
        { variables: { boardIds: context.boardIds } }
      )
      .then((res) => {
        setBoardData(res.data);
      });
 }, []);

With React hooks, I can’t query or mutate. But I found that when this code gets reformatted to its component lifecycle equivalent, then the query runs & I can fetch the data. In this case, the query runs only if I don’t set the token beforehand.

The API token is only supposed to be required for server-side code right? So then why can’t I access the GraphQL API from client-side? And why can’t I perform mutations in both React code forms? All necessary board permission scopes are configured in my monday app for client & in the node express code for server.

What am I doing wrong?

[supernova]

ohh there’s an option to undelete oops…how do I do delete the full post though??

[dipro]

@supernova – I did a review of that OAuth example earlier today and found some issues with the instructions. Happy to help troubleshoot!

Can you check the client ID in the URL itself (query param) and let us know if the app has introduced any bad characters (extra quotes, etc)?

(By the way, if you want to see an updated version of the OAuth guide, check out this link. Still needs some work, but the updated code and instructions should get you going!)

As for the authorization error, it’s probably happening because your OAuth flow failed, so your app doesn’t have an access token…

[supernova]

Hi @dipro

The block of code within app.get('/start')... redirects to the following decoded url (spaces replaced with %20 when encoded):

https://auth.monday.com/oauth2/authorize?client_id=[my_client_id]&redirect_uri=[my_redirect_uri]/oauth/callback&scopes=me:read boards:read boards:write&state=[arbitrary_state_token]

^ does that look right to you?

I removed an extra ‘/’ that I found, but I’m still getting an “Invalid redirect_uri” err. I can reach the app scopes / user authorization page when just my client_id is appended to monday’s OAuth request URL, but of course leaving out the other necessary parameters defeats the purpose… maybe there’s a bad char in the url that I’m not seeing though?

/* code from OAuth guide: */

app.get('/start', function (req, res) {
      res.redirect('https://auth.monday.com/oauth2/authorize?' +
        querystring.stringify({
          client_id: client_id,
          redirect_uri: redirect_uri + '/oauth/callback',
          state: state,
          scopes: "me:read boards:read boards:write"
        }));
    });

[edogr1]

@supernova - Did you added the redirect URL also in your app’s OAuth page? It must be the same as the one you’re sending.

Also, I don’t think that react hooks/components make any difference, when using our SDK in the client you’re not supposed to use “monday. setToken” at all

[supernova]

hey @edogr1 - yes I added the same redirect url in my app config so that shouldn’t be the problem. I believe it’s due to content-security policy blocking the cross-site request & resource from loading (forgot to mention that came up too). Seems like I need to add http header in some server file / meta tag in index.html…? Thought cors was enough to handle cross-origin stuff but guess not

[supernova]

Late update, but I see that the official doc hasn’t been updated.

So in case anyone ever runs into this issue:

If your monday app throws an “ Invalid redirect_uri ” error (after you’ve ensured that your redir_uri & board scopes are correctly configured):

Go to the server index.js file cloned from this git repo here & delete ‘/outh/callback/‘ that’s appended to redirect_uri in app.get('/start', (req, res) => {

This will send the user to the scopes page that’ll prompt them to authorize your app and then redirect them to /oauth/callback

[TMNXT-Dev]

Thank you for the update @supernova , much obliged!

[AlexSavchuk]

@supernova

Thanks so much for sharing that solution! I really appreciate it and I’ll ask the team to take a further look at how we can make this process a little easier both in the docs and otherwise.

-Alex

[dipro]

Hey @supernova !

Looks like you found a bug in my unofficial OAuth example I went ahead and updated it! Thanks for keeping me honest

I also enabled “Issues” on that repo in case you find any other… issues.