Link does not maintain a JWT session

[asacarter]

Summary

From the documentation here, to maintain a session either @remix-run/react or @shopify/polaris can be used.

The Link component from @remix-run/react works perfectly, while the Link component from @shopify/polaris does not add the token to the header in the request.

I have created my own Remix app boilerplate rather than one created by Shopify. I'm not sure if this is something to do with the issue but I would expect both Link components to work in the same way.

Expected behavior

The JWT should be added to the header of the Link request.

This is the headers for the request using the Link component from @remix-run/react

headers: {
  accept: '*/*',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-GB',
  authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczpcL1wvcmV2aWV3cy1wbHVzLm15c2hvcGlmeS5jb21cL2FkbWluIiwiZGVzdCI6Imh0dHBzOlwvXC9yZXZpZXdzLXBsdXMubXlzaG9waWZ5LmNvbSIsImF1ZCI6ImFhYjZkOWVhYTg1NzA5M2YzZDAxNjYzZDZjOGQ5ODE0Iiwic3ViIjoiNjEzNzc2MDk4NzkiLCJleHAiOjE3MDkwNDk1NTgsIm5iZiI6MTcwOTA0OTQ5OCwiaWF0IjoxNzA5MDQ5NDk4LCJqdGkiOiJhZTUyMzIxMi01MzFmLTQ3ODEtOWVjOC05NWE5ODVjMmVmYzgiLCJzaWQiOiJlNjZhMzNjMC02ZTQwLTQ1N2ItYWM1NC0wZjVhZmEwNjVkODMiLCJzaWciOiI3NmU1NjhlYzU4ZWQ1ZDgyMGQ4NTk2MmUwOTQ0OTAwZDgxNTdmMzFlZmJmZWU4OWVlMjllYTcwNDhkZWIyZGNjIn0.2UwnBG-cUORuj792kpo63m_5ecvBTUG3HBEs_r7nypQ',
  host: '3307-2a0c-b381-562-3800-c156-8a08-a6c8-8906.ngrok-free.app',
  referer: 'https://3307-2a0c-b381-562-3800-c156-8a08-a6c8-8906.ngrok-free.app/sessions',
  'sec-ch-ua': '"Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121"',
  'sec-ch-ua-mobile': '?0',
  'sec-ch-ua-platform': '"macOS"',
  'sec-fetch-dest': 'empty',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'same-origin',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36',
  'x-forwarded-for': '2a0c:b381:562:3800:c156:8a08:a6c8:8906',
  'x-forwarded-host': '3307-2a0c-b381-562-3800-c156-8a08-a6c8-8906.ngrok-free.app',
  'x-forwarded-proto': 'https'
}

Actual behavior

This is the headers for the request using the Link component from @shopify/polaris

The request does not contain the authorization in the headers.

headers: {
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-GB,en-US;q=0.9,en;q=0.8',
  host: '3307-2a0c-b381-562-3800-c156-8a08-a6c8-8906.ngrok-free.app',
  referer: 'https://3307-2a0c-b381-562-3800-c156-8a08-a6c8-8906.ngrok-free.app/sessions',
  'sec-ch-ua': '"Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121"',
  'sec-ch-ua-mobile': '?0',
  'sec-ch-ua-platform': '"macOS"',
  'sec-fetch-dest': 'iframe',
  'sec-fetch-mode': 'navigate',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-user': '?1',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36',
  'x-forwarded-for': '2a0c:b381:562:3800:c156:8a08:a6c8:8906',
  'x-forwarded-host': '3307-2a0c-b381-562-3800-c156-8a08-a6c8-8906.ngrok-free.app',
  'x-forwarded-proto': 'https'
}

Steps to reproduce

import { Link } from '@remix-run/react';
import { Link as PolarisLink } from '@shopify/polaris';

This adds the auth header:

<Text variant="bodyMd" fontWeight="bold" as="span">
  <Link to={`/sessions/${client_id}`}>
    <InlineCode>{client_id}</InlineCode>
  </Link>
</Text>

This does not:

<Text variant="bodyMd" fontWeight="bold" as="span">
  <PolarisLink url={`/sessions/${client_id}`} monochrome removeUnderline={true}>
    <InlineCode>{client_id}</InlineCode>
  </PolarisLink>
</Text>

Are you using React components?

Link

Polaris version number

^12.0.0

Browser

Chrome

Device

MacOS

[vzarayskiy]

Same issue with @shopify/polaris 12.19.2.

Button component from @shopify/polaris with prop url doesn't work also.

import { Button } from '@shopify/polaris'

<Button url='/path/to/page'>
  Click to route
</Button>

[github-actions[bot]]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.