Error in SSO in Microsoft Teams React App

Question

So I am making Microsoft Teams Tab with React, and there is required of SSO

I have gone through many video and article about SSO in teams Tab, but I go confused, I some video they say SSO required both client and server side for SSO, but there is JS library for SSO which run only on client side and completes the SSO, but this method not work, when open in Teams Tab. But work on web page open in browser directly.

I go through video and articles about SSO but nothing helps, I need article how to do SSO in Teams Tab with React

Answer 1

To implement SSO in a Microsoft Teams Tab with React:

Configure server-side authentication using OAuth2, OpenID Connect, or similar. Use the Microsoft Teams JavaScript SDK within your React app to handle the authentication flow. Ensure your React app communicates with your server-side using tokens obtained during authentication. Test thoroughly within the Teams environment to ensure proper functionality. For detailed steps, refer to official Microsoft Teams and authentication documentation tailored to your identity provider.

Answer 2

you can implement it only client side as well if all data you need is included in the scopes: openid, email, profile, and offline_access. Make sure to call microsoftTeams.authentication.getAuthToken() to get the token from MSFT Teams and then decode it: jwtDecode(token).

I do it like this on my MSFT Teams React app:

const authenticate = () => {
return new Promise((resolve, reject) => {
  microsoftTeams.authentication.getAuthToken({
    resources: [
      "replace_with_APP_ID_URI_defined_on_Azure_Application",
    ],
    silent: false,
    successCallback: async (token) => {
      try {
        exchangeClientTokenForServerToken(token);
        //I decode the token on server side 
      } catch (error) {
        console.log(error);
      }
      resolve();
    },
    failureCallback: (message) => {
      console.error(message);
      reject();
    },
  });
});

};