Modal Toggle Trigger 401 Unauthorized Error After 1 Minute On The Page

[hamzasgd]

Describe the bug When the shopify.modal.toggle('earnModal') function is triggered after waiting for 1 minute on the page, it results in a 500 internal server error. This error appears in the console and is associated with the same route where the modal is added. The route is automatically triggered upon showing the modal.

https://imgur.com/Mclu9wR

To Reproduce Steps to reproduce the behavior:

Add a modal to a page using the Modal component from @shopify/app-bridge-react. Navigate to the page where the modal is added. Wait for 1 minute on the page without interacting with it. Trigger the modal by executing shopify.modal.toggle('earnModal'). Observe a 500 internal server error in the console related to the route where the modal is added.

Expected behaviour Triggering the modal with shopify.modal.toggle('earnModal') after waiting on the page should not cause any server errors. Instead, the modal should display as expected without any issues or errors in the console.

Contextual information Packages and versions @shopify/app-bridge @ 4.0.0 @shopify/app-bridge-react @ 4.0.0 @shopify/polaris @ 12.0.0

Platform App Template: shopify-app-template-remix Modal Component: Used from @shopify/app-bridge-react Additional context This issue seems to be related to the handling of modal triggers after a specific idle time on the page. It suggests there might be an unhandled exception or a timeout issue within the app bridge or the server setup that is not correctly managing the modal's state or the route's state after a period of inactivity.

[yuvrajharod]

Facing a similar issue on our end, it shows a 500 internal server error on our existing projects and a 401 when tried on a fresh template.

[hamzasgd]

This is a serious issue. When the modal is triggered, it initiates a GET request that returns a 401 error. If you spend 1 minute on the page, you will not be able to display the modal due to the error.

[hamzasgd]

@charlesdobson please look into this thanks

[henrytao-me]

It is fixed. Can you try again and let me know please? Thanks 🙇

[hamzasgd]

@henrytao-me, thank you for your help. The issue has been resolved, but now I'm experiencing some strange behavior. When I'm on the route /app/points and the modal is open, if I redirect to another page by selecting an option from the list in the modal (e.g., /app/earn), I receive a 404 error from app-bridge.js.

If you navigate back to the same screen where the modal is triggered, you will encounter a 404 error again in the network.

If you cancel the modal, another red document will be canceled in the network.

The good news is that the modal is now displaying, but every time you show the modal, a 404 error appears in the console.

[henrytao-me]

@hamzasgd It's hard to follow what happens here. May I have your appId so I can test it on my shop?

[hamzasgd]

@henrytao-me Here is the App ID: 95428575233. Should I upload my app to the server so you can install and test it?

[hamzasgd]

@henrytao-me I will also test this on a new template.