Issues with interceptors in Next.js

[programm-ingovals]

I'm guessing this is a setup issue.

I have a monorepo. Most of the projects in the monorepo will be using 1 or 2 API's we have access to. Some of them will use APIKEY as auth, others will use OAUTH/OpenID. So the apis have correct OpenAPI config for those.

Hey API seems to only support one Auth method through the SDK.

So for the projects with APIKEY I will have to use an interceptor.

Note that there is a single JIT project, separate from the Nextjs files inside the PNPM Workpsaces monorepo for the generated code from Hey API. It will be reused by all the nextjs projects.

Problem is where to initialize this interceptor. I have tried to set the interceptor via instrumentation.ts and in rootlayout.tsx but it seems I'm not getting the same instance of the client. At least when I run a call from a SDK method no interceptor is present.

They are running inside server actions so they might be a part of the problem.

if I add the interceptor inside the RunTimePathConfig file it only works after the first call is made.

We really need a way to use multiple Auth methods, and add Interceptors in a consistent manner.

[dosubot[bot]]

The Hey API SDK client instance is initialized in a generated file (like client.gen.ts), and you should configure it via a custom runtimeConfigPath file that exports a createClientConfig() function. This ensures the config (including interceptors) is set before the client is used in both server and client environments, which is especially important in Next.js server actions where module scope and instance sharing can be tricky [source].

If you add interceptors in files like instrumentation.ts or rootlayout.tsx, you might not be affecting the actual client instance used in server actions, since each server action can get a fresh module context. Instead, add your interceptor in the createClientConfig() function referenced by runtimeConfigPath. This guarantees the interceptor is registered before any API call, regardless of where the client is used.

For multiple auth methods, the SDK supports an auth function in the config. You can use this to dynamically return the correct token based on the request or context. If you need to add custom headers (like APIKEY), you can use a request interceptor in createClientConfig() to set the header as needed [source].

If you need different auth/interceptor setups per project or per request, use createClient() to make custom client instances and pass them to SDK functions. This avoids global singleton issues and lets you control config on a per-use basis [source].

Example for createClientConfig() with an interceptor:

import type { CreateClientConfig } from './client/client.gen';

export const createClientConfig: CreateClientConfig = (config) => {
  // Add a request interceptor for APIKEY
  config.interceptors?.request.use((request) => {
    request.headers.set('x-api-key', process.env.API_KEY!);
    return request;
  });
  // Set up dynamic auth if needed
  return {
    ...config,
    auth: (authType) => {
      if (authType === 'oauth') return process.env.OAUTH_TOKEN!;
      if (authType === 'apikey') return process.env.API_KEY!;
      return '';
    },
  };
};

This approach ensures interceptors and auth are consistently applied, even in server actions and across monorepo projects. If you need per-request logic, create a new client instance with createClient() and pass it to the SDK call.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}