authentication.authenticate() opens in external browser tab instead of pop-up window on first call

matt131 The code you posted seems like it should work, so I'm not sure exactly what's wrong.  I'll share a little bit more about how we set up our code and maybe it will help.

We created our own wrapper for the MS Teams API like so (there is a lot more to it but I've extracted only the parts pertinent to this problem):

import * as microsoftTeams from '@microsoft/teams-js'
let initializePromise = null
export default {
  init() {
    if (!initializePromise) {
      initializePromise = new Promise((resolve) => {
        microsoftTeams.initialize(resolve)
      })
    }
    return initializePromise
  },
  authenticate() {
    return this.init().then(() => {
      return new Promise((resolve, reject) => {
        // Launch the MS Teams Login flow
        microsoftTeams.authentication.authenticate({
          url: window.location.origin + 'loginpath',
          successCallback: resolve,
          failureCallback: reject,
          width: 500,
          height: 500
        })
      }).catch(error => {
        console.error('Error during Teams authentication: ', error)
        throw error
      })
    })
  }
}

 Setting up our init function in this way means we can call it at the beginning of any operation that requires the MS Teams API to ensure it has been initialized properly first.  If it has already been called once then it resolves immediately from then on.

Hope this helps!

matt131 Were you able to solve this?  I'm facing the same problem.