CODEWITHSUNDEEP
microsoft-graph-apibotframeworkmicrosoft-teams
GMAC
GMAC

Reputation: 868

Azure AD authentication not working as expected for mobile devices

I have built an authentication system for Microsoft Teams tab -( angular application) using Authentication for tabs using Azure Active Directory - Teams and it is working fine on desktop (app and browser) but when I am trying to run on the mobile app and then press Authenticate(seen below in image) button it takes me to the sign-in popup after signing in it returns back to same authenticate page.

Now, when I try it a second time it lands me on the page where I want to but with missing data and also, not as responsive it should be.

The below screenshots taken from the iOS device will help further: I am on Version: 2.4.0

enter image description here enter image description here enter image description here

Desktop View:

enter image description here

Major Queries:

  1. Is the Azure AD (https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad) authentication will not work for mobile devices?

  2. If I switch to a Single sign-on(https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso) , are there any limitations to using it and also, will it support all the platforms ?

Upvotes: 0

Views: 694

Answers (1)

Oleksa
Oleksa

Reputation: 646

  1. Is the Azure AD (https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad) authentication will not work for mobile devices?

It should work on mobile devices.

  1. If I switch to a Single sign-on(https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-aad-sso) , are there any limitations to using it and also, will it support all the platforms ?

Single sign-on doesn't solve anything because if it fails you have to fallback to the default auth flow.

Looks like this is an angular issue, not a Microsoft's auth issue. The problem is interesting because in general it is working but from the second attempt.

I think it might be the issue with synchronization, when some part of the code is running outside of the Angular but is trying to do something with the variables in the Angular's zone.

I don't know how exactly microsoftTeams.getContext and microsoftTeams.authentication.authenticate work but they are async and if they use setInterval/setTimeout they definitely will work outside of your Angular app. And if they set data into your angular variables you will have the issues like you described.

So that's what happens in my opinion:

  1. You are clicking auth button, everything is fine you are redirected, authenticated and redirected back to your final page.
  2. On that final page your app is trying to save your token into the local angular variable.
  3. Code that is setting the token works outside the Angular and Angular doesn't see this change. So from the angular's perspective nothing has changed, you are still not authenticated.
  4. Your app is redirecting you to your private page, Angular doesn't see token and redirects you back to the auth page.
  5. <Here something happend, for example ChangeDetectorRef.detectChanges, or other sync things>.
  6. You click auth again and you end up authenticated on your private page, but without the apiKey and UserID (which have the same issue as token)

So to fix this you need to notify angular manually by using ChangeDetectorRef.detectChanges or wrap your async code with the NgZone.run.

Upvotes: 1

Related Questions