Should the contents of MsalAuthenticationTemplate tag be assured that there is a valid user session?

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-node@1.x.x
• @azure/msal-react@1.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angular@2.x.x
• @azure/msal-angularjs@1.x.x

Description

Our expectation was that the content of MsalAuthenticationTemplate would only ever be rendered if a user was actually logged in and that they would be prompted to sign in again if their login had expired.

We’ve seen both errors that we’re unable to get a token silently because the token is at its refresh limit and I’ve seen occasional errors that a token can’t be acquired silently because no user is logged in.

In both cases, I would have expected the outer MsalAuthenticationTemplate to have redirected to login again.

Note that these errors are occurring on a fresh page load of the app, not after extended use with it open.

Are we missing something?

const AppContent: React.FunctionComponent<{}> = () => {
  const { accounts, instance, inProgress } = useMsal();
  const [token, setToken] = useState('');

  useEffect(() => {
    if (inProgress !== 'none') {
      return;
    }

    const username = accounts[0]?.username;
    if (!username) {
      return;
    }

    const account = instance.getAccountByUsername(username);
    if (!account) {
      return;
    }

    const tokenRequest: SilentRequest = {
      scopes: ['openid'],
      account: account,
    };
    instance
      .acquireTokenSilent(tokenRequest)
      .then((response) => {
        setToken(response.idToken || '');
      })
      .catch((e) => {
        // Something went wrong
        console.error(e);
      });
  }, [accounts, inProgress, instance]);
  
  if (!token) {
    return <span>Not signed in yet</span>;
  }
  
  return <span>Signed in!</span>;
};

export const loginRequest = {
  scopes: ['openid'],
  extraQueryParameters: { domain_hint: 'example.com' },
};
interface Props {
  msalInstance: PublicClientApplication;
}
export const App: React.FunctionComponent<Props> = (props: Props) => {
    return (
        <MsalProvider instance={props.msalInstance}>
          <MsalAuthenticationTemplate interactionType={InteractionType.Redirect} authenticationRequest={loginRequest}>
            <EmployeeAppContent />
          </MsalAuthenticationTemplate>
        </MsalProvider>
    );
}

Source

• Internal (Microsoft)
• Customer request

[timtucker]

Which sounds like pretty much the same behavior as I observed from <AuthenticatedTemplate>, which is next to useless.

If MsalAuthenticationTemplate can’t guarantee that it has an authenticated user in context, it doesn’t sound like it offers much more.

I guess I’m looking for a higher level of abstraction than is provided.

Would really love something as simple as a single tag or hook that handles any fallbacks automatically and gives some indication of whether or not a request is currently in progress:

const [account, validToken, inProgress] = useMsalTokenProvider(siteConfig);

Have tried various attempts at getting the fallback logic to work consistently, but it’s nearly impossible to troubleshoot when I can only get the errors I see to occur once every 24 hours.

[georgejdli]

With that said, this is a reasonable use case and we’ll take it under consideration for future enhancements.

For my use case at least I would like to show the user a login prompt (with a message telling them popup blockers should be disabled) if they aren’t signed in or if their token (or refresh token) has expired