How setup credentials like cookie, certificate into Typescript clients

[ChristopheNewbie]

Hello,

Our team is brand new using Kiota. We generated Typescript clients.

We want to send cookies with our request. How can we set it up ? Or is it an other way ?

Using HttpClient, you just define it like that :

const value = this.http.post<any>('API_POST_CALL', {}, {
				headers: headers,
				withCredentials: true
			})

Thank you for the help 👍

[baywet]

Thanks for using kiota and for reaching out.
Do you need to set the cookies for a single request? or for all the requests you're sending from the client?

[ChristopheNewbie]

I need for all requests.

We have anonymous user speaking with our .NET API. We use session and state management in ASP.NET Core to keep informations about the user. The cookie is needed to get the right session of the user. We need it into each request.

But it will interest me too see how it will work with a single request.

Thank you @baywet

[ChristopheNewbie]

@baywet ? Someone else ?

Can I provide more informations ? Is something not clear ?

[andrueastman]

@ChristopheNewbie

I believe Cookies are sent as headers. Once you generate your client, you should simply be able to do something like this by passing a configuration object with the header values set.

const metrics = await client.metrics.get({
    headers : {
        "Cookie": "cookieValue"
    }
});

[ChristopheNewbie]

Hello,

HttpClient give us the possibility to set UseCredentials and add automatically the cookies in the header. It's a standard functionality.
Doesn't Kiota implement this possibility?

It makes no sense to do it manually foreach request.

Same question with XSRF token ? When I use HttpClient, the xrsf-token in header was add automatically.

[baywet]

Thanks for the additional information. I want to clear out some potential confusion here. In both your original question and answers you mention TypeScript and HttpClient. HttpClient is the client for dotnet applications (used by kiota dotnet clients), TypeScript/JavaScript applications use fetch (and kiota TypeScript clients use it as well). Fetch supports sending cookies along with the request automatically if the request is going to the same origin.
Can you confirm the domain of the JavaScript application and of the API?

[ichbinsteffen]

Hi @baywet
I'm a colleague from @ChristopheNewbie.

Today in our team a discussion regarding using kiota reignited our interest in solving the problem we had.
One colleague of ours wants to integrate kiota for client generation too (in a different application), so we told him about the issue we are facing.
So let me start by explaining how our application is set up.

We have a ASP.NET (dotnet 8) REST API for which we create the client using kiota. We have an Angular UI that we build into the wwwroot folder of said REST API, from here we serve it using ".UseSpaStaticFiles". So this is the Angular app that needs to use the generated client.
Therefore the UI and the API live in the same domain.

In the Angular app what we were having a problem with, was that the generated client had no parameter named "withCredentials".
In our TypeScript code we used this parameter and it magically appended the XSRF Token Cookie to the request headers.
Adding a header manually is not complicated so we tried to do it manually and expected the API to validate the request as usual. But that is not what happened. We cannot recall exactly how the API responded, but it seemed like there was something additional happening that the generated client just doesn't do. IIRC in the fetch client the way you would achieve that is by "credentials": "include". We also tried to do our requests using fetch with this parameter but it also didn't work.
We will now try again so we can tell how the API responded, maybe we'll also find the place where the client uses fetch.

[baywet]

Thank you for the additional information.

I haven't used Angular in maybe over a decade now, so my knowledge is probably stale at this point. I seem to remember that back then it was heavy on services, injection and layering things up.

My guess is that "magic" token cookie insertion is being injected by some kind of middleware pipeline over fetch. And that's fine, if you can "grab" that fetch instance (with its middleware pipeline setup) and pass it to the kiota client factory, you'll then be able to pass this to the request adapter, and the request adapter to the generated client.

Let us know if you have any additional comments or questions.

[ctjhoa]

For the record, I managed to make it work based on #4712 (reply in thread)

Here is a complete example:

import { AnonymousAuthenticationProvider } from '@microsoft/kiota-abstractions';
import { FetchRequestAdapter, KiotaClientFactory } from '@microsoft/kiota-http-fetchlibrary';

import { createClient } from './generated/client.js';

// API requires no authentication, so use the anonymous
// authentication provider
const authProvider = new AnonymousAuthenticationProvider();

// Define a custom fetch function to set the 'credentials' option.
// This function wraps the global fetch, but adds our required option.
const customFetch = (url: Parameters<typeof fetch>[0], init?: RequestInit) => fetch(url, {
  ...init,
  credentials: 'include', // 'include' tells the browser to send cookies
});

const httpClient = KiotaClientFactory.create(customFetch);
const adapter = new FetchRequestAdapter(authProvider, undefined, undefined, httpClient);
adapter.baseUrl = 'http://localhost:3000';
export const client = createClient(adapter);