Question 11991 in Shopify Question posted in
The Shopify help center can be found here.

Rails Turbo render_async: add JWT to async requests – Shopify

I am using render_async in a Rails app with turbo-rails and am trying to add a JWT to the render_async request header.

I have the following in my application.rb:

RenderAsync.configure do |config|
  config.turbo = true
end

and here is an example of a call (it’s part of a loop):

<%= render_async customer_activity_path(:customer => customer.id), html_options: { 'data-turbo-track': 'reload' } do %>
        <div class="loader"></div>
        <div class="eventDetails">Loading... </div>
      <% end %>
<%= content_for :render_async %>

I am loading Turbo with this same .js file: https://github.com/kirillplatonov/shopify-hotwire-sample/blob/main/app/javascript/shopify_app/shopify_app.js

And the html wrapper is: https://github.com/kirillplatonov/shopify-hotwire-sample/blob/main/app/views/layouts/embedded_app.html.erb

I have tried adding a 2nd listener turbo:load in addition to turbo:before-fetch-request in shopify_app.js but that didn’t do anything.

I see in Chrome Inspect that the render_async call is handled by Turbo but it comes back as 401 Unauthorized and I can see that the JWT Bearer cert is not in the render_async GET request header. I can also see that the JWT Bearer cert is in the standard GET request for loading the page containing the render_async call loop.

I would appreciate some help on how to add the JWT Bearer certificate to the http get header of the render_async calls with Turbo.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've switched from using render_async to Turbo Frames so that I can incrementally load a large amount of data onto website page with a JWT included in the headers of each Turbo Frame request.


  2. 0 
       document.addEventListener("turbo:before-fetch-request", function (event) {
    event.preventDefault();
    event.detail.fetchOptions.headers["Authorization"] =  "Bearer " + window.sessionToken;
    event.detail.resume();
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search