How to redirect to a resource in Shopify Admin

[nboliver-ventureweb]

Using the redirect function returned from authenticate.admin, it does not seem possible to redirect to a resource in the Shopify Admin (outside the embedded app).

Example use case in an action:

export const action = async ({ request, params }: ActionFunctionArgs) => {
  const { admin, redirect } = await authenticate.admin(request);
  ...
  return redirect('shopify://admin/discounts');
});

This example doesn't work, and the current route just reloads. How can this be achieved?

There is another old issue on this topic (#705), but it does not answer the question of redirecting to a resource in the admin, only to an external URL or an app route.

[lizkenyon]

Hi there 👋

I am not able to reproduce your issue. Here was my code

export const action = async ({ request }) => {
  const { admin, redirect } = await authenticate.admin(request);

  return redirect("shopify://admin/discounts");
...

screencast.2025-03-03.09-25-37.mp4

Do you have any remix future flags enabled? Otherwise could you provide minimal repository to reproduce your issue, if you would like us to look any further into this?

[nboliver-ventureweb]

@lizkenyon Thanks for the reply - we don't have future flags enabled, and it appears as though the issue is being caused by the redirect being wrapped in a try/catch block. Without the try/catch, it works as expected. However, once the redirect is added to the try, the following response is being caught, which seems to be triggering the route's loader:

    try {
      return redirect('shopify://admin/discounts');
    } catch (error) {
      return actionErrorResponse(error, 'Failed to delete discount');
    }

Not sure if this could be related, but we have made some customizations to the ErrorBoundary in app.tsx:

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    const { status, statusText, data } = error;
    const message = data?.error || statusText;
    return <ErrorPage status={status} message={message} />;
  } else {
    try {
      // Catch redirect Response thrown by @shopify/shopify-app-remix
      const shopifyError = boundary.error(error);
      return shopifyError;
    } catch (error) {
      const message =
        error instanceof Error ? error.message : 'An unknown error occurred';
      return <ErrorPage status={500} heading="Error" message={message} />;
    }
  }
}

[lizkenyon]

Yes, this is expected behaviour.

This code should work

export const action = async ({ request }: ActionFunctionArgs) => {
  const { admin, redirect } = await authenticate.admin(request);
  try {
    return redirect('shopify://admin/discounts');
  } catch (error) {
    if (error instanceof Response) {
      throw error;
    }
    console.log('failed to redirect', error);
  }

The shopify remix package throws the 401 response, and App Bridge does the redirecting.

I am going to move into our backlog to better document this.

[nboliver-ventureweb]

Thanks, that does the trick. It would be great to have more explicit documentation about customizing the ErrorBoundary. I was able to cobble it together by finding a few old issues relating to it, but it was definitely not clear what the recommended approach was with respect to the customizations the Shopify Remix package makes beyond a standard Remix implementation.

[huykon]

The redierect exported from shopify.authenticate is returning 401 Unauthorized in my action function. Do you have same issue @lizkenyon @nboliver-ventureweb ?

[lizkenyon]

That is correct. The library will throw a 401 response, with special headers. App Bridge will catch this response and redirect to the correct page. This is necessary because of the nature of embedded apps.

That is why you will need to rethrow the response if you are catching it.

 } catch (error) {
    if (error instanceof Response) {
      throw error;
    }

[huykon]

it actually throwing 401 response if I pass 2nd parametter such as {target: '_parent'}. In case I don't pass 2nd parametter of redirect function then it replace the content without url changing on localhost and showing login screen on production

[lizkenyon]

Yes, that is expected. Because the app is embedded in an iframe, different redirect strategies must be taken for different types of redirects. (Redirecting in the same page, opening a window.)

If you would like to learn more about the different redirect strategies in different scenarios. You can find the source code here.

[huykon]

Thank for your responding. Can you point out help me how to redirect with change the url

[lizkenyon]

Could you please create a new issue with steps for reproduction? (First take a look at the documentation for the redirect helper!)

[huykon]

I fixed issue by hide saveBar before the action calling (after click submit data)