Next 14 - Amplify sign in button not visible when deployed

[nfluk]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React, Other

Which UI component?

Authenticator

How is your app built?

next.js

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari

Which region are you seeing the problem in?

No response

Please describe your bug.

I use AWS Amplify as login in a nextJS 14 project. When I look at it in localhost everything looks fine.

But when it is deployed the styling of the primary buttons doesn't seem to be used. The border radius is not there (after the "or") and the sign in button is not visible/is white.

If I use the developer tools and remove the class "amplify-button--primary", the button becomes visible.

I have tried changing the styling of the signIn in my code, as well as removing the styling all together for the primary button. Neither has worked in displaying the button when deployed.

I would like my styling to be in effect when deployed (as in localhost). Or at least get the button to be visible.

What am I missing or doing wrong?

Here is my code:

"use client";
import React from "react";

import "@aws-amplify/ui-react/styles.css";
import {
  Authenticator,
  Button,
  ColorMode,
  Heading,
  Image,
  Text,
  Theme,
  ThemeProvider,
  View,
  defaultDarkModeOverride,
  useAuthenticator,
  useTheme,
} from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import awsmobile from "@/aws-exports";

Amplify.configure(awsmobile);
//Amplify.Logger.LOG_LEVEL = "DEBUG";

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

    return (
      <View
        textAlign="center"
        padding={tokens.space.large}
        backgroundColor={"white"}
      >
        <Image alt="Main logo" src="/logo/Admin_dark.svg" />
      </View>
    );
  },

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

    return (
      <View textAlign="center" padding={tokens.space.large}>
        <Text color={tokens.colors.neutral[80]}>
          Copyright &copy; 2022 &trade;
        </Text>
      </View>
    );
  },

  SignIn: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Sign in to your account
        </Heading>
      );
    },
    Footer() {
      const { toForgotPassword } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toForgotPassword}
            size="small"
            variation="link"
          >
            Reset Password
          </Button>
        </View>
      );
    },
  },

  SignUp: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Create a new account
        </Heading>
      );
    },
    Footer() {
      const { toSignIn } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toSignIn}
            size="small"
            variation="link"
          >
            Back to Sign In
          </Button>
        </View>
      );
    },
  },
  ConfirmSignUp: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ConfirmSignIn: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ForgotPassword: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ConfirmResetPassword: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
};

const formFields = {
  signIn: {
    username: {
      placeholder: "Enter your email",
    },
  },
  signUp: {
    email: {
      order: 1,
      placeholder: "Enter your email",
      isRequired: true,
      label: "Email",
    },
    given_name: {
      label: "Given name",
      order: 2,
      isRequired: true,
      placeholder: "Enter your first name:",
    },
    family_name: {
      label: "Family name",
      placeholder: "Enter your family name:",

      order: 3,
      isRequired: true,
    },

    mobile: {
      label: "Mobile",
      order: 4,
      isRequired: true,
      placeholder: "+5301112233",
    },
    password: {
      label: "Password:",
      placeholder: "Enter your password:",
      isRequired: true,
      order: 5,
    },
    confirm_password: {
      label: "Confirm Password:",
      order: 6,
      isRequired: true,
      placeholder: "Confirm your password:",
    },
  },
  forgotPassword: {
    username: {
      placeholder: "Enter your email:",
    },
  },
  confirmResetPassword: {
    confirmation_code: {
      placeholder: "Enter your Confirmation Code:",
      label: "Confirmation Code",
      isRequired: false,
    },
    confirm_password: {
      placeholder: "Enter your Password Please:",
    },
  },
  confirmSignIn: {
    confirmation_code: {
      label: "Confirmation Code",
      placeholder: "Enter your Confirmation Code:",
      isRequired: false,
    },
  },
};
export function AuthenticationWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  const [colorMode, setColorMode] = React.useState<ColorMode>("light");

  const theme: Theme = {
    name: "Auth Example Theme",
    overrides: [defaultDarkModeOverride],
    tokens: {
      colors: {
        font: {
          interactive: {
            value: "#403B66",
          },
        },
      },
      components: {
        button: {
          primary: {
            backgroundColor: {
              value: "#403B66",
            },
            _hover: {
              backgroundColor: {
                value: "#312D4E",
              },
            },
          },
          _active: { backgroundColor: { value: "#312D4E" } },
        },
        tabs: {
          item: {
            _focus: {
              color: {
                value: "#403B66",
              },
            },
            _hover: {
              color: {
                value: "#312D4E",
              },
            },
            _active: {
              color: {
                value: "#403B66",
              },
            },
          },
        },
      },
    },
  };
  return (
    <ThemeProvider theme={theme} colorMode={colorMode}>
      <div className="w-full h-full min-h-screen overflow-auto rounded-lg">
        <Authenticator
          components={components}
          formFields={formFields}
          className="w-full h-screen rounded-lg"
        >
          {children}
        </Authenticator>
      </div>
      <div
        className="absolute top-0 left-0 grid items-center justify-center w-full h-screen min-h-screen overflow-hidden -z-50"
        aria-hidden="true"
      >
        <div className="aspect-[1108/632] w-[69.25rem] blur-3xl">
          <div
            className="aspect-[1108/632] w-[85.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
            style={{
              clipPath:
                "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
            }}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}

