Merge pull request #2929 from Shopify/fix/basename-authentication-loop

[shopify-app-react-router][patch] Fix authentication loop for apps with React Router basename

Author: lizkenyon

.changeset/old-ideas-learn.md

@@ -0,0 +1,5 @@
+---
+'@shopify/shopify-app-react-router': patch
+---
+
+Resolve bug loading embedded app in POS when using React Router basename

packages/apps/shopify-app-react-router/src/server/authenticate/admin/__tests__/doc-request-path.test.ts

@@ -50,6 +50,29 @@ describe('authorize.admin doc request path', () => {
       expect(response.status).toBe(500);
     });
 
+    it('throws an error if the request URL is the login path with basename', async () => {
+      // GIVEN
+      // Simulates an app with React Router basename="/base-path"
+      // When navigating to the login route, the URL becomes /base-path/auth/login
+      const shopify = shopifyApp(testConfig({authPathPrefix: '/auth'}));
+      const request = new Request(`${APP_URL}/base-path/auth/login`);
+
+      // WHEN
+      const response = await getThrownResponse(
+        shopify.authenticate.admin,
+        request,
+      );
+
+      // THEN
+      // SHOULD throw 500 error with helpful message
+      expect(response.status).toBe(500);
+      const errorMessage = await response.text();
+      expect(errorMessage).toContain(
+        'Detected call to shopify.authenticate.admin() from configured login path',
+      );
+      expect(errorMessage).toContain('/auth/login');
+    });
+
     it('redirects to the bounce page URL if id_token search param is missing', async () => {
       // GIVEN
       const shopify = shopifyApp(testConfig());

packages/apps/shopify-app-react-router/src/server/authenticate/admin/__tests__/patch-session-token-path.test.ts

@@ -55,4 +55,33 @@ describe('authorize.admin path session token path', () => {
       `<script data-api-key="${config.apiKey}" src="${APP_BRIDGE_URL}"></script>`,
     );
   });
+
+  test('Uses AppBridge to get a session token when URL includes a basename before authPathPrefix', async () => {
+    // GIVEN
+    // Simulates an app deployed with React Router basename="/base-path"
+    // When React Router redirects to "/auth/session-token", the browser URL becomes "/base-path/auth/session-token"
+    const authPathPrefix = '/auth';
+    const config = testConfig({authPathPrefix});
+    const shopify = shopifyApp(config);
+
+    // WHEN
+    // This is the URL that the browser actually requests after React Router processes the redirect
+    // The pathname includes the basename (/base-path) + the auth path (/auth/session-token)
+    const url = `${APP_URL}/base-path/auth/session-token?shop=${TEST_SHOP}`;
+    const response = await getThrownResponse(
+      shopify.authenticate.admin,
+      new Request(url),
+    );
+
+    // THEN
+    // Should render the bounce page (AppBridge script) even though pathname doesn't exactly match config.auth.patchSessionTokenPath
+    expect(response.status).toBe(200);
+    expectDocumentRequestHeaders(response, config.isEmbeddedApp);
+    expect(response.headers.get('content-type')).toBe(
+      'text/html;charset=utf-8',
+    );
+    expect((await response.text()).trim()).toBe(
+      `<script data-api-key="${config.apiKey}" src="${APP_BRIDGE_URL}"></script>`,
+    );
+  });
 });

packages/apps/shopify-app-react-router/src/server/authenticate/admin/authenticate.ts

@@ -58,7 +58,7 @@ export function authStrategyFactory<ConfigArg extends AppConfigArg>({
   async function respondToBouncePageRequest(request: Request) {
     const url = new URL(request.url);
 
-    if (url.pathname === config.auth.patchSessionTokenPath) {
+    if (url.pathname.endsWith(config.auth.patchSessionTokenPath)) {
       logger.debug('Rendering bounce page', {
         shop: getShopFromRequest(request),
       });
@@ -69,7 +69,7 @@ export function authStrategyFactory<ConfigArg extends AppConfigArg>({
   async function respondToExitIframeRequest(request: Request) {
     const url = new URL(request.url);
 
-    if (url.pathname === config.auth.exitIframePath) {
+    if (url.pathname.endsWith(config.auth.exitIframePath)) {
       const destination = url.searchParams.get('exitIframe')!;
 
       logger.debug('Rendering exit iframe page', {

packages/apps/shopify-app-react-router/src/server/authenticate/admin/helpers/validate-shop-and-host-params.ts

@@ -33,7 +33,7 @@ function redirectToLoginPath(request: Request, params: BasicParams): never {
   const {config, logger} = params;
 
   const {pathname} = new URL(request.url);
-  if (pathname === config.auth.loginPath) {
+  if (pathname.endsWith(config.auth.loginPath)) {
     const message =
       `Detected call to shopify.authenticate.admin() from configured login path ` +
       `('${config.auth.loginPath}'), please make sure to call shopify.login() from that route instead.`;