Function AuthModal

packages/shared/src/components/auth/AuthModal.tsx:23–116

({
  className,
  trigger,
  onRequestClose,
  ...props
}: AuthModalProps)

}

export default function AuthModal({
  className,
  trigger,
  onRequestClose,
  ...props
}: AuthModalProps): ReactElement {
  const { logEvent } = useLogContext();
  const [screenValue, setScreenValue] = useState<Display>(Display.Default);
  const { user, closeLogin, logout, loginState } = useAuthContext();

  const onClose: CloseAuthModalFunc = (e) => {
    logEvent({
      event_name: AuthEventNames.CloseSignUp,
      extra: JSON.stringify({ trigger, screenValue }),
    });
    onRequestClose?.(e as React.MouseEvent);
  };

  const closeAndLogout: CloseAuthModalFunc = (e) => {
    if (user && !user.username) {
      logout(LogoutReason.IncomleteOnboarding);
    }
    onClose(e);
  };

  const { onContainerChange, formRef, onDiscardAttempt } = useAuthForms({
    onDiscard: closeAndLogout,
  });

  const onSuccessfulLogin = () => {
    loginState?.onLoginSuccess?.();
    closeLogin();
  };

  const onSuccessfulRegistration = (
    newUser?: LoggedUser | AnonymousUser,
  ): void => {
    loginState?.onRegistrationSuccess?.(newUser);
    closeLogin();
  };

  const getDefaultDisplay = (): Display => {
    if (loginState?.defaultDisplay) {
      return loginState.defaultDisplay;
    }
    if (loginState?.formValues?.email) {
      return Display.Registration;
    }
    // Always land on AuthDefault; `isLoginFlow` (tracked locally below)
    // decides whether it renders as Sign up or Log in. We deliberately do
    // NOT use OnboardingSignup here — that variant lives on /onboarding and
    // the bottom AuthenticationBanner; the inline modal should reuse the
    // same screen the rest of the app already shows for login/signup.
    return Display.Default;
  };
  const defaultDisplay = getDefaultDisplay();

  // `AuthOptionsInner` doesn't own `isLoginFlow` — it expects the parent to