What's the expected behaviour?

I expect the sign up button to be visible once deployed and in the style I have when running it in localhost.

Help us reproduce the bug!

Below is the entirety of the code that I am using. I'm not sure how else to reproduce this issue.

nextJS 14.0.4,
aws-amplify 6.0.7
aws-amplify/ui-react 6.0.6
amplify/adapter-nextjs 1.0.5

"use client";
import React from "react";

import "@aws-amplify/ui-react/styles.css";
import {
  Authenticator,
  Button,
  ColorMode,
  Heading,
  Image,
  Text,
  Theme,
  ThemeProvider,
  View,
  defaultDarkModeOverride,
  useAuthenticator,
  useTheme,
} from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import awsmobile from "@/aws-exports";

Amplify.configure(awsmobile);
//Amplify.Logger.LOG_LEVEL = "DEBUG";

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

    return (
      <View
        textAlign="center"
        padding={tokens.space.large}
        backgroundColor={"white"}
      >
        <Image alt="Main logo" src="/logo/Admin_dark.svg" />
      </View>
    );
  },

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

    return (
      <View textAlign="center" padding={tokens.space.large}>
        <Text color={tokens.colors.neutral[80]}>
          Copyright &copy; 2022 &trade;
        </Text>
      </View>
    );
  },

  SignIn: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Sign in to your account
        </Heading>
      );
    },
    Footer() {
      const { toForgotPassword } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toForgotPassword}
            size="small"
            variation="link"
          >
            Reset Password
          </Button>
        </View>
      );
    },
  },

  SignUp: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Create a new account
        </Heading>
      );
    },
    Footer() {
      const { toSignIn } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toSignIn}
            size="small"
            variation="link"
          >
            Back to Sign In
          </Button>
        </View>
      );
    },
  },
  ConfirmSignUp: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ConfirmSignIn: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ForgotPassword: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ConfirmResetPassword: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
};

