Expose "fetchInit" in RpcOptions to allow sending credentials

[frederikhors]

I'm using /~https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md#grpc-web-transport but I don't know if there is a way to send credentials like in a classic web client:

initClient({
  baseUrl: "localhost:3000",
  fetchOptions: { credentials: "include" },
});

Is it possible or am I totally wrong?

[frederikhors]

My grpc-web server doesn't get cookies.

[frederikhors]

I think we have some useful hints about this problem: /~https://github.com/improbable-eng/grpc-web/blob/master/client/grpc-web/docs/transport.md.

[timostamm]

Why not send credentials / token in a header?

rpc-options take metadata, which translate to HTTP headers.

For example:

protobuf-ts/packages/example-chat-system/browser-client/index.ts

Lines 64 to 70 in a2c34ba

	chatPanel.postCallback = async (text) => {
	try {
	await client.post({
	message: text
	}, {
	meta: {'x-token': headers['x-token']},
	})

Note that CORS applies across domains.

Adding something like "fetchOptions" should be pretty straight-forward to add to the grpc-web and twirp transports.

[frederikhors]

Because we are using cookies not readable in browser with Javascript: HTTP-ONLY.

[timostamm]

A valid point...

Yes, this should work like improbable-eng.

The following property should be added to twirp-options.ts and grpc-web-options.ts:

    /**
     * Pass options to fetch API calls. 
     */
    fetchInit?: Exclude<RequestInit, "body" | "headers" | "method" | "signal">;

And passed to all fetch calls.

I'm a bit swamped right now. Do you want to open a PR?

[frederikhors]

Do you want to open a PR?

I am not able to. 🤣

[frederikhors]

What a pity! This blocks all the plans I had with this library, at least for now.

Do you have a temporary workaround?

[timostamm]

I am not able to. 🤣

Just click fork in the top right, check out your fork and do the changes.

Do you have a temporary workaround?

I'd just copy grpc-web-transport.ts into my project and add the necessary properties to the fetch calls. Maybe you have to copy another file over and add a tsconfig for some settings, but it shouldn't be too difficult.

[frederikhors]

do the changes

This is what I am not able to do. 🤣

[timostamm]

Then just copy grpc-web-transport.ts There are only 2 places where fetch() is called

        globalThis.fetch(url, {
            method: 'POST',
            headers: createGrpcWebRequestHeader(new globalThis.Headers(), format, opt.deadline, opt.meta),
            body: createGrpcWebRequestBody(inputBytes, format),
            signal: options.abort ?? null, // node-fetch@3.0.0-beta.9 rejects `undefined`
            credentials: 'include'
//          ^^^^^^^^^^^^^^^^^^^^^^
// add this. or maybe 'same-origin', depending on what you need.
        })

[frederikhors]

@timostamm Yeah, I'm hacking around like this... Thanks!