Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Configure Azure AD app for multi-tenant SSO login

My coworkers and I are currently developing a React app that is supposed to be distributed on the Teams app store.

We started from the React template provided in VS Code by Teams Toolkit and managed to get SSO working with the Azure AD app registration created by Teams Toolkit. Here is a simplified version of the code that we use to log the user :

import { TeamsUserCredential } from "@microsoft/teamsfx";
import { useNavigate } from "react-router-dom";


interface IProps {
    teamsUserCredential?: TeamsUserCredential
}

const LoginPage = (props: IProps) => {

    const navigate = useNavigate();

    const login = async () => {
        try {
            await props.teamsUserCredential?.login(["User.Read", "User.ReadBasic.All"]);
            navigate("/home");
        }
        catch(e: any) {
            console.log("User did not logged", e);
        }
    }
    
    return (
        <div >
            <p>You need to login</p>
            <button onClick={login}>Login</button>
        </div>
    )
}

export default LoginPage;

The Azure AD App registration created by Teams Toolkit was only single tenant, and we couldn’t enable multi-tenant on it, so we decided to create a new multi-tenant one manually. From there, we edited the app Manifest so that it matches the new Azure AD app that it needs to use.

After that, the SSO authentication was not working anymore and every time the user clicks the button it generates the following error : Get SSO token failed with error: App resource defined in manifest and iframe origin do not match

We already checked both App manifest and Azure AD App registration manifest but couldn’t find the issue.
We contacted Microsoft to get help with this issue, and they told us to post this on StackOverflow so here we are 🙂

It is to note that our app is hosted on an Azure storage account and that we access it with a URL like this : https://m365tabxxxxxx.z6.web.core.windows.net

Here are both the app manifest and the Azure AD App registration manifest, maybe you can find errors that we missed:

App manifest

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.12/MicrosoftTeams.schema.json",
    "version": "1.0.15",
    "manifestVersion": "1.12",
    "id": "myappid",
    "packageName": "fr.mycompanyname.myappname",
    "name": {
        "short": "myappname",
        "full": "myappname"
    },
    "developer": {
        "name": "mycompanyname",
        "mpnId": "0000000",
        "websiteUrl": "https://www.mycompanyname.fr/en/",
        "privacyUrl": "https://www.mycompanyname.fr/privacy-policy/",
        "termsOfUseUrl": "https://www.mycompanyname.fr/en/legal-informations/"
    },
    "description": {
        "short": "My app is nice",
        "full": "My app is nice but longer..."
    },
    "icons": {
        "outline": "outline.png",
        "color": "color.png"
    },
    "accentColor": "#FFFFFF",
    "staticTabs": [
        {
            "entityId": "index0",
            "name": "Personal Tab",
            "contentUrl": "https://m365tabxxxxxx.z6.web.core.windows.net/index.html#/tab",
            "websiteUrl": "https://m365tabxxxxxx.z6.web.core.windows.net/index.html#/tab",
            "scopes": [
                "personal"
            ]
        }
    ],
    "validDomains": [
        "myappname.mycompanyname.fr",
        "m365tabxxxxxx.z6.web.core.windows.net"
    ],
    "webApplicationInfo": {
        "id": "myMultiTenantAzureADAppId",
        "resource": "api://myappname.mycompanyname.fr/myMultiTenantAzureADAppId"
    },
    "localizationInfo": {
        "defaultLanguageTag": "en-us",
        "additionalLanguages": [
            {
                "languageTag": "fr",
                "file": "fr.json"
            }
        ]
    },
    "publisherDocsUrl": "https://www.mycompanyname.fr/en/help-page/"
}

Azure AD App Registration manifest

