[Bug]: useNavigate function does not work inside event listener (application is called within iframe)

[melihcoban]

What version of React Router are you using?

6.26.2

Steps to Reproduce

1. Have two React applications A and B.
2. Call B inside A with an IFrame src. S
3. Send a frame.contentWindow.postMessage() to B.
4. Listen to message with window.addEventListener('message', callback) in B and call navigate inside callback function.

Expected Behavior

I expect route to change as the function is called.

Actual Behavior

Application I am embedding inside uses React-Router-Dom 6.26.2 with an BrowserRouter.

This is how I use the navigate function

  useEffect(() => {
    const handleEvent = (event: MessageEvent<any>) => {
      if (event.origin !== 'http://localhost:3000') return;

      const authResponse = auth.authenticateThirdParty(
        event.data.thirdPartyToken,
        event.data.userId
      );

      if (!authResponse) {
        return;
      }

      console.log('navigate', routes.dashboard);

      navigate(routes.dashboard);
    };

    window.addEventListener('message', handleEvent, false);

    return () => {
      window.removeEventListener('message', handleEvent);
    };
  }, []);

I can see the console message "navigate /dashboard" inside developer tools. However, page does not change. First I thought about it was a problem with IFrame, however, this function inside a button click correctly navigates the page.

  const handleLoginClick = async (e: React.MouseEvent) => {
    e.preventDefault();

    form.validate();

    if (!form.isValid()) return;

    const authResponse = await auth.authenticateUser(form.values);

    if (!authResponse) {
      return;
    }

    navigate(routes.dashboard);
  };

I fixed the navigation problem with using return <Navigate to={routes.dashobard}/> and holding additional state for the if clause, but I am wondering why navigate function does not route inside the handler. Thanks for the help.

[timdorr]

Do you get any error on the console when this happens? My guess is security things around navigation event in a non-interaction context (a message that doesn't necessarily come from a click vs. the form handler is definitely from user input).

[joseph0926]

      const authResponse = auth.authenticateThirdParty(
        event.data.thirdPartyToken,
        event.data.userId
      );

      if (!authResponse) {
        return;
      }

I don't know the details of the logic behind auth.authenticateThirdParty, but if this is async logic, wouldn't it cause navigate to run before authentication is complete, preventing the intended behavior?

[github-actions]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