External OAuth in Teams APP using SPFX Webpart

[andre-a13]

Hello guys sorry to open this as an issue but I face a problem and I'm not sure about the behavior.

I have a SPFX Webpart that I want to use as Teams App without backend (only Azure Functions)

This webpart should connect to a third party OAuth Provider (for my tests I used a google app) for this I would like to use the authentication.authenticate method setup with one Azure Function App with two functions.

I setup both AF, one for the first endpoint and the second for the callback.

The version of the library I use is the following:

"@microsoft/teams-js": "^2.26.0",

In the SPFX App, I use the following code to authenticate :

const authenticate = () => {
    app.initialize().then(() => {
      const url = `https://localhost:7071/api/auth-start?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}&hostRedirectUrl={hostRedirectUrl}`;
      authentication
        .authenticate({
          url: url,
          isExternal: true,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
    });
  };

But with this url, I face the following error:

Error : Auth url is not valid

I deployed the app in the tenant application catalog and tested it on the Windows Client. I also tested it on the web portal in this particular context I face no issue until the last redirection ( but external oauth providers seems to not be fully compatible with the web portal)

I don't know if what I try to achieve is feasible because all example I saw refer to the third party back-end being on the same domain or maybe I missed something,

Thank you!

[jekloudaMSFT]

Hi @andre-a13, am I understanding correctly that you're testing this on the Teams Windows desktop client? Usually, this error occurs when an app tries to authenticate with a URL that is not included in the validDomains field of the app manifest. Can you please confirm that "localhost:7071" is included in your validDomains? Can you also say more about the redirection problem you're seeing on the web portal? This is the Teams web client? You should be able to use external auth providers on Web too

[andre-a13]

Hi @jekloudaMSFT thanks for your help!

I only added "localhost" to the validDomain, I just tried to add the port aswell but I have the same issue

Here are two repos that demonstrate what I'm looking to do

The SPFX Webpart: https://github.com/andre-a13/TeamsAppExternalOAuth (created using the teams toolkit is VS Code) The Azure Functions: https://github.com/andre-a13/TeamsExternalOAuthBridgeFuncApps

Regarding the redirection problem I'm not 100% sure that the functions are correct I'm still learning the process 😅 but I'm atleast able to open the authentification window on Teams web client

[jekloudaMSFT]

Ok, thanks for checking! Can you please try to repro with teams-js logging enabled? https://github.com/OfficeDev/microsoft-teams-library-js/wiki/TeamsJS-Logging I don't see anything in particular in the app code that would cause this so some more data would be helpful here

[andre-a13]

I enabled the log and here is the result:

The point in the log that I don't understand is the "validDomains.json". It does not includes any of the validDomains that are configurated in "validDomains" part in the manifest.

Also I checked the lib code and the error message is nowhere to be seen, I assume the issue come from teams api itself

[jekloudaMSFT]

Hi @andre-a13, thanks for your patience. The validDomains.json in the log is the valid domains list for the host, that is the list of trusted host domains that teams-js will communicate with, which should not impact this scenario. You're correct that the error message is originating from Teams, but as far as I can tell, it only gets thrown when the URL provided does not match the validDomains from the app manifest. Would you be able to share the validDomains section of your manifest, or at least the localhost entry? Could you also share the Teams version you're testing with and how you're testing on Teams: are you sideloading the app manually or using Teams Toolkit to upload the app?

[andre-a13]

Hi @jekloudaMSFT thank you for the answer

The manifest is the same as the one here https://github.com/andre-a13/TeamsAppExternalOAuth/blob/main/appPackage/manifest.json

I'm using Teams Toolkit to upload the app and install the local app via the windows client more info on versions below

first line is microsoft teams version last line is client version

I'm not sure if any update has been made but I retried few minutes ago and without change made to the context, I was able to open the oauth window, process google authentification and retrieve the code from the teams app.

Can you confirm if there is some delay between the app deployment and the new domain being added to the valid domain list ? Or maybe a fix has been pushed to teams api?

[jekloudaMSFT]

I'm glad it's working now! Thanks for sharing the additional info. When deploying the app, there can be some delay between the upload and the manifest updating, but updating with Teams Toolkit is usually more immediate. That being said, it's possible that was the issue, since I don't see any SDK changes that would have fixed this. Did you have any other questions?

[andre-a13]

Thank you for your help!

A final question, is there a way to configure the valid domains somewhere outside the app manifest, for example somewhere in the Teams Administration or Tenant administration?

[jekloudaMSFT]

Hey @andre-a13, there is not - the only way to configure valid domains is from the app manifest