const formFields = {
  signIn: {
    username: {
      placeholder: "Enter your email",
    },
  },
  signUp: {
    email: {
      order: 1,
      placeholder: "Enter your email",
      isRequired: true,
      label: "Email",
    },
    given_name: {
      label: "Given name",
      order: 2,
      isRequired: true,
      placeholder: "Enter your first name:",
    },
    family_name: {
      label: "Family name",
      placeholder: "Enter your family name:",

      order: 3,
      isRequired: true,
    },

    mobile: {
      label: "Mobile",
      order: 4,
      isRequired: true,
      placeholder: "+5301112233",
    },
    password: {
      label: "Password:",
      placeholder: "Enter your password:",
      isRequired: true,
      order: 5,
    },
    confirm_password: {
      label: "Confirm Password:",
      order: 6,
      isRequired: true,
      placeholder: "Confirm your password:",
    },
  },
  forgotPassword: {
    username: {
      placeholder: "Enter your email:",
    },
  },
  confirmResetPassword: {
    confirmation_code: {
      placeholder: "Enter your Confirmation Code:",
      label: "Confirmation Code",
      isRequired: false,
    },
    confirm_password: {
      placeholder: "Enter your Password Please:",
    },
  },
  confirmSignIn: {
    confirmation_code: {
      label: "Confirmation Code",
      placeholder: "Enter your Confirmation Code:",
      isRequired: false,
    },
  },
};
export function AuthenticationWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  const [colorMode, setColorMode] = React.useState<ColorMode>("light");

  const theme: Theme = {
    name: "Auth Example Theme",
    overrides: [defaultDarkModeOverride],
    tokens: {
      colors: {
        font: {
          interactive: {
            value: "#403B66",
          },
        },
      },
      components: {
        button: {
          primary: {
            backgroundColor: {
              value: "#403B66",
            },
            _hover: {
              backgroundColor: {
                value: "#312D4E",
              },
            },
          },
          _active: { backgroundColor: { value: "#312D4E" } },
        },
        tabs: {
          item: {
            _focus: {
              color: {
                value: "#403B66",
              },
            },
            _hover: {
              color: {
                value: "#312D4E",
              },
            },
            _active: {
              color: {
                value: "#403B66",
              },
            },
          },
        },
      },
    },
  };
  return (
    <ThemeProvider theme={theme} colorMode={colorMode}>
      <div className="w-full h-full min-h-screen overflow-auto rounded-lg">
        <Authenticator
          components={components}
          formFields={formFields}
          className="w-full h-screen rounded-lg"
        >
          {children}
        </Authenticator>
      </div>
      <div
        className="absolute top-0 left-0 grid items-center justify-center w-full h-screen min-h-screen overflow-hidden -z-50"
        aria-hidden="true"
      >
        <div className="aspect-[1108/632] w-[69.25rem] blur-3xl">
          <div
            className="aspect-[1108/632] w-[85.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
            style={{
              clipPath:
                "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
            }}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}

Code Snippet

The link to the deployed page:
login no sign in button

"use client";
import React from "react";

import "@aws-amplify/ui-react/styles.css";
import {
  Authenticator,
  Button,
  ColorMode,
  Heading,
  Image,
  Text,
  Theme,
  ThemeProvider,
  View,
  defaultDarkModeOverride,
  useAuthenticator,
  useTheme,
} from "@aws-amplify/ui-react";
import { Amplify } from "aws-amplify";
import awsmobile from "@/aws-exports";

Amplify.configure(awsmobile);
//Amplify.Logger.LOG_LEVEL = "DEBUG";

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

    return (
      <View
        textAlign="center"
        padding={tokens.space.large}
        backgroundColor={"white"}
      >
        <Image alt="Main logo" src="/logo/Admin_dark.svg" />
      </View>
    );
  },

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

    return (
      <View textAlign="center" padding={tokens.space.large}>
        <Text color={tokens.colors.neutral[80]}>
          Copyright &copy; 2022 &trade;
        </Text>
      </View>
    );
  },

  SignIn: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Sign in to your account
        </Heading>
      );
    },
    Footer() {
      const { toForgotPassword } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toForgotPassword}
            size="small"
            variation="link"
          >
            Reset Password
          </Button>
        </View>
      );
    },
  },

  SignUp: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Create a new account
        </Heading>
      );
    },
    Footer() {
      const { toSignIn } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toSignIn}
            size="small"
            variation="link"
          >
            Back to Sign In
          </Button>
        </View>
      );
    },
  },
  ConfirmSignUp: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ConfirmSignIn: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ForgotPassword: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
  ConfirmResetPassword: {
    Header() {
      const { tokens } = useTheme();
      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Enter Information:
        </Heading>
      );
    },
  },
};

