How to use a tenant specific endpoint

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [X] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

We created an application in our Azure instance, registered it, and plugged the application Id into the clientID field in the React component

Any log messages given by the failure

Application ‘<ApplicationID>’ is not configured as a multi-tenant application. Usage of the /common endpoint is not supported for such applications created after ‘10/15/2018’. Use a tenant-specific endpoint or configure the application to be multi-tenant.

Expected/desired behavior

OS and Version?

macOS Mojave

Versions

react-aad-msal@0.4.1

Mention any other details that might be useful

I fully anticipate that this is an issue with our configuration in Azure or usage of the component, but I was hoping to get some advice on how to proceed.

React component usage:

import * as React from "react";
import { AzureAD, LoginType, MsalAuthProviderFactory } from "react-aad-msal";

import Logo from "components/Logo";

export default class SignIn extends React.Component {
  public render() {
    return (
      <section className="signin-container">
        <AzureAD
          provider={
            new MsalAuthProviderFactory({
              clientID: "<AzureApplicationID>",
              redirectUri: "https://localhost",
              scopes: ["openid"],
              type: LoginType.Popup,
              persistLoginPastSession: true
            })
          }
          unauthenticatedFunction={(loginFunction: () => any) => {
            return (
              <>
                <Logo style={{ width: 600, height: 200 }} />
                <button className="signin-button" onClick={loginFunction}>
                  <h2>Sign In</h2>
                </button>
              </>
            );
          }}
          authenticatedFunction={(logoutFunction: () => any) => {
            return (
              <>
                <Logo style={{ width: 600, height: 200 }} />
                <button className="signout-button" onClick={logoutFunction}>
                  <h2>Sign Out</h2>
                </button>
              </>
            );
          }}
          userInfoCallback={(receivedUserInfo: any) => {
            // tslint:disable no-console
            console.log("USER INFO = ", receivedUserInfo);
          }}
        />
      </section>
    );
  }
}

---

Thanks! We’ll be in touch soon.

[vjrantal]

I was able to get past the mentioned error by setting the REACT_APP_AUTHORITY to match with the tenant I am using - something like:

export REACT_APP_AUTHORITY="https://login.microsoftonline.com/contoso.onmicrosoft.com"

[omusavi]

Sorry for the delay in getting back to you. I would guess that the problem here is that the authority URI is not being set, so it defaults to ‘common’ (https://login.microsoftonline.com/common)

Please see the documentation for guidelines on setting the Authority URI. Here is the documentation on configuring a multi-tenant application which uses the common endpoint, but in this case you likely do not want to use that as you seem to be on a single-tenant application.

This error message is coming from the main MSAL project, so you might get some help in the documentation there: https://github.com/AzureAD/microsoft-authentication-library-for-js