Add request interceptor

[kirillplatonov]

The problem

The modern server-side embedded Shopify apps are built with JWT session tokens which are obtained on the client-side and then passed to every server request. Turbo works pretty well with it since it allows to navigate application without doing page reloading on every click or page submission. The biggest issue is passing JWT token to every Turbo request.

The solution

This PR introduces request interceptor support. It allows to insert async function between every fetch request. Inside this function you can do some preparation for request and add custom headers.

Example usage

Turbo.setRequestInterceptor(async (request) => {
  const token = await getSessionToken(window.app);
  request.addHeader("Authorization", `Bearer ${token}`);
});

[seanpdoyle]

Could this same seam for modifying headers be achieved with a turbo:before-fetch-request event listener?

addEventListener("turbo:before-fetch-request", ({ detail: { fetchOptions }) => fetchOptions.headers["..."] = "..."))

[kirillplatonov]

Changing headers with turbo:before-fetch-request event listener will work fine for the simpler case when you need to add some static header to Turbo requests. Unfortunately, with Shopify embedded apps you need to retrieve the JWT token before every request because the token lifetime is short and we don't know exactly when it's expired inside the Turbo app. JWT token retrieval is async and we need to pause Turbo's fetch request invocation until it's done. So async interceptor works best for this complex case. I used Axios interceptors as an inspiration for this approach.

[lonroth]

@kirillplatonov Nice work on this PR! Great that we won't need to fetch JWT every x seconds with your setRequestInterceptor solution and rather ask for them just when we need them. 👍

[kirillplatonov]

Until it's merged I published my fork to npm:

yarn add turbo-edge
import * as Turbo from "turbo-edge"

yarn add turbo-rails-edge
import { Turbo } from "turbo-rails-edge"

[dhh]

Great stuff @kirillplatonov. Could you add some documentation for this on https://turbo.hotwire.dev/reference/drive? It's in the turbo-site repo. Thanks!

[dhh]

Could we not set this like we do progressBarDelay? Where it's set on the session, not as a singleton.

[marcelolx]

I think here in Turbo it would be completely possible

[kirillplatonov]

I was trying to put it in session initially. But we use interceptor in FetchRequest class where we don't have an access to the session. Add fetching session from delegates not worked as well since not all delegates have access to the session. That's why I end up using a singleton. Seems like the cleanest solution available.

[kirillplatonov]

Great stuff @kirillplatonov. Could you add some documentation for this on https://turbo.hotwire.dev/reference/drive? It's in the turbo-site repo. Thanks!

Added documentation here: hotwired/turbo-site#53

[awd]

Thanks for getting this through @kirillplatonov @dhh - useful for JWT / Shopify apps!

[dhh]

@kirillplatonov Upon further reflection, I think it might be worth exploring an approach similar to #28 (comment). Which basically let's the turbo:before-fetch-request pause the request. Then we could do it all in a callback instead.

[kirillplatonov]

@dhh having the same pausable API for both turbo:before-render and turbo:before-fetch-request would be great. I will explore this.