Implementation

On high level you'll only need to do two changes:

  • open Wise authorization page in a popup window instead of a full redirect
  • build a mechanism that understands when the flow is complete

Sequence diagram of the flow

Authorization Flow in Popup Window Sequence Diagram

Example

Here is a simplified example of the required code changes.

Your frontend should open Wise authorization page in a popup window and register an event listener to detect when the flow is completed.

Your application frontend
const CLIENT_ID = 'my-app';
const REDIRECT_URL = 'https://my-app.com/wise-redirect';
const URL = `https://wise.com/oauth/authorize/?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URL}`;
const MESSAGE_SUCCESS = 'wise-oauth-success';


const handleClick = () => {
  // how to calculate popup position in a better way? https://stackoverflow.com/a/16861050
  const popupFeatures = "resizable,scrollbars,status,location,width=600,height=800,top=200,left=600",


  // open a popup window
  const page = window.open(URL, 'wise-oauth-connect', popupFeatures);


  if (page.focus) {
    page.focus();
  }


  const handleEvents = (event) => {
    if (event.data === MESSAGE_SUCCESS) {
      closePopup();
    }
  };


  const closePopup = () => {
    page.close();
    window.removeEventListener('message', handleEvents);
  };


  window.addEventListener('message', handleEvents);
};


...


<button onClick={handleClick}>
  Connect your Wise account
</button>

When the flow is complete, we redirect back to the REDIRECT_URL the same way as in our regular authorization flow.

Once you've generated Wise API tokens, return a tiny HTML and JavaScript page that sends a success message to the opener.

OAuth handler, https://my-app.com/wise-redirect
const MESSAGE_SUCCESS = 'wise-oauth-success';


window.onload = () => {
  // We're letting the tab that opened popup know that it can be closed now.
  // There is no need to send any data using this way so just a
  // message "we-are-done-and-you-can-close-me" is enough.
  // https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  window.opener.postMessage(MESSAGE_SUCCESS, 'http://localhost:3000');
};