Miro Web SDK OAuth 2.0 with Python/Flask and C#/ASP.NET Core

3 min readMay 13, 2023

Contents

· Introduction
· Miro OAuth
· My two cents about Miro OAuth
· Miro Configuration
· GitHub
· Python and Flask
· C# and ASP.NET Core

Introduction

In the two former stories below I created a Miro Web SDK App in Python/Flask and C#/ASP.NET. Now I will include OAuth 2.0 authorization so my App will also be able to use the Miro REST API.

Miro Web SDK App with Python and Flask

Miro Web SDK App with C# and ASP.NET Core

Miro OAuth

When you create a Miro Web SDK App it will manage Miro Boards using the Web SDK. But, sometimes, you may want to use Miro REST API also. So Miro created a workflow to start an OAuth 2.0 authorization workflow, automatically, in parallel with the Web SDK authorization.

If you want more information about OAuth 2.0 I suggest the following two links:

An Introduction to OAuth 2

Which OAuth 2.0 Flow Should I Use?

The following two Miro documentation links show all the details and a diagram to understand it better:

Get started with OAuth 2.0 and Miro

Enable REST API authentication from Miro’s Web SDK authorization

My two cents about Miro OAuth

Below you find a step-by-step description of what happens in Miro OAuth 2.0 workflow…

Miro opens the authorization and, after user confirmation, it calls your App Redirect URL action ( the URL is shown in the form ):

https://miro.com/oauth/authorize?
response_type=code
&client_id={CLIENT_ID}
&redirect_uri={REDIRECT_URI}
&state=state
&team_id={TEAM_ID}

Your App /redirect action calls the Miro authorization API /token method, using the code it received as a query parameter ( so Miro knows it is a valid call ), and gets the Token. Finally, it calls Miro /app-install-completed method to inform the authentication is finished:

http://localhost:3000/redirect?
code=eyJtaXJvLm9yaWdpbiI6ImV1MDEifQ_IIze1u
&client_id={CLIENT_ID}
&state=state
&team_id={TEAM_ID}

https://api.miro.com/v1/oauth/token?
grant_type=authorization_code
&client_id={CLIENT_ID}
&client_secret={CLIENT_SECRET}
&code={AUTHORIZATION_CODE}
&redirect_uri={REDIRECT_URI}

Token
{
“user_id”: “9876543210123456789”,
“refresh_token”: “eyJtaXJvLm9yaWdpbiI6ImV1MDEifQ_-PIBKmE9rzQuL3bUeAvUEGFEhLk”,
“access_token”: “eyJtaXJvLm9yaWdpbiI6ImV1MDEifQ_o-P91OccaII0A63CDSK — x21xiI”,
“expires_in”: 3599,
“team_id”: “1234567890987654321”,
“scope”: “boards:write boards:read”,
“token_type”: “bearer”
}

https://miro.com/app-install-completed?
client_id={CLIENT_ID}
&team_id={TEAM_ID}

The Token has a lifetime, so the App may have to use the Refresh Token to get a new Access/Refresh Token pair using the Miro /token method, with grant_type=refresh_token:

https://api.miro.com/v1/oauth/token
?grant_type=refresh_token
&client_id={CLIENT_ID}
&client_secret={CLIENT_SECRET}
&refresh_token={REFRESH_TOKEN}

The App may call the Miro REST API at any time using the Access Token:

https://api.miro.com/v2/*
Authorization: Bearer {ACCESS_TOKEN}

Miro Configuration

To get OAuth authorization for Web SDK and Web API together you must configure two Miro URLs. And, VERY IMPORTANT, you must set the OAuth URL as “Use this URI for SDL authorization”. If you forget this, only Web SDK authorization happens, and /redirect action is never called ( I did it 😒 ).

During your tests, you may want to remove the authorization to test it again. You can do this in the following menu ( trust me, you will! ):

User > Settings > Apps & Integration (left menu) > App > “Remove for me”

GitHub

Below you will find my GitHub repository:

GitHub Miro App Repository

Miro
  DOTNET
    App-DOTNET
  Python
    App-Python

Python and Flask

With the application running you will get the following routes available:

flask run -host=0.0.0.0 -port=3000

def redirect() : /redirect
  App OAuth redirect action
def authorize() : /redirect/authorize
  ONLY FOR TESTING PURPOSES, starts the OAuth authorization workflow
def status() : /redirect/status
  ONLY FOR TESTING PURPOSES, shows the Token details

C# and ASP.NET Core