reactjs – How to setup seamless login msal-react using loginRedirect

My goal is to secure React SPA via Azure AD without login buttons

In my App.jsx

  useEffect(() => {

    if (!authenticated) {
      instance
        .loginRedirect({
          ...loginRequest,
          prompt: "create",
        })
        .catch((error) => console.error(error));
    }
  }, []);

Encountered an infinite redirect loop and the image below

Saw this documentation github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/errors.md#browserautherrors and follow the correct one.

Now my app is sometimes redirecting and sometimes not.

My code is here github repo please help