Frontend fails to render when a custom provider is added to backend auth configuration.

[Orf1]

Environment information

System:
  OS: macOS 15.1.1
  CPU: (16) arm64 Apple M3 Max
  Memory: 3.17 GB / 48.00 GB
  Shell: /bin/zsh
Binaries:
  Node: undefined - undefined
  Yarn: 1.22.22 - ~/Library/Application Support/JetBrains/WebStorm2024.2/node/versions/23.1.0/bin/yarn
  npm: 10.9.1 - ~/Library/Application Support/JetBrains/WebStorm2024.2/node/versions/23.1.0/bin/npm
  pnpm: undefined - undefined
NPM Packages:
  @aws-amplify/backend: 1.0.0
  @aws-amplify/backend-cli: 1.0.1
  aws-amplify: 6.2.0
  aws-cdk: 2.140.0
  aws-cdk-lib: 2.140.0
  typescript: 5.4.5
AWS environment variables:
  AWS_STS_REGIONAL_ENDPOINTS = regional
  AWS_NODEJS_CONNECTION_REUSE_ENABLED = 1
  AWS_SDK_LOAD_CONFIG = 1
No CDK environment variables

Describe the bug

We're working on implementing Microsoft EntraID using SAML.

When the SAMLprovider is added to the auth configuration and deployed, Sign in with Microsoft works great locally using vite.

Unfortunately, the hosted deployment at amplifyapp.com is completely blank.

There are no errors present in the console or network tab. It's just completely empty.

When we remove the SAML portion of the auth configuration and push again. The page renders perfectly fine. (without working SAML obviously)

It's important to re-iterate that it works perfectly fine when running on localhost. Blank only when it's accessed via the amplifyapp.com url.

There are no errors in the deployment logs, and both the working and non working deployments have identical logs.

The issue is present on both Chrome & Safari after clearing cache, other browsers haven't been tested.

Without SAML

With SAML

Reproduction steps

Add an SAML provider to the Auth resource.ts

Auth resource.ts

import {defineAuth, secret} from '@aws-amplify/backend';
import {preSignUp} from "./pre-sign-up/resource";

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      google: {
        clientId: secret('GOOGLE_CLIENT_ID'),
        clientSecret: secret('GOOGLE_CLIENT_SECRET'),
        scopes: ['email'],
      },
      saml: {
        name: "MicrosoftEntraID",
        metadata: {
          metadataType: "URL",
          metadataContent: "...",
        },
        attributeMapping: {
          email: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
        },
      },
      callbackUrls: [
        ...
      ],
      logoutUrls: [
        ...
      ]
    }
  },
  triggers: {
    preSignUp,
  },
  access: (allow) => [
    allow.resource(preSignUp).to(["manageUsers"]),
  ],
});

App.tsx

function App() {
  const [theme] = useMode();
  
  global.navigator = {
    userAgent: 'node',
  }

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <Authenticator
        hideSignUp={true}
        components={{
          Header: CustomHeader,
          Footer: CustomFooter,
        }}
      >
        ...
      </Authenticator>
    </ThemeProvider>
  );
}

export default App;

[ykethan]

Hey,👋 thanks for raising this! I'm going to transfer this over to our Amplify UI repository for better assistance on the authenticator component.

[Orf1]

This issue was fixed by updating to the latest version.
https://docs.amplify.aws/gen1/react/prev/build-a-backend/troubleshooting/upgrade-amplify-packages/