const formFields = {
  signIn: {
    username: {
      placeholder: "Enter your email",
    },
  },
  signUp: {
    email: {
      order: 1,
      placeholder: "Enter your email",
      isRequired: true,
      label: "Email",
    },
    given_name: {
      label: "Given name",
      order: 2,
      isRequired: true,
      placeholder: "Enter your first name:",
    },
    family_name: {
      label: "Family name",
      placeholder: "Enter your family name:",

      order: 3,
      isRequired: true,
    },

    mobile: {
      label: "Mobile",
      order: 4,
      isRequired: true,
      placeholder: "+5301112233",
    },
    password: {
      label: "Password:",
      placeholder: "Enter your password:",
      isRequired: true,
      order: 5,
    },
    confirm_password: {
      label: "Confirm Password:",
      order: 6,
      isRequired: true,
      placeholder: "Confirm your password:",
    },
  },
  forgotPassword: {
    username: {
      placeholder: "Enter your email:",
    },
  },
  confirmResetPassword: {
    confirmation_code: {
      placeholder: "Enter your Confirmation Code:",
      label: "Confirmation Code",
      isRequired: false,
    },
    confirm_password: {
      placeholder: "Enter your Password Please:",
    },
  },
  confirmSignIn: {
    confirmation_code: {
      label: "Confirmation Code",
      placeholder: "Enter your Confirmation Code:",
      isRequired: false,
    },
  },
};
export function AuthenticationWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  const [colorMode, setColorMode] = React.useState<ColorMode>("light");

  const theme: Theme = {
    name: "Auth Example Theme",
    overrides: [defaultDarkModeOverride],
    tokens: {
      colors: {
        font: {
          interactive: {
            value: "#403B66",
          },
        },
      },
      components: {
        button: {
          primary: {
            backgroundColor: {
              value: "#403B66",
            },
            _hover: {
              backgroundColor: {
                value: "#312D4E",
              },
            },
          },
          _active: { backgroundColor: { value: "#312D4E" } },
        },
        tabs: {
          item: {
            _focus: {
              color: {
                value: "#403B66",
              },
            },
            _hover: {
              color: {
                value: "#312D4E",
              },
            },
            _active: {
              color: {
                value: "#403B66",
              },
            },
          },
        },
      },
    },
  };
  return (
    <ThemeProvider theme={theme} colorMode={colorMode}>
      <div className="w-full h-full min-h-screen overflow-auto rounded-lg">
        <Authenticator
          components={components}
          formFields={formFields}
          className="w-full h-screen rounded-lg"
        >
          {children}
        </Authenticator>
      </div>
      <div
        className="absolute top-0 left-0 grid items-center justify-center w-full h-screen min-h-screen overflow-hidden -z-50"
        aria-hidden="true"
      >
        <div className="aspect-[1108/632] w-[69.25rem] blur-3xl">
          <div
            className="aspect-[1108/632] w-[85.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
            style={{
              clipPath:
                "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
            }}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}

Console log output

No response

Additional information and screenshots

No response

[reesscot]

Hi @nfluk,
It looks like your tailwind CSS is overriding the Amplify UI CSS button styling:

Can you try importing your tailwind CSS file before the Amplify CSS file to make sure that amplify button CSS takes priority?

[reesscot]

@nfluk Another option would be to put tailwind into CSS Layers depending on the browsers you're trying to support:
https://stackblitz.com/edit/stackblitz-starters-62ragp?file=app%2Fglobals.css

[nfluk]

@reesscot Thanks.

We already did import the tailwind css first, so after we double checked that that was the case we tried the second option.

The layering option removed all the tailwind styling for us. But if we kept the imports you linked with some minor edits and without the layer specificity we could get the same result in localhost as when deployed. So we went with that and syled the amplify-button--primary with !important to override it's styling and that seems to have worked.

@import "tailwindcss/components";
@import "@aws-amplify/ui-react/styles.css";
@import "tailwindcss/utilities";

.amplify-button--primary {
  background-color: #403b66 !important;
}