Implement oAuth 1.0 in ky

[MiloshN]

Hey team, I want to implement oAuth 1.0 in ky, here is my code(s):

export const wooApiV3 = ky.extend({
  headers: {
    Accept: "application/json",
  },
  hooks: {
    beforeRequest: [
      (request, options) => {
        const extendedOptions = options as ExtendedOptions;
        const url = new URL(request.url, extendedOptions.prefixUrl);
        const existingParams = new URLSearchParams(url.searchParams);
        
        const oauthParams: Record<string, string> = {
          oauth_consumer_key: process.env.CUSTOMER_KEY!,
          oauth_nonce: generateNonce(),
          oauth_signature_method: 'HMAC-SHA1',
          oauth_timestamp: generateTimestamp().toString(),
          oauth_version: '1.0',
        };
        for (const [key, value] of Object.entries(oauthParams)) {
          existingParams.set(key, value);
        }
        const signature = generateOAuthSignature(
          request.method || 'GET',
          url.origin + url.pathname,
          Object.fromEntries(existingParams),
          process.env.CUSTOMER_SECRET!
        );
        existingParams.set('oauth_signature', signature);
        extendedOptions.searchParams = existingParams;
      },
    ]
  },
  prefixUrl: wooPrefixUrl,
});

Helpers function(s):

import CryptoJS from 'crypto-js';

export const generateNonce = (): string => Math.random().toString(36).slice(2, 15);
export const generateTimestamp = (): number => Math.floor(Date.now() / 1000);

export const generateOAuthSignature = (
  method: string,
  url: string,
  params: Record<string, string>,
  consumerSecret: string
): string => {
  const sortedParams = Object.keys(params)
    .sort()
    .map(
      key =>
        `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
    )
    .join('&');
  const baseString = [
    method.toUpperCase(),
    encodeURIComponent(url),
    encodeURIComponent(sortedParams),
  ].join('&');

  const signingKey = `${encodeURIComponent(consumerSecret)}&`;
  const hash = CryptoJS.HmacSHA1(baseString, signingKey);
  return CryptoJS.enc.Base64.stringify(hash);
};

What is the the problem here? Have a nice day!

[sholladay]

What is the problem here?

Is there an error?

[MiloshN]

Nope, the code is 'clean' but the same functionality from Postman is working, but in combination with @tanstack/react-query data is always undefined.

react-query

import { wooApiV3 } from "@/services/instance";
import { productSchema } from "./schema";

export const ProductServices = {
  fetchAll: async () => {
    const response = await wooApiV3.get(`products`).json();
    return productSchema.parse(response);
  },
};

Woo response without oAuth:

{
    "code": "woocommerce_rest_cannot_view",
    "message": "Sorry, you cannot list resources.",
    "data": {
        "status": 401
    }
}

Woo response with oAuth:

[] - array of products, status code 200