SOLVED

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

%3CLINGO-SUB%20id%3D%22lingo-sub-1410311%22%20slang%3D%22en-US%22%3Eauthentication.authenticate()%20opens%20in%20external%20browser%20tab%20instead%20of%20pop-up%20window%20on%20first%20call%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1410311%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20there%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe're%20developing%20an%20app%20for%20Teams%20and%20found%20a%20problem%20where%20the%20first%20time%20we%20call%20microsoftTeams.authentication.authenticate()%20in%20the%20Desktop%20app%20(both%20Mac%20and%20Windows)%20it%20opens%20the%20specified%20url%20in%20an%20external%20browser%20window%2Ftab%20instead%20of%20a%20pop-up%20window.%26nbsp%3B%20When%20this%20happens%2C%20authentication%20gets%20stuck%20and%20can't%20complete%2C%20so%20the%20tab%20never%20closes.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt's%20nearly%20impossible%20for%20us%20to%20debug%20why%20the%20external%20browser%20tab%20can't%20complete%20the%20authentication%20-%20the%20desktop%20app%20blocks%20our%20local%20builds%2C%20and%20also%20seems%20to%20remove%20debugger%20statements%20when%20we%20run%20from%20a%20dev%20deployment.%26nbsp%3B%20The%20bug%20is%20not%20reproducible%20when%20using%20the%20Teams%20web%20app%20(which%20does%20work%20with%20our%20local%20builds).%26nbsp%3B%20But%20this%20is%20probably%20beside%20the%20point.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20the%20external%20browser%20tab%20problem%20happens%2C%20there%20is%20an%20error%20message%20in%20the%20console%20for%20the%20Teams%20tab%20that%20made%20the%20authenticate()%20call%20as%20follows%3A%26nbsp%3B%3CEM%3EError%20during%20Teams%20authentication%3A%20Error%3A%20Unable%20to%20send%20AtomFrameHostMsg_Message_Sync%3C%2FEM%3E.%26nbsp%3B%20Full%20stack%20info%3A%3CBR%20%2F%3E%3CBR%20%2F%3EUncaught%20(in%20promise)%20Error%3A%20Unable%20to%20send%20AtomFrameHostMsg_Message_Sync%3CBR%20%2F%3Eat%20EventEmitter.ipcRenderer.sendSync%20(%3CANONYMOUS%3E%3A1717%3A18)%3CBR%20%2F%3Eat%20Object.exports.invokeSync%20(%3CANONYMOUS%3E%3A1692%3A41)%3CBR%20%2F%3Eat%20Object.%3CANONYMOUS%3E%20(%3CANONYMOUS%3E%3A3229%3A22)%3CBR%20%2F%3Eat%20Object.require.34..%2F..%2Fcommon%2Fatom-binding-setup%20(%3CANONYMOUS%3E%3A3374%3A4)%3CBR%20%2F%3Eat%20o%20(%3CANONYMOUS%3E%3A2%3A273)%3CBR%20%2F%3Eat%20r%20(%3CANONYMOUS%3E%3A2%3A439)%3CBR%20%2F%3Eat%20%3CANONYMOUS%3E%3A2%3A468%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FANONYMOUS%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENow%2C%20the%20interesting%20thing%20is%20that%20any%20microsoftTeams.authentication.authenticate()%20call%20after%20this%20works%20correctly%20-%20it%20opens%20in%20a%20pop-up%20window%20and%20authentication%20works%20without%20problems.%26nbsp%3B%20Refresh%20the%20page%20and%20we're%20back%20to%20square%20one%20-%20first%20authenticate()%20behaves%20incorrectly%20but%20subsequent%20calls%20work%20as%20expected.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1410311%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1481896%22%20slang%3D%22en-US%22%3ERe%3A%20authentication.authenticate()%20opens%20in%20external%20browser%20tab%20instead%20of%20pop-up%20window%20on%20first%20ca%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1481896%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20problem%20was%20that%20.initialize()%20method%20is%20not%20a%20synchronous%20operation.%26nbsp%3B%20Digging%20into%20the%20API%20docs%20shows%20that%20.initialize()%20takes%20a%20callback%20function%20as%20a%20parameter.%26nbsp%3B%20So%20wrapping%20this%20in%20a%20promise%20and%20chaining%20the%20authentication%20call%20to%20happen%20afterward%20fixed%20the%20problem.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1865873%22%20slang%3D%22en-US%22%3ERe%3A%20authentication.authenticate()%20opens%20in%20external%20browser%20tab%20instead%20of%20pop-up%20window%20on%20first%20ca%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1865873%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F822391%22%20target%3D%22_blank%22%3E%40matt131%3C%2FA%3E%26nbsp%3BWere%20you%20able%20to%20solve%20this%3F%26nbsp%3B%20I'm%20facing%20the%20same%20problem.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1750733%22%20slang%3D%22en-US%22%3ERe%3A%20authentication.authenticate()%20opens%20in%20external%20browser%20tab%20instead%20of%20pop-up%20window%20on%20first%20ca%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1750733%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F676261%22%20target%3D%22_blank%22%3E%40RobDiazMarino%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnything%20else%20special%20that%20you%20did%20to%20get%20this%20to%20work%20in%20generarl%3F%26nbsp%3B%20Everything%20works%20as%20expected%20in%20the%20web%20version%20of%20Teams.%26nbsp%3B%20However%20in%20the%20desktop%20client%20it%20always%20opens%20in%20an%20external%20browser.%26nbsp%3B%20I%20tried%20waiting%20for%20intialization%20like%20below%3A%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3EmicrosoftTeams.initialize(()%20%3D%26gt%3B%20%7B%0A%20%20microsoftTeams.authentication.authenticate(%7B%0A%20%20%20%20url%3A%20myUrl%2C%0A......%0A%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3BHowever%20this%20completley%20breaks%20the%20call%20and%20it%20no%20longer%20even%20opens%20in%20an%20external%20browser.%26nbsp%3B%20As%20you%20mentioned%20debugging%20is%20impossible%20in%20the%20desktop%20client.%26nbsp%3B%20Any%20tips%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hi there,

 

We're developing an app for Teams and found a problem where the first time we call microsoftTeams.authentication.authenticate() in the Desktop app (both Mac and Windows) it opens the specified url in an external browser window/tab instead of a pop-up window.  When this happens, authentication gets stuck and can't complete, so the tab never closes.

 

It's nearly impossible for us to debug why the external browser tab can't complete the authentication - the desktop app blocks our local builds, and also seems to remove debugger statements when we run from a dev deployment.  The bug is not reproducible when using the Teams web app (which does work with our local builds).  But this is probably beside the point.

 

When the external browser tab problem happens, there is an error message in the console for the Teams tab that made the authenticate() call as follows: Error during Teams authentication: Error: Unable to send AtomFrameHostMsg_Message_Sync.  Full stack info:

Uncaught (in promise) Error: Unable to send AtomFrameHostMsg_Message_Sync
at EventEmitter.ipcRenderer.sendSync (<anonymous>:1717:18)
at Object.exports.invokeSync (<anonymous>:1692:41)
at Object.<anonymous> (<anonymous>:3229:22)
at Object.require.34../../common/atom-binding-setup (<anonymous>:3374:4)
at o (<anonymous>:2:273)
at r (<anonymous>:2:439)
at <anonymous>:2:468

 

Now, the interesting thing is that any microsoftTeams.authentication.authenticate() call after this works correctly - it opens in a pop-up window and authentication works without problems.  Refresh the page and we're back to square one - first authenticate() behaves incorrectly but subsequent calls work as expected.

 

 

4 Replies
Highlighted
Best Response confirmed by RobDiazMarino (New Contributor)
Solution

The problem was that .initialize() method is not a synchronous operation.  Digging into the API docs shows that .initialize() takes a callback function as a parameter.  So wrapping this in a promise and chaining the authentication call to happen afterward fixed the problem.

Highlighted

@RobDiazMarino 

 

Anything else special that you did to get this to work in generarl?  Everything works as expected in the web version of Teams.  However in the desktop client it always opens in an external browser.  I tried waiting for intialization like below: 

microsoftTeams.initialize(() => {
  microsoftTeams.authentication.authenticate({
    url: myUrl,
......

 However this completley breaks the call and it no longer even opens in an external browser.  As you mentioned debugging is impossible in the desktop client.  Any tips?

Highlighted

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

Highlighted

@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!