Browser popup blocked despite user clicking button to initiate it

Question

I have a button on my website which allows a user to login to their bank via Yodlee/Plaid using a popup login screen. The problem is the popup is being blocked by both safari and chrome on mobile. The popup works on the desktop. I have read that safari and chrome blocks all popups if a user has not clicked a button to initiate them or if they take longer than one second from the click event.

My problem is my frontend has to make a call to my backend to retrieve a token before initiating the popup. All this takes longer than one second, therefore, blocking the popup. I am fairly new to JS any input to resolve this issue would be much appreciate.

//makes call to backend to get yodlee access token 
function getAccessToken(){
    $.ajax({
        url: "/request/access-token",
        headers: {'X-CSRFToken': csrf_token},
        type: "POST",
        data: {'id': uuid},
        dataType: "json",
        context: document.body,
        success: function(data){
            var accessToken = data['access_token'];
            openFastLink();
      }
    });
}

//opens fastlink popup
function openFastLink(){
    window.fastlink.open({
      fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
      accessToken: 'Bearer ' + accessToken,
      forceIframe: true,
      iframeScrolling: true,
      params: {
        configName : 'Aggregation'
      },
      onSuccess: function (data) {
        alert('account linked!')
      }
    },
    'container-fastlink');
}

<button onclick="getAccessToken()">Link Account</button>

Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) or jQuery’s [`.on`](https://api.jquery.com/on/) instead. — Sebastian Simon, Apr 02 '21 at 09:54
I see. How would I initiate the 'fastlink.open' API call it directly from a user click? Sorry I am fairly new to js. @mplungjan — Tamdim, Apr 02 '21 at 10:07

mplungjan · Answer 1 · 2021-04-02T11:15:53.543

Your click is not activating the open, the ajax return is.

If you are sure the user will need the access token, just get it

I did not make an actual snippet because it will not run anyway here.

$(function() {
  let accessToken;

  $.ajax({
    url: "/request/access-token",
    headers: {
      'X-CSRFToken': csrf_token
    },
    type: "POST",
    data: {
      'id': uuid
    },
    dataType: "json",
    context: document.body,
    success: function(data) {
      accessToken = data['access_token'];
      $("#linkAccount").show()
    }
  });


  //opens fastlink popup
  $("#linkAccount").on("click", function() {
    window.fastlink.open({
        fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
        accessToken: 'Bearer ' + accessToken,
        forceIframe: true,
        iframeScrolling: true,
        params: {
          configName: 'Aggregation'
        },
        onSuccess: function(data) {
          $("#linkAccount").hide()
          $("#linked").show()
        }
      },
      'container-fastlink');
  });
});

.hide {
  display: none;
}

<button type="button" id="linkAccount" class="hide">Link Account</button>
<div id="linked" class="hide">Account linked</div>

This works thanks. The only problem is I want the access token to be obtained in the same action as when the user clicks 'Link Account'. Each access token is billed so I want to be sure of the users intent before retrieving one. — Tamdim, Apr 03 '21 at 09:14
Then try async false or promise await and get it like `+getAccessToken()` where you need it — mplungjan, Apr 03 '21 at 09:27

Browser popup blocked despite user clicking button to initiate it

1 Answers1