How do you integrate Microsoft Entra ID (SAML) with AWS Amplify's Authenticator Component?

I'm having problems making the AWS Amplify Authenticator component work with a SAML provider. I've followed the documentation and created a Microsoft EntraID provider (followed steps here: Microsoft Entra ID (SAML)). I've also updated the amplify/auth/resource.ts to add the configuration under externalProviders. I checked in AWS Cognito and saw the new provider "MicrosoftEntraIDSAML" listed. However, I don't see any change in the UI. I'm using the Authenticator component. Is there something I need to do so that Microsoft SAML shows up as an option?

I've also added a button to the footer as follows:

const components = {
  Footer() {
    const { tokens } = useTheme();

    return (
      <View textAlign="center" padding={tokens.space.large}>
        <Button onClick={() => signInWithRedirect({
          provider: { custom: "MicrosoftEntraIDSAML" }
        })}>Sign in with SAML</Button>
      </View>
    );
  },
};

Clicking that button redirects me to Microsoft to login, but when I get redirected back to the app, I'm not logged in.

Please let me know how to integrate this process with the Authenticator component. Or, at least how to have an account created and logged in after a user is redirected to Microsoft and back.

If there is better documentation on this entire process, please point me there as well.

Solution

Unfortunately, as of Dec 30 2024, the Authenticator component only automatically infers sign in with Amazon, Apple, Facebook or Google.

The easiest workaround for this is adding a custom button in the footer. You can do this with something like the following:

import { FaMicrosoft } from "react-icons/fa";

async function signInWithMicrosoftEntraID() {
  await signInWithRedirect({
    provider: {
      custom: 'MicrosoftEntraIDSAML',
    },
  });
}

export function CustomFooter() {
  return (
    <View
      style={{
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '16px',
      }}
    >
      <Button
        onClick={signInWithMicrosoftEntraID}
        startIcon={<FaMicrosoft size={24} />}
      >
        Sign in with Microsoft
      </Button>
    </View>
  );
}

You can add this to your Authenticator as follows:

<Authenticator
  components={{
    Header: CustomHeader,
    Footer: CustomFooter,
  }}
>
  ...
</Authenticator>