Adding authorization info

[Isaac-Leonard]

I'm currently trying to use this for a project I'm working on and can't seem to add authorisation information to requests.
The generated types ignores the security scheme information in the openapi document and manually trying to wrap the RequestFn seems error prone, particularly as the headers on RequestInfo are marked as readonly so I'm not sure if I should be modifying them.
Is there a best way to achive adding headers to requests or even better, proper authorisation management?
If it's not currently possible would this be worth adding?
I'm happy to make a PR with some guidance.

[Isaac-Leonard]

So I've tried to wrap the existing RequestFn when creating my client however it seems that passing my own headers in isn't working, it seems as though they're just being ignored.

[radist2s]

@Isaac-Leonard, It's really great that you're trying out authorization through Qraft. However, I'm afraid without a OpenAPI Document, I can't pinpoint what the problem is. Could you please attach a path of the Document?

Perhaps the example at the link will reveal a bit about how authorization works: Pet Store authentication example.

However, your comment has opened my eyes to the fact that the documentation really lacks a simple example of a custom requestFn that could contain a predefined set of headers. In one of my projects, I use a generic function for different runtime environments.

/**
 * 🌐 createSecureRequestFn.ts
 **/ 

import {
  HeadersOptions,
  OperationSchema,
  RequestFnInfo,
  RequestFnOptions,
  RequestFnResponse,
  mergeHeaders,
  requestFn,
} from '@openapi-qraft/react';
import type { IncomingHttpHeaders } from 'http';

export function createSecureRequestFn(
  headers: string | undefined | null | HeadersOptions | IncomingHttpHeaders
) {
  return function secureRequestFn<TData, TError>(
    schema: OperationSchema,
    requestInfo: RequestFnInfo,
    options?: RequestFnOptions
  ): Promise<RequestFnResponse<TData, TError>> {
    return requestFn(
      schema,
      typeof headers === 'string'
        ? {
            ...requestInfo,
            headers: mergeHeaders(requestInfo.headers, {
              Authorization: `Bearer ${headers}`,
            }),
          }
        : headers && typeof headers === 'object'
        ? { ...requestInfo, headers: mergeHeaders(requestInfo.headers, headers as HeadersOptions) }
        : requestInfo,
      options
    );
  };
}

/**
 *💡 Usage
 **/

// • Bearer Token
const secureBearerApiClient = createAPIClient({
  requestFn: createSecureRequestFn('MY_BEARER_TOKEN'),
  queryClient,
  baseUrl,
});

// • Custom headers
const secureApiClient = createAPIClient({
  requestFn: createSecureRequestFn({ Authorization: 'KEY', 'x-custom-header': 'true' }),
  queryClient,
  baseUrl,
});

[Isaac-Leonard]

Here's a link to my openapi schema: https://github.com/Isaac-Leonard/space-game/blob/main/docs.json
I believe the security info is set up correctly though I may have missed something.
I'll try integrating the example you linked and see how I go though it still wasn't fully clear to me what to do.
My generated code doesn't have my security scheme in it though the services types do have it referenced still.
If I can't get anywhere with your example I'm sure I can use the custom requestFn code you posted.
Thank you

[radist2s]

@Isaac-Leonard, sorry for the long reply.
Unfortunately, the library for generating TS from OpenAPI that is used under the hood does not generate types for Security Schemes. However, Qraft will store this information for executing authorized requests.

For example:

getAdminSpacecrafts: {
    schema: {
        method: "get";
        url: "/api/admin/spacecrafts";
        security: [
            "bearer_token" // ⬅︎
        ];
    };
};

Qraft does not provide typing for specific Security Schemes, it is taken by <QraftSecureRequestFn />.

<QraftSecureRequestFn
      requestFn={requestFn}
      securitySchemes={{
        // Can be sync or async
        // The value from the function will be used by all endpoints that require `bearer_token` for authentication.
        bearer_token() {
          return 'MY TOKEN'; // Qraft will also independently invlidate the token (re-execute the function) when the time comes.
        },
      }}
    >
{
  {(secureRequestFn) => (<SomeComponent secureRequestFn={secureRequestFn} />)
}
</QraftSecureRequestFn>

For more details on using QraftSecureRequestFn see the documentation.