t.authorize(url, opts)

Sometimes, such as to complete an auth flow, you need to show a page in its own new window. This is usually because auth pages (for security reasons) cannot be displayed inside of iframes.

For more information about authorization in Trello, see its documentation.

Options

When calling t.authorize you must provide the URL to kick-off the authorization flow and, optionally, include an object containing a set of options. Below are valid values for the option object.

t.authorize can help you complete these flows. The first argument should be the URL that will be opened in a new window. The options allow you to specify the size of the window, as well as a validation function if you want to check the token that comes back.

Here is an example of completing Trello's oauth flow using t.authorize (but remember, you can use t.authorize() for 3rd party auth flows in your Power-Up as well):

1
2
const t = window.TrelloPowerUp.iframe();

// When constructing the URL, remember that you'll need to encode your RETURNURL
// You can do that with the encodeURIComponent(string) function
// encodeURIComponent('Hello World') -> "Hello%20World"
const authUrl =
  "https://trello.com/1/authorize?expiration=never" +
  "&scope=read&key=[APIKEY]&callback_method=fragment" +
  "&return_url=[RETURNURL]";

const authBtn = document.getElementById("authorize");
authBtn.addEventListener("click", function () {
  t.authorize(authUrl, authorizeOpts)
    .then(function (token) {
      return t
        .set("organization", "private", "token", token)
        .catch(t.NotHandled, function () {
          // fall back to storing at board level
          return t.set("board", "private", "token", token);
        });
    })
    .then(function () {
      // now that the token is stored, we can close this popup
      // you might alternatively choose to open a new popup
      return t.closePopup();
    });
});

t.authorize will return a Promise that you can wait to resolve or reject. The Promise will resolve when either the window.authorize(token) function is called, or an item is stored in localStorage on the same domain under the key 'token'.

The authorize handler opens a new window. Once the auth flow is complete in that window, you should land on a page you control (generally your return_url). That page needs to contain a small amount of javascript to send the resulting token back to the Power-Up.

Here is an example of how that would be achieved for the Trello OAuth flow from above. Note, this Trello OAuth flow assumes your callback_method is fragment, which redirects the page to a page you control. If you are using postMessage instead, you'll have to listen for a window message instead. See the authorization documentation.

1
2
let authorize;

try {
  if (window.opener && typeof window.opener.authorize === "function") {
    authorize = window.opener.authorize;
  }
} catch (e) {
  // Security settings are preventing this, fall back to local storage.
}

// Trello auth puts the token in the hash if callback_method=fragment.
// Other 3rd party auth flows may have a different system.
const token = window.location?.hash;
if (authorize && token) {
  authorize(token);
} else {
  localStorage.setItem("token", token);
}

setTimeout(function () {
  window.close();
}, 1000);

Checkout our this Power-Up example Glitch project to see a practical example of how to use t.authorize. You may need to remix the project in order to view it.