Migrating from miro.authorize to miro.requestAuthorization

To improve the authorization experience for users, we are introducing the miro.requestAuthorization method to the Miro Web SDK and deprecating the miro.authorize method on March 30, 2021. If your Miro Web SDK application currently uses the miro.authorize method, you must update your web-plugin to use the miro.requestAuthorization method no later than July 1, 2021. Read more information on Web-plugin Authorization.

What this means for you

You must replace your existing authorization request logic with a single miro.requestAuthorization call. Here's what changes for you:

  • miro.authorize opened an authorization window in a new tab, while miro.requestAuthorization requests for authorization from the user on the board.
  • miro.authorize had to be called synchronously within a click event handler. while miro.requestAuthorization does not have this limitation.
  • You must not display a custom authorization window before calling miro.requestAuthorization.
  • If you don't use the Miro REST API, you must not pass any configuration parameters to miro.requestAuthorization. If you use the Miro Rest API, see Authorization for apps using the Miro REST API.

Here is an example of an app using miro.authorize:

// index.js
async function onToolbarAppButtonClicked () {
  const isAuthorized = await miro.isAuthorized()
  if (isAuthorized) {
    openApp()
  } else {
    // Need a custom modal to call miro.authorize synchronously
    // after the asynchronous miro.isAuthorized() call.
    // If we call miro.authorize() here, the browser might block the                    
    // authorization window
    const result = await miro.board.ui.openModal('not-authorized.html')
    if (result === 'success') {
      openApp()
    }
  }
}

function openApp () {
  miro.board.ui.openLibrary('library.html', { title: 'My App' })
}

// not-authorized.js
document.querySelector('.auth-button').addEventListener('click', () => {
  const authorizeOptions = {
    response_type: 'token',
    redirect_uri: 'https://my-app-server.com/installation-success'
  }

  miro.authorize(authorizeOptions).then(() => {
    miro.board.ui.closeModal('success')
  })
})

Here is the same app example after we migrate from miro.authorize to miro.requestAuthorization:

// index.js
async function onToolbarAppButtonClicked () {
  const isAuthorized = await miro.isAuthorized()

  if (!isAuthorized) {
    // Ask the user to authorize the app.
    await miro.requestAuthorization()
  }

  // Once authorized, open the app.
  openMyApp()
}

function openMyApp () {
  miro.board.ui.openLibrary('library.html', { title: 'My App' })
}

Did this page help you?