{
    "id": "MyAADAppObjectId",
    "acceptMappedClaims": null,
    "accessTokenAcceptedVersion": 2,
    "addIns": [],
    "allowPublicClient": true,
    "appId": "myMultiTenantAzureADAppId",
    "appRoles": [],
    "oauth2AllowUrlPathMatching": false,
    "createdDateTime": "2023-12-12T16:41:59Z",
    "description": null,
    "certification": null,
    "disabledByMicrosoftStatus": null,
    "groupMembershipClaims": null,
    "identifierUris": [
        "api://myappname.mycompanyname.fr/myMultiTenantAzureADAppId"
    ],
    "informationalUrls": {
        "termsOfService": "https://www.mycompanyname.fr/en/legal-informations/",
        "support": null,
        "privacy": "https://www.mycompanyname.fr/privacy-policy/",
        "marketing": null
    },
    "keyCredentials": [],
    "knownClientApplications": [],
    "logoUrl": "https://mylogourl",
    "logoutUrl": null,
    "name": "myappname-multi-tenant",
    "notes": null,
    "oauth2AllowIdTokenImplicitFlow": true,
    "oauth2AllowImplicitFlow": true,
    "oauth2Permissions": [
        {
            "adminConsentDescription": "Allows Teams to call the app's web APIs as the current user.",
            "adminConsentDisplayName": "Teams can access app's web APIs",
            "id": "my_access_as_user_id",
            "isEnabled": true,
            "lang": null,
            "origin": "Application",
            "type": "User",
            "userConsentDescription": "Enable Teams to call this app's web APIs with the same rights that you have",
            "userConsentDisplayName": "Teams can access app's web APIs and make requests on your behalf",
            "value": "access_as_user"
        }
    ],
    "oauth2RequirePostResponse": false,
    "optionalClaims": null,
    "orgRestrictions": [],
    "parentalControlSettings": {
        "countriesBlockedForMinors": [],
        "legalAgeGroupRule": "Allow"
    },
    "passwordCredentials": [
        {
            "customKeyIdentifier": null,
            "endDate": "2025-12-12T10:10:24.569Z",
            "keyId": "myKeyId",
            "startDate": "2023-12-13T10:10:24.569Z",
            "value": null,
            "createdOn": "2023-12-13T10:10:42.6188671Z",
            "hint": "---",
            "displayName": "Password uploaded on Wed Dec 13 2023"
        }
    ],
    "preAuthorizedApplications": [
        {
            "appId": "5e3ce6c0-2b1f-4285-8d4b-75ee78787346", /*Microsoft Teams Web Client*/
            "permissionIds": [
                "my_access_as_user_id"
            ]
        },
        {
            "appId": "1fec8e78-bce4-4aaf-ab1b-5451cc387264", /*Microsoft Teams*/
            "permissionIds": [
                "my_access_as_user_id"
            ]
        }
    ],
    "publisherDomain": "mycompanyname.fr",
    "replyUrlsWithType": [
        {
            "url": "https://m365tabxxxxxx.z6.web.core.windows.net",
            "type": "Web"
        },
        {
            "url": "https://m365tabxxxxxx.z6.web.core.windows.net/blank-auth-end.html",
            "type": "Spa"
        },
        {
            "url": "https://m365tabxxxxxx.z6.web.core.windows.net/auth-end.html",
            "type": "Web"
        }
    ],
    "requiredResourceAccess": [
        {
            "resourceAppId": "00000003-0000-0000-c000-000000000000", /*Microsoft Graph*/
            "resourceAccess": [
                {
                    "id": "e1fe6dd8-ba31-4d61-89e7-88639da4683d", /*User.Read*/
                    "type": "Scope"
                },
                {
                    "id": "b340eb25-3456-403f-be2f-af7a0d370277", /*User.ReadBasic.All*/
                    "type": "Scope"
                }
            ]
        }
    ],
    "samlMetadataUrl": null,
    "signInUrl": "https://www.mycompanyname.fr/en",
    "signInAudience": "AzureADandPersonalMicrosoftAccount",
    "tags": [],
    "tokenEncryptionKeyId": null
}

Thanks

Tags:

2

Answers


  1. 0

    The error message "Get SSO token failed with error: App resource defined in manifest and iframe origin do not match" indicates a mismatch between the app resource defined in the app manifest and the iframe origin.

    To resolve this issue, you need to ensure that the app resource defined in the app manifest and the iframe origin match.

    1.Check the app manifest: Open the app manifest file (manifest.json) and verify that the webApplicationInfo section contains the correct id and resource values. The id should match the Azure AD app registration’s Application (client) ID, and the resource should match the URL of your React app hosted on the Azure storage account (https://m365tabxxxxxx.z6.web.core.windows.net).

    2.Verify the Azure AD app registration: Go to the Azure portal and navigate to the Azure AD app registration that you created manually. Make sure that the Application (client) ID matches the id value in the app manifest. Also, check the Redirect URIs and ensure that the URL of your React app is listed as a valid redirect URI.

    3.Update the app manifest: If you made any changes to the Azure AD app registration, such as updating the Redirect URIs, you need to update the app manifest accordingly. Update the webApplicationInfo section in the app manifest with the correct id and resource values.

    4.Test the app: After making the necessary changes, rebuild and redeploy your app to Teams. Test the SSO authentication flow again and see if the issue is resolved.

    Here is an example of how the webApplicationInfo section should look in the app manifest:

    "webApplicationInfo": {
  "id": "<Azure AD app registration Application (client) ID>",
  "resource": "https://m365tabxxxxxx.z6.web.core.windows.net"
}

    Also please refer this: Overview to authentication for tabs using SSO in Teams with Microsoft Entra ID

    Login or Signup to reply.
  2. 0

    I work with him and we manage to solve this issue.

    On the azure storage account that we use to host the app, we added a CDN and configure it with a new custom domain name (for example : myappname.mydomain.fr)

    On the azure AD app registration :

    1. In the authentication tab, we changed the redirect URIs to match our custom domain
    2. In the expose an API tab, we updated the Application ID URI by substituting the part myappname.mycompanyname.fr by our custom domain. So our new ID URI would be api://myappname.mydomain.fr/myMultiTenantAzureADAppId

    On the app manifest:

    1. We replaced every iteration m365tabxxxxxx.z6.web.core.windows.net by
      our new custom domain
    2. We change the webApplicationInfo: ressource part to match our new ID URI.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search