Constantly redirected to `//patch_shopify_id_token`

[danielfriis]

Issue summary

Before opening this issue, I have:

• Upgraded to the latest version of the package
  • shopify_app version: 22.5
  • Ruby version: 3.2.2
  • Operating system: macOS
• Set log_level: :debug in my configuration, if applicable
• Found a reliable way to reproduce the problem that indicates it's a problem with the package
• Looked for similar issues in this repository
• Checked that this isn't an issue with a Shopify API
  • If it is, please create a post in the Shopify community forums or report it to Shopify Partner Support

I'm building and embedded app which loads as expected. However, when I navigate in the app, I'm constantly being redirected to:

//patch_shopify_id_token?shopify-reload=<URL>

I have included ShopifyApp::EnsureHasSession in my controller, and I'm setting the Bearer token using app bridge as I navigate to other pages.

Expected behavior

I should be able to navigate to other pages.

Actual behavior

I'm redirected to //patch_shopify_id_token which btw turns out blank.

Debug logs

12:01:13 web.1   | Started GET "/integration" for 85.244.162.79 at 2025-01-10 12:01:13 +0000
12:01:13 web.1   | Cannot render console from 85.244.162.79! Allowed networks: 127.0.0.0/127.255.255.255, ::1
12:01:13 web.1   | Processing by IntegrationController#index as HTML
12:01:13 web.1   | [ ShopifyApp | DEBUG | Shop Not Found ] Responding to invalid Shopify ID token: Missing Shopify ID Token
12:01:13 web.1   | [ ShopifyApp | DEBUG | Shop Not Found ] Redirecting to bounce page for patching Shopify ID token
12:01:13 web.1   | Redirected to https://discrete-open-boa.ngrok-free.app//patch_shopify_id_token?shopify-reload=%2Fintegration%3F
12:01:13 web.1   | Filter chain halted as :set_shop_origin rendered or redirected
12:01:13 web.1   | Completed 302 Found in 35ms (ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.1ms)
12:01:13 web.1   | 
12:01:13 web.1   | 
12:01:13 web.1   | Started GET "//patch_shopify_id_token?shopify-reload=%2Fintegration%3F" for 85.244.162.79 at 2025-01-10 12:01:13 +0000
12:01:13 web.1   | Cannot render console from 85.244.162.79! Allowed networks: 127.0.0.0/127.255.255.255, ::1
12:01:13 web.1   | Processing by ShopifyApp::SessionsController#patch_shopify_id_token as HTML
12:01:13 web.1   |   Parameters: {"shopify-reload"=>"/integration?"}
12:01:13 web.1   |   Rendering layout /Users/danielfriis/.local/share/mise/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/shopify_app-22.5.0/app/views/shopify_app/layouts/app_bridge.html.erb
12:01:13 web.1   |   Rendering /Users/danielfriis/.local/share/mise/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/shopify_app-22.5.0/app/views/shopify_app/sessions/patch_shopify_id_token.html.erb within shopify_app/layouts/app_bridge
12:01:13 web.1   |   Rendered /Users/danielfriis/.local/share/mise/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/shopify_app-22.5.0/app/views/shopify_app/sessions/patch_shopify_id_token.html.erb within shopify_app/layouts/app_bridge (Duration: 0.1ms | GC: 0.0ms)
12:01:13 web.1   |   Rendered layout /Users/danielfriis/.local/share/mise/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/shopify_app-22.5.0/app/views/shopify_app/layouts/app_bridge.html.erb (Duration: 0.5ms | GC: 0.0ms)
12:01:13 web.1   | Completed 200 OK in 33ms (Views: 0.9ms | ActiveRecord: 0.0ms (0 queries, 0 cached) | GC: 0.0ms)
12:01:13 web.1   | 
12:01:13 web.1   | 

And in the web console, I'm getting:
App Bridge Next: missing required configuration fields: shop

[lizkenyon]

Hi there 👋

Are you using the Shopify Rails template? Or building without it?

Would you be able to provide code to reproduce this? I want to ensure we are on the same page.

[uurcank]

Same issue also reported here @lizkenyon

[danielfriis]

I'm setting up an new Rails project to illustrate the issue, but now in a brand-new clean app, I'm getting

Oauth error failed_grant_with_invalid_scopes: The application could not be installed due to invalid scopes requested.

New Rails 8 project, shopify_app gem, running the generator command as described in the documentation.

[danielfriis]

Okay I got past it. Found an issue here on Github that mentions the problem. Apparently you have to add a toml file (and empty package.json) to set access scopes (would be great if you could just do that in the dashboard and not having to rely on the toml file and CLI).

Here's a fresh project that is set up using Rails 8 and shopify_app gem.

https://github.com/danielfriis/shopify_app_test

It is not possible to navigate to /products. Added some js because I saw a mention of the new session token authentication. But still not working.

[lizkenyon]

Yes if you haven't already, I would recommend reviewing this documentation regarding embedded app authentication and authorization. (It is in javascript but a general concepts still apply.)

Your requests will need to have to have a session token (also called ID token) so the app can authenticate the requests from your frontend to your back end.

App Bridge will automatically add these to fetch requests

If your app is doing a document request on navigation then you will need to add the session token yourself.

The .dev community would be a good place to ask these questions as well.

[danielfriis]

Thanks @lizkenyon !

The key was to set the session token myself. Since I'm using vanilla Rails with Turbo, I had to integrate with that.

This is my code:

// Get session token
async function getSessionToken() {
  const SessionToken = window['app-bridge'].actions.SessionToken;
  
  return new Promise((resolve, reject) => {
    window.app.dispatch(SessionToken.request());
    
    // Add timeout to prevent hanging
    const timeoutId = setTimeout(() => {
      reject(new Error('Session token request timed out'));
    }, 5000);
    
    window.app.subscribe(SessionToken.Action.RESPOND, (payload) => {
      clearTimeout(timeoutId);
      resolve(payload.sessionToken);
    });
  });
}

// Set the session token for the request
document.addEventListener("turbo:before-fetch-request", async (event) => {
  console.log("turbo:before-fetch-request");
  try {
    const sessionToken = await getSessionToken();
    event.detail.fetchOptions.headers['Authorization'] = `Bearer ${sessionToken}`;
    console.log("sessionToken", sessionToken);
  } catch (error) {
    console.error('Failed to get session token:', error);
    // Optionally reload the page if token acquisition fails
    window.location.reload();
  }
});

[danielfriis]

And just to add; the constant redirect I experienced was due to how I'd try to implement an example I found which used this url (/patch_shopify_id_token) internally where the AppBridge script would be (I thought it was a Shopify-hosted path).

Since I have the AppScript script on all pages, a separate URL for patching is unnecessary.

[remy727]

@danielfriis, I highly recommend checking Kirill's app template.

[danielfriis]

Thank you @remy727. I did have a look. Sorry for being negative, but it's just seems really complicated for what it is.

I feel that getting an app up and running without any functionality should be super easy — but with Shopify, it's not at all easy. The hardest part of app development for Shopify is to just get it to integrate with the Shopify ecosystem.

You should revamp the app, remove complexity, and just make it super easy to get from 0 to 1.