Function FakeLoginForm

apps/web/src/components/auth/FakeLoginForm.tsx:12–159

({ searchParams }: FakeSignInButtonProps)

};

export function FakeLoginForm({ searchParams }: FakeSignInButtonProps) {
  const fakeUserEmail = searchParams?.fakeUser as string | undefined;
  const [email, setEmail] = useState(fakeUserEmail || '');
  const [isLoading, setIsLoading] = useState(false);
  const [isVisible, setIsVisible] = useState(true);
  const [stytchBehavior, setStytchBehavior] = useState<'default' | 'pass' | 'fail'>('default');
  const callbackUrl = getSignInCallbackUrl(searchParams);
  // Track if auto-submit has been triggered to prevent double submission in React Strict Mode
  const hasAutoSubmitted = useRef(false);

  const handleStytchBehaviorChange = useCallback((behavior: 'default' | 'pass' | 'fail') => {
    setStytchBehavior(behavior);
  }, []);

  const handleSubmit = useCallback(
    async (e?: React.FormEvent) => {
      if (e) e.preventDefault();
      if (!email.trim()) return;

      // Modify email based on selected Stytch behavior.
      // The backend handler will look for these in the email address.
      let submissionEmail = email.trim();
      if (stytchBehavior === 'pass') {
        submissionEmail = submissionEmail.replace('@', '+stytchpass@');
      } else if (stytchBehavior === 'fail') {
        submissionEmail = submissionEmail.replace('@', '+stytchfail@');
      }

      setIsLoading(true);
      try {
        await signIn('fake-login', {
          email: submissionEmail,
          callbackUrl,
        });
      } catch (error) {
        console.error('Fake login error:', error);
      } finally {
        setIsLoading(false);
      }
    },
    [email, callbackUrl, stytchBehavior]
  );

  // Auto-submit if fakeUser is provided in search params
  // Use ref to prevent double submission in React Strict Mode
  useEffect(() => {
    if (fakeUserEmail && fakeUserEmail.trim() && !hasAutoSubmitted.current) {
      hasAutoSubmitted.current = true;
      void handleSubmit();
    }
  }, [fakeUserEmail, handleSubmit]);

  if (!isVisible) {
    return null;
  }

  return (
    <div className="fixed bottom-6 left-6 w-80 overflow-visible rounded-lg border border-amber-600/50 bg-gray-900 p-4 shadow-lg">