New tab open from embedded app can't authticate

Authentication & Access
1

Hi, I making a printable version of a page in my app, so I make a button for printing that will open a new tab in browser to show a printable page, but it always directed to the login page, and I don’t know how to get it the authentication. The app is working fine inside admin.

2

Can you share the code you’re currently using to open a new tab?

Also, can you share which version of AppBridge your app currently uses?

The answer really depends on those two things.

3

Hello,

I’m having an issue with my Shopify Remix app. I have a button that opens a new tab to a printable version of a page. However, the new tab gets redirected to the Shopify login screen instead of showing my app’s page. I believe it’s an authentication issue because the session context is lost in the new tab.

Navigating within the app’s iframe works fine, but target="_blank" does not.

Here is the simplified code for the relevant pages:

1. The Main Page (app/routes/app.picklist.jsx )

This page has a “Print” button that opens /app/picklist/print in a new tab.

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "../shopify.server";
import { Page, Button } from "@shopify/polaris";
import { PrintIcon } from "@shopify/polaris-icons";

// This loader authenticates the page and fetches data.
// It works correctly when navigating within the app.
export const loader = async ({ request }) => {
  await authenticate.admin(request);
  // ... data fetching logic
  return json({ message: "Page loaded successfully" });
};

export default function PicklistPage() {
  useLoaderData();

  return (
    <Page title="Pick List">
      {/* This button opens the print page in a new tab */}
      <Button url="/app/picklist/print" target="_blank" icon={PrintIcon}>
        Print
      </Button>
      {/* ... page content ... */}
    </Page>
  );
}

2. The Print Page (app/routes/app.picklist.print.jsx )

This is the page that should open in the new tab, but it redirects to the login screen.

import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { Page, Text } from "@shopify/polaris";

// This loader also needs to authenticate the request.
export const loader = async ({ request }) => {
  await authenticate.admin(request);
  // ... data fetching logic for the printable version
  return json({ message: "Print page loaded successfully" });
};

export default function PrintablePicklist() {
  return (
    <Page>
      <Text as="h1">Printable Picklist</Text>
      {/* ... printable content ... */}
    </Page>
  );
}

3. Server Config (vite.config.js )

This is my current Vite configuration. I suspect I need to change something here to make the /app/picklist/print route work correctly when opened directly.

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import shopify from "@shopify/shopify-app-remix/vite";

export default defineConfig({
  plugins: [
    remix(),
    shopify(), // How do I configure this for my print route?
    tsconfigPaths(),
  ],
});

How can I configure my app to handle authentication correctly for a route opened in a new tab?

“@shopify/app-bridge-react”: “^4.1.6”,

Thanks!

4

Hi,

If you perform the redirection in the server side, you can use redirectOutOfApp at end after Auth:

shopify.redirectOutOfApp({ req, res, redirectUri: myExternalUrl, shop: session.shop })

5

Thank you for the suggestion about using redirectOutOfApp. I appreciate you taking the time to help.

My goal is to have a “Print” button on my main page that opens a new browser tab (target="_blank") with a printable version of the picklist at the URL /app/picklist/print.

The redirectOutOfApp function seems to be for server-side redirects inside a loader or action. My action is happening on the client-side when the user clicks the button.

Could you clarify how I would use redirectOutOfApp in this client-side, new-tab scenario? Or is there a different recommended approach for this in the Shopify Remix template?

Thanks again

6

You are welcome, it been a while since i used remix for shopify app dev, i’m using a VueJS template but it roughly the same on the server side.

The redirectOutOfApp function will open your page in the same tab, it’s normally used to access pages outside your app like managed pricing plan page in the same iframe, and if you give a url outside shopify it will open it in the same tab.

If you try to open you link in a new tab, it would be best to trigger the opening yourself with a click event instead of relying on the Button component and use a full path for ‘myUrl’:

window.open(myUrl, '_blank').focus()

Also when you open a route that need auth in a new tab/window it will try to go back to the shopify admin.

Is the purpose of this page app.picklist.print.jsx to print directly or also download a list of PickList ?