OAuth example in React / Visual Studio Code

My first monday app (integration) is working nicely with use of the API key. Does anybody has a good example how to setup and use OAuth to replace the API token? Preferably in React / Visual AStudio.

Any help is more than welcome :slight_smile:

Hi!
I’m Moshik and I’m working on the integration apps feature at monday.com.
We’ve recently had a remote hackathon where developers from all over the world used our apps infrastructure for the first time.
During the hackathon we’ve had a short talk where we explained on how to implement OAuth as part of integration apps.
This is a link to a video which explains the functionality: https://monday.zoom.us/rec/share/4uFOCJL__19IeKuQ5H3tY4sxJZzgT6a80SYY_qFZyBzYWh59cFsB7h3m3XvaR-_V?startTime=1589878246000
And here’s a repository with a simple server to server example usage of the monday.com OAuth functionality in general: https://github.com/yuhgto/monday-oauth-example

Let us know if you need any more information :slight_smile:

Moshik Eilon,
monday.com R&D

2 Likes

Hi @moshik,

Thank you, it helped me to get on the correct path. I do understand how to configure the app with the callback and where / how to implement this is the code. The missing piece is how to get the access token (knowing the accountId and userId) that can be used for all monday GraphQL queries and how to store this (probably in a cookie?).

Many thanks,

As a best practice, we recommend implementing a database in your app to store the tokens.

I don’t believe storing the key as a cookie would work because the integration feature will ping your app from the backend – in this context, your app won’t have access to the user’s browser cookies because it will be responding to an event coming from the monday server.

@moshik – anything to add here?

Sounds like a plan :slight_smile:. My initial thoughts are:

  • Create an endpoint (e.g. /authorization), which is used in the integration feature
  • This gives me accountid / userid and backtourl
  • Check db for token for accountid / userid
  • If token exists in DB use it and redirect to backtourl
  • If not found redirect to monday oauth (clientid / state) with a callback
  • In callback check state and if same create token and store in DB and redirect to backtourl

When the endpoint (/authorization) needs to redirect to oauth, do I need to set the scope form code or is this done based on the scope of the app?

Anything to add?

Hi @dipro, @moshik

That makes sense, I will store the tokens in a database. Got this partly working now. I do get the access token (do not store it yet) and the flow is looking good. When user adds the integration to the board he gets the messages that the app needs access and when approved I do get the access token.

Before doing the next step (store the token in a database) I want to understand what the lifetime of the access token is. When making the request I got the access token, but the refresh token is returned as null. So basically my question is: can I use the access token forever?

My second question is: is the access token bound to a specific board? If the user wants to use the same integration app on another board, can I rely on the stored token or should I send the user to another authorization session?

Many thanks for the help so far.

Omg thank you! I have been searching for something like this.