CODEWITHSUNDEEP
reactjsmicrosoft-teamsazure-ad-msalazure-static-web-app
Ben S
Ben S

Reputation: 1

How to authenticate a Teams app hosted in Azure Static Web App using MSAL?

I have a Teams tab app built using Node.js and React. The code is hosted in an Azure Static Web App. I'm having trouble figuring out how to add authentication between the Teams app and the SWA.

The app should authenticate in the background when launched, without interaction from the user. It should use the user's current Teams session to get the user info. I cannot get the app to successfully get the user info/token or to authenticate against the SWA.

I have tried a number of approaches, following the official documentation:

The boilerplate for a React Teams Tab app included code to get the current user details and token, but only works when running the app from my local build. Here is the code:

const { teamsUserCredential } = useContext(TeamsFxContext);

  const { loading, data, error } = useData(async () => {
    if (teamsUserCredential) {
      const userInfo = await teamsUserCredential.getUserInfo();
      return userInfo;
    }
  });

  const userName = loading || error ? "" : data!.displayName;

  const hubName = useData(async () => {
    await app.initialize();
    const context = await app.getContext();
    return context.app.host.name;
  })?.data;

useEffect(() => {
    let ignore = false;

    const loginAndGetToken = async () => {
      if (!teamsUserCredential) {
        console.error("Teams user credential is not initialized.");
        return;
      }

      try {
        await teamsUserCredential.login(["User.Read"]);
        console.log("Login successful");

        const tokenResponse = await teamsUserCredential.getToken(["User.Read"]);
        if (tokenResponse) {
          if (!ignore) {
            setToken(tokenResponse.token);
            console.log("Token acquired:", tokenResponse.token);
          }
        } else {
          console.error("Token response is null or undefined.");
        }
      } catch (error) {
        if (error instanceof Error)
          console.error("Token acquisition failed:", error.message);
      }
    };

    loginAndGetToken();

    return () => {
      ignore = true;
    };
  }, [teamsUserCredential]);

When I point to the Static Web App (or deploy to the Teams Developer Portal), it gives me the following errors:

  1. POST <https://login.microsoftonline.com/<id>/oauth2/v2.0/token?client-request-id=<id>> 400 (Bad Request)
  2. Refused to display 'https://login.microsoftonline.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

I have investigated the second error and it looks like my code is set to open a popup, but for some reason doesn't seem to ever reach the line:

useEffect(() => {
    app.initialize().then(() => {
      app.getContext().then((context) => {
        const clientId = config.clientId;
        const scope = "User.Read";
        const loginHint = context.user?.loginHint;
  
        authentication.authenticate({
          url: window.location.origin + `/auth-start.html?clientId=${clientId}&scope=${scope}&loginHint=${loginHint}`,
          width: 600,
          height: 535
        }).then((result) => {
          console.log("Authentication successful:", result);
        }).catch((reason) => {
          console.log("Authentication failed:", reason);
        });
      });
    });
  }, []);

I'm sure this is just a matter of configuration settings and properly acquiring the user details and token, and possibly a misuse of useEffect and/or the scope at which I'm trying to authenticate. Some other details:

Upvotes: 0

Views: 54

Answers (0)

Related Questions