question

GuyKedar-0937 avatar image
0 Votes"
GuyKedar-0937 asked HunaidHanfee-MSFT answered

how to login with firebase email link to a microsoft teams tabs app

I am trying to create an app with Microsoft teams where I basically host an existing web app within a tab.

In that web app, the sign-in is via Firebase email links.

The user enters an email address, gets an email with a link that should bring him back to the app, and log him in.

The problem is that I couldn't find a way for the web app to get access the original URL the user got in the email because the tab will always pass the same URL to the web app as defined in the manifest.

The closest I got is building a deep link to ms teams for the URL that is sent in the email

const actionCodeSettingsTeams = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://teams.microsoft.com/l/entity/extity-id/app

  handleCodeInApp: true,
};

       await firebase
          .auth()
          .sendSignInLinkToEmail(
            data.email,
           actionCodeSettingsTeams,
          );


So the user is redirected back to the correct tab

but when checking firebase.auth().isSignInWithEmailLink(window.location.href) it will always return false since the original URL called from the email is gone and the web app only gets the URL defined in the app manifest for that tab.


office-teams-windows-itprooffice-teams-app-dev
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@GuyKedar-0937

As we are mainly responsible for general question of Microsoft Teams, your question related to Microsoft Graph is not supported by us. I will add office-teams-app-dev tag. Someone checking this tag will give you more insights.

Given that, I read some articles about how to Implement authentication in a custom tab. Please pay attention to the OAuth 2.0 implicit grant flow and Microsoft Teams tabs part in this link. Besides, you can refer to a demo that shows the process to create a custom channel tab that displays information about current user, which was retrieved from Microsoft Graph.


0 Votes 0 ·

We are looking into this, we will get back to you soon.
Thanks

0 Votes 0 ·
GuyKedar-0937 avatar image GuyKedar-0937 HunaidHanfee-MSFT ·

Thanks! looking forward to hearing if there is a solution

0 Votes 0 ·

1 Answer

HunaidHanfee-MSFT avatar image
0 Votes"
HunaidHanfee-MSFT answered

Hello @GuyKedar-0937,
I find one thing that might be used in your scenario. The subEntityId parameter that you can add in your deeplink and make use of it.

Follow this doc for more information - Generate a deep link to your tab

 https://teams.microsoft.com/l/entity/<appId>/<entityId>?context={"subEntityId":"useThisValue"}

You need to get first context and you can access it like context.subEntityId

 microsoftTeams.getContext((context) => {
     if (context) {
         this.setState({ teamsContext: context });
     }
 });

Hope this helps.
Other than this I didn't find anything that can be used in your scenario.

Thanks,
Hunaid Hanfee



If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.



5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.