microsoftTeams.authentication.notifySuccess() causing CancelledByUser error on Windows desktop app

[ghost]

We have a customer who is receiving a CancelledByUser error after taking a code path in our application that calls microsoftTeams.authentication.notifySuccess().

This only happens for them on their Windows desktop client for Teams. The notifySuccess() call works correctly for them in the Teams web client. It also works correctly for me on web, Windows desktop, and Mac desktop.

@microsoft/teams-js version: 1.10.0 Teams for Windows desktop version: 1.4.00.19572 Windows edition: Windows 10 Pro Windows version: 21H1 Windows OS build: 19043.1110

Solutions we've tried without luck:

• Per https://github.com/OfficeDev/microsoft-teams-library-js/issues/349#issuecomment-644857359, https://github.com/OfficeDev/microsoft-teams-library-js/issues/324, our code is waiting for the sdk to initialize via microsoftTeams.initialize(callback) before calling notifySuccess().
• Per https://github.com/OfficeDev/microsoft-teams-library-js/issues/173#issuecomment-456369468, the domain where the sdk is used is the same before/after.
• Our customer cleared their Teams cache on Windows.

Similar issues: https://github.com/OfficeDev/microsoft-teams-library-js/issues/49, https://github.com/OfficeDev/microsoft-teams-library-js/issues/564.

[ChetanSharma-msft]

Hello @tiennguyen1293 - Thanks for reporting this issue. There is already an bug raised for it. We will check the update on it with engineering team and get back to you.

[Meghana-MSFT]

The engineering team is actively working on the fix. We are closely tracking the ICM. We will keep you posted as soon as this gets fixed. Thanks.

[erik-pauli]

Hi @Meghana-MSFT, @ChetanSharma-msft any update on this, we're facing the same issue. Thanks.

[A-Lynch]

The engineering team is actively working on the fix. We are closely tracking the ICM. We will keep you posted as soon as this gets fixed. Thanks.

Is there any update on this?

[Lesiio]

Hello, i'm fancing the same isssue. Any update in this topic?

[cgvalayev]

Similar https://github.com/OfficeDev/microsoft-teams-library-js/issues/1304 (with additional details)

One client said that if they open the tab in a new window, microsoft authentication works successfully. Then refresh original tab and it also authenticates. image

I think this is a good clue.

[markgenie]

@Meghana-MSFT Can you please assist? We are struggling to roll out our custom teams app at large due to this issue.

[Wajeed-msft]

The issue has a proposed fix in Electron 16 based Teams. ETA for Mac is end of August. The current estimate for rollout on Windows is end of September.

Ref: https://github.com/OfficeDev/microsoft-teams-library-js/issues/1181#issuecomment-1179288178

[RobHobartBCLP]

Can I ask what the state of play with this is? The calls still open and we still seem to be seeing this issue, but if the rollout was end of September it should be resolved. I'm guessing the rollout hit additional delays?

[Meghana-MSFT]

Please Ref : https://github.com/OfficeDev/microsoft-teams-library-js/issues/1181#issuecomment-1301281060

[Yunus0or1]

'use client'

import React, { useCallback, useEffect, useState } from 'react'
// @mui
// components
import { Box, Button } from '@mui/material'
// eslint-disable-next-line import/no-extraneous-dependencies
import { app, authentication, pages } from '@microsoft/teams-js'
import { jwtDecode } from 'jwt-decode'
import crypto from 'crypto'
import { verifyBotTabToken } from 'src/api/auth'
import { paths } from 'src/routes/paths'

// ----------------------------------------------------------------------

export default function TabLoginView(): React.ReactNode {
  const initializeBotTabFlow = useCallback(async (): Promise<void> => {
    await app.initialize()
    const ctx = await app.getContext()

    console.log(ctx)

    // pages.config.setConfig({ contentUrl: 'https://**.ngrok.io/auth/tab/login/' })
    // pages.config.setValidityState(true)

    // const clientSideToken = await authentication.getAuthToken()

    // await verifyBotTabToken({ token: clientSideToken })
  }, [])

  const showConsentDialog = async (): Promise<void> => {
    try {
      const url = `${window.location.origin}${paths.auth.tab.consentPopUp}`
      console.log({
        url,
      })

      console.log('zz5')

      console.log({
        authentication,
      })

      const response = await authentication.authenticate({
        url,
        width: 600,
        height: 535,
      })

      console.log(response)
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    initializeBotTabFlow()
  }, [initializeBotTabFlow])

  return (
    <Box>
      <Button onClick={showConsentDialog}>Consent</Button>
    </Box>
  )
}

I wrote my React component like this. I could get the context, and also get a token from context. But when I try to get the user consent, the error says, CancelledByUser. Is there any solution for this? I am using Windows Teams, and it is the latest version.