Index page is reloading endlessly in a loop in a Zoho Catalyst React application

I encountered a problem with the app I attempted to create using the guide from Catalyst embedded authentication tutorial https://docs.catalyst.zoho.com/en/tutorials/embedded-auth/nodejs/configure-client/. The issue is that once I log in, the home page (UserProfile) attempts to reload and becomes stuck in a loop.

The code which I have used to load the login iFrame provided by Catalyst is :

    <script src="https://static.localzohocdn.com/catalyst/sdk/js/4.2.0/catalystWebSDK.js"> </script>
<script src="/__catalyst/sdk/init.js"> </script>
<script>
  const config = {};
  {
    css_url : "/app/css/embeddediframe.css", 
    service_url : "/app/index.html", 
    is_customize_forgot_password : true, 
    forgot_password_id : "forgotPasswordDivElementId", 
    forgot_password_css_url : "/app/css/forgotPwd.css" 
  } */
  catalyst.auth.signIn("loginDivElementId", config);
</script>

The login_redirect key is the page where the application should be redirected once the user has logged in to the application. Since React is a single-page application, your login_redirect key should point to index.html. Update your login_redirect to index.html in your application and then try.

Also, the Catalyst signIn() SDK method should only be called before the user has logged in, hence, remove the signIn() SDK method in your index.html and have it in one react component. You can render this component to show the login page and do not render this component once the user has logged in to avoid the infinite reload behaviour. You can refer to the tutorial's App.js and Layout.js file code snippet to implement the functionality.