title: Authentication in MS Teams tab on mobile
body: <p>I've stuck with a problem of microsoftTeams.authentication.authenticate() on mobile devices. By calling the function, a new tab is opened in my browser window and not within Teams itself (on desktop devices it is opened as a popup and all works fine). Thus, the app is opened in the browser environment and auth process is broken. Is there any possibility to get me back into Teams after authorization has succeeded? I'm pretty confused. Any help would be great! Thank you!</p>
  <pre><code>async teamsLogin () {
    return new Promise((resolve, reject) =&gt; {
      microsoftTeams.initialize(() =&gt; {
        microsoftTeams.authentication.authenticate({
          url: process.env.VUE_APP_ORIGIN + '/auth/teams-auth',
          width: 600,
          height: 535,
          successCallback: res =&gt; this.afterLoginProcess(res.accessToken, res.expiresIn),
          failureCallback: e =&gt; {
            console.log('failure callback', e)
            reject(e)
          }
        })
      })
  })
  </code></pre>
  <p>.
  <strong>TeamsAuth.vue</strong></p>
  <pre><code>mounted () {
    microsoftTeams.initialize(() =&gt; {
      microsoftTeams.getContext(function (context: any) {
        const state = _guid()
        localStorage.setItem('simple.state', state)
        localStorage.removeItem('simple.error')
        // Go to the Azure AD authorization endpoint
        const queryParams = {
          client_id: process.env.VUE_APP_CLIENT_ID,
          response_type: 'token',
          response_mode: 'fragment',
          scope: `api://${process.env.VUE_APP_WEB_API_CLIENT_ID}/access_as_user`,
          redirect_uri: process.env.VUE_APP_ORIGIN + '/auth/teams-auth-end',
          nonce: _guid(),
          state: state,
          login_hint: context.loginHint
        }
  
      const authorizeEndpoint = `https://login.microsoftonline.com/${context.tid}/oauth2/v2.0/authorize?${toQueryString(queryParams)}`
      window.location.assign(authorizeEndpoint)
    })
  })}
  </code></pre>
  <p>.
  <strong>TeamsAuthEnd.vue</strong></p>
  <pre><code>  mounted () {
  microsoftTeams.initialize(() =&gt; {
    const hashParams = window.location.hash.split('#/')[1]
      .split('&amp;')
      .map(p =&gt; p.split('='))
      .reduce((acc, [k, v]) =&gt; {
        acc[k.replace('/', '')] = v
        return acc
      }, {} as any)
  
    if (hashParams.error) {
      microsoftTeams.authentication.notifyFailure(hashParams.error)
    } else if (hashParams.access_token) {
      const expectedState = localStorage.getItem('simple.state')
      if (expectedState !== hashParams.state) {
        microsoftTeams.authentication.notifyFailure('StateDoesNotMatch')
      } else {
        // Success: return token information to the tab
        microsoftTeams.authentication.notifySuccess({
          idToken: hashParams.id_token,
          accessToken: hashParams.access_token,
          tokenType: hashParams.token_type,
          expiresIn: hashParams.expires_in
        } as any)
      }
    } else {
      // Unexpected condition: hash does not contain error or access_token parameter
      microsoftTeams.authentication.notifyFailure({
        reason: 'UnexpectedFailure',
        str: window.location.hash,
        data: hashParams
      } as any as string)
    }
    window.close()
  })
  </code></pre>
  <p>}</p>