How to handle a window popup with wdio?

I'm trying to handle a facebook auth dialog popup via webdriverio. The problem is that I can't seem to target the email/password fields for the facebook signup.

Here's my code:

it('redirects after signup', () => {
    browser.url('/');

    const mainTab = browser.getCurrentTabId();
    browser.waitForExist('[data-test="facebook-login-button"]');
    browser.click('[data-test="facebook-login-button"]');

    // fb login form
    browser.waitForExist('#email');
    browser.setValue('#email', this.fbAccount.email);
    browser.setValue('#pass', this.fbAccount.password);
    browser.click('input[type="submit"]');

    // fb login authorization
    browser.waitForExist('button[type="submit"]');
    browser.click('button[type="submit"]');

    browser.switchTab(mainTab);
    browser.waitForExist('[data-test="intro-title"]');
});

I had also attempted to wait until the tab opens by doing the following

browser.waitUntil(() => browser.getUrl().indexOf('facebook.com') > -1);

And another attempt was to switch tabs to the facebook tab more explicitly

browser.switchTab(   
 browser.windowHandles().value[browser.windowHandles().value.length]
);

All of these variants just result in browser.waitForExist('#email'); failing (that is timing out and not finding the email input after 30s). That being said, the popup does indeed open, and it is indeed focused. Even when I manually try to focus wdio, webdriver or selenium doesn't find the element in question.

How is this sort of thing supposed to work? What am I doing wrong? Are there recommendations for making this sort of test successful?