Search code examples
authenticationnext.jsaws-amplify

AWS Amplify Sign in button not visible when deployed but visible in localhost - nextJS 14

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

enter image description here

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.

enter image description here

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

enter image description here

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 default 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>
  );
}

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 default styling to be in effect when deployed (as in localhost). Or at least get the button to be visible.

Solution

  • I was able to solve this problem by first adding the following to my globals.css file:

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

    That let me reproduce what I got on the deployed site on localhost (saving time when testing stuff by getting instant feedback).

    Then the way to override the styling issue I had to add an !important tag to the specific aws button class.

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

    This fixed the issue although it made the code harder to maintain with the !important addition.