Kinde•2mo ago

Kinde + ParaglideJS in SvelteKit

Hi everyone! I wish to integrate Kinde into my SvelteKit app, which uses ParaglideJS V2 for internationalization. This means I already have code in my hooks.server.ts: import type { Handle } from '@sveltejs/kit'; import { paraglideMiddleware } from '$lib/paraglide/server'; import {sessionHooks, type Handler} from '@kinde-oss/kinde-auth-sveltekit'; // creating a handle to use the kinde middleware const kindeHandle: Handler = async ({event, resolve}) => { sessionHooks({event}); const response = await resolve(event); return response; }; // creating a handle to use the paraglide middleware const paraglideHandle: Handle = ({ event, resolve }) => paraglideMiddleware(event.request, ({ locale }) => { return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', locale) }); }); export const handle: Handler = kindeHandle; // ToDo combone with paraglideHandle As you can see paraglide and kinde use wo different kind of Handlers / Handle. Do you have any tipp for me on how to combine these two? Thank you! - Paul

9 Replies

Claire Mahoney•2mo ago

Hi Paul, Thanks for your question. You can try to use SvelteKit’s built‑in sequence helper function from @sveltejs/kit/hooks. This helper lets you chain multiple handle functions so that both middlewares are applied for every request. For example, you can modify your hooks.server.ts like this:

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { paraglideMiddleware } from '$lib/paraglide/server';
import { sessionHooks, type Handler } from '@kinde-oss/kinde-auth-sveltekit';

// Kinde middleware handle
const kindeHandle: Handler = async ({ event, resolve }) => {
    sessionHooks({ event });
    return await resolve(event);
};

// Paraglide middleware handle
const paraglideHandle: Handle = ({ event, resolve }) =>
    paraglideMiddleware(event.request, ({ locale }) => {
        return resolve(event, {
            transformPageChunk: ({ html }) => html.replace('%lang%', locale)
        });
    });

// Combine both middleware functions using sequence
export const handle: Handler = sequence(kindeHandle, paraglideHandle);

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { paraglideMiddleware } from '$lib/paraglide/server';
import { sessionHooks, type Handler } from '@kinde-oss/kinde-auth-sveltekit';

// Kinde middleware handle
const kindeHandle: Handler = async ({ event, resolve }) => {
    sessionHooks({ event });
    return await resolve(event);
};

// Paraglide middleware handle
const paraglideHandle: Handle = ({ event, resolve }) =>
    paraglideMiddleware(event.request, ({ locale }) => {
        return resolve(event, {
            transformPageChunk: ({ html }) => html.replace('%lang%', locale)
        });
    });

// Combine both middleware functions using sequence
export const handle: Handler = sequence(kindeHandle, paraglideHandle);

This setup will first execute the Kinde session hooks and then run your ParaglideJS middleware to replace %lang% in your HTML with the appropriate locale. Depending on your needs, if the order matters (for example, if one middleware depends on changes made by the other), you might try swapping them. Could you please give a try and let me know if it works as expected? If you run into any issues or need further adjustments, feel free to reach out.

Paul EOP•2mo ago

Hi Ages! Thank you for your message and support 🙂 I receive the following error. The types Handle (from @sveltejs/kit) and Handler (from @kinde-oss/kinde-auth-sveltekit) don't match together.

Type 'Handle' is not assignable to type 'Handler'.
  Types of parameters 'input' and 'input' are incompatible.
    Type '{ event: EventHandler; resolve(event: RequestEvent<Partial<Record<string, string>>, string | null>, opts?: ResolveOptions | undefined): MaybePromise<...>; }' is not assignable to type '{ event: RequestEvent<Partial<Record<string, string>>, string | null>; resolve: (event: RequestEvent<Partial<Record<string, string>>, string | null>, opts?: ResolveOptions | undefined) => MaybePromise<...>; }'.
      Types of property 'resolve' are incompatible.
        Type '(event: import("@sveltejs/kit").RequestEvent<Partial<Record<string, string>>, string | null>, opts?: import("node_modules/vite/dist/node/index").ResolveOptions | undefined) => MaybePromise<...>' is not assignable to type '(event: import("@sveltejs/kit").RequestEvent<Partial<Record<string, string>>, string | null>, opts?: import("@sveltejs/kit").ResolveOptions | undefined) => MaybePromise<...>'.
          Types of parameters 'opts' and 'opts' are incompatible.
            Type 'import("@sveltejs/kit").ResolveOptions | undefined' is not assignable to type 'import("/node_modules/vite/dist/node/index").ResolveOptions | undefined'.
              Type 'ResolveOptions' has no properties in common with type 'ResolveOptions'.ts(2322)

Type 'Handle' is not assignable to type 'Handler'.
  Types of parameters 'input' and 'input' are incompatible.
    Type '{ event: EventHandler; resolve(event: RequestEvent<Partial<Record<string, string>>, string | null>, opts?: ResolveOptions | undefined): MaybePromise<...>; }' is not assignable to type '{ event: RequestEvent<Partial<Record<string, string>>, string | null>; resolve: (event: RequestEvent<Partial<Record<string, string>>, string | null>, opts?: ResolveOptions | undefined) => MaybePromise<...>; }'.
      Types of property 'resolve' are incompatible.
        Type '(event: import("@sveltejs/kit").RequestEvent<Partial<Record<string, string>>, string | null>, opts?: import("node_modules/vite/dist/node/index").ResolveOptions | undefined) => MaybePromise<...>' is not assignable to type '(event: import("@sveltejs/kit").RequestEvent<Partial<Record<string, string>>, string | null>, opts?: import("@sveltejs/kit").ResolveOptions | undefined) => MaybePromise<...>'.
          Types of parameters 'opts' and 'opts' are incompatible.
            Type 'import("@sveltejs/kit").ResolveOptions | undefined' is not assignable to type 'import("/node_modules/vite/dist/node/index").ResolveOptions | undefined'.
              Type 'ResolveOptions' has no properties in common with type 'ResolveOptions'.ts(2322)

Claire Mahoney•2mo ago

Hi Paul

To help resolve this, it would be important to know which versions of these SDKs you are using, as the types may differ between versions. Could you confirm the versions of the following SDKs that you're using in your project? - @sveltejs/kit - @kinde-oss/kinde-auth-sveltekit This will help identify any compatibility issues and suggest the most appropriate solution.

Paul EOP•2mo ago

Hi Ages, my intention is to use the latest packages. From my packages.json: devDependencies: "@sveltejs/kit": "^2.20.1", "@inlang/paraglide-js": "2.0.1" dependencies: "@kinde-oss/kinde-auth-sveltekit": "^2.1.0" Is that the latest? Checking GitHub it is.

Claire Mahoney•2mo ago

Hi Paul, Thank you for providing the version details of your dependencies. Can you adapt the Kinde handler to match SvelteKit's Handle type. Here's how you can modify your hooks.server.ts file:

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { paraglideMiddleware } from '$lib/paraglide/server';
import { sessionHooks } from '@kinde-oss/kinde-auth-sveltekit';

// Kinde middleware handle adapted to SvelteKit's Handle type
const kindeHandle: Handle = async ({ event, resolve }) => {
  sessionHooks({ event });
  return await resolve(event);
};

// Paraglide middleware handle
const paraglideHandle: Handle = ({ event, resolve }) =>
  paraglideMiddleware(event.request, ({ locale }) => {
    return resolve(event, {
      transformPageChunk: ({ html }) => html.replace('%lang%', locale),
    });
  });

// Combine both middleware functions using sequence
export const handle: Handle = sequence(kindeHandle, paraglideHandle);

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { paraglideMiddleware } from '$lib/paraglide/server';
import { sessionHooks } from '@kinde-oss/kinde-auth-sveltekit';

// Kinde middleware handle adapted to SvelteKit's Handle type
const kindeHandle: Handle = async ({ event, resolve }) => {
  sessionHooks({ event });
  return await resolve(event);
};

// Paraglide middleware handle
const paraglideHandle: Handle = ({ event, resolve }) =>
  paraglideMiddleware(event.request, ({ locale }) => {
    return resolve(event, {
      transformPageChunk: ({ html }) => html.replace('%lang%', locale),
    });
  });

// Combine both middleware functions using sequence
export const handle: Handle = sequence(kindeHandle, paraglideHandle);

In this setup: - kindeHandle is adapted to conform to SvelteKit's Handle type by aligning its parameters accordingly. - paraglideHandle remains as is, since it already matches the Handle type. - Both handlers are combined using SvelteKit's sequence helper function. Please give this a try and let me know if you encounter any further issues or need additional assistance. I'm happy to help.

Paul EOP•2mo ago

Hi Ages, with your code I receive following error in the kindeHandle with the event argument when calling sessionHooks({ event }):

Type 'RequestEvent<Partial<Record<string, string>>, string | null>' is not assignable to type 'EventHandler'.
  Type 'RequestEvent<Partial<Record<string, string>>, string | null>' is not assignable to type '{ request: Request & SessionManager & { session: Record<string, unknown> & { destroy: (error?: unknown) => void; }; }; }'.
    Types of property 'request' are incompatible.
      Type 'Request' is not assignable to type 'Request & SessionManager & { session: Record<string, unknown> & { destroy: (error?: unknown) => void; }; }'.
        Type 'Request' is missing the following properties from type 'SessionManager': getSessionItem, setSessionItem, removeSessionItem, destroySessionts(2322)
sessionHooks.d.ts(3, 5): The expected type comes from property 'event' which is declared here on type '{ event: EventHandler; }'

Type 'RequestEvent<Partial<Record<string, string>>, string | null>' is not assignable to type 'EventHandler'.
  Type 'RequestEvent<Partial<Record<string, string>>, string | null>' is not assignable to type '{ request: Request & SessionManager & { session: Record<string, unknown> & { destroy: (error?: unknown) => void; }; }; }'.
    Types of property 'request' are incompatible.
      Type 'Request' is not assignable to type 'Request & SessionManager & { session: Record<string, unknown> & { destroy: (error?: unknown) => void; }; }'.
        Type 'Request' is missing the following properties from type 'SessionManager': getSessionItem, setSessionItem, removeSessionItem, destroySessionts(2322)
sessionHooks.d.ts(3, 5): The expected type comes from property 'event' which is declared here on type '{ event: EventHandler; }'

In this code block:

// Kinde middleware handle adapted to SvelteKit's Handle type
const kindeHandle: Handle = async ({ event, resolve }) => {
  sessionHooks({ event });
  return await resolve(event);
};

// Kinde middleware handle adapted to SvelteKit's Handle type
const kindeHandle: Handle = async ({ event, resolve }) => {
  sessionHooks({ event });
  return await resolve(event);
};

Claire Mahoney•2mo ago

Hi Paul, Thanks for the detailed feedback. The error you’re encountering suggests that the type expected by sessionHooks (essentially, a specialized EventHandler including SessionManager capabilities) isn’t matching the SvelteKit’s RequestEvent type provided in the Handle function. As a temporary workaround, you might try explicitly casting the event to bypass the type incompatibility. For example, you could modify your Kinde handler like this:

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { paraglideMiddleware } from '$lib/paraglide/server';
import { sessionHooks } from '@kinde-oss/kinde-auth-sveltekit';

// Kinde middleware handle adapted to SvelteKit's Handle type
const kindeHandle: Handle = async ({ event, resolve }) => {
  // Temporarily cast event to bypass type mismatch
  sessionHooks({ event: event as any });
  return await resolve(event);
};

// Paraglide middleware handle
const paraglideHandle: Handle = ({ event, resolve }) =>
  paraglideMiddleware(event.request, ({ locale }) =>
    resolve(event, {
      transformPageChunk: ({ html }) => html.replace('%lang%', locale)
    })
  );

// Combine both handlers using sequence
export const handle: Handle = sequence(kindeHandle, paraglideHandle);

import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
import { paraglideMiddleware } from '$lib/paraglide/server';
import { sessionHooks } from '@kinde-oss/kinde-auth-sveltekit';

// Kinde middleware handle adapted to SvelteKit's Handle type
const kindeHandle: Handle = async ({ event, resolve }) => {
  // Temporarily cast event to bypass type mismatch
  sessionHooks({ event: event as any });
  return await resolve(event);
};

// Paraglide middleware handle
const paraglideHandle: Handle = ({ event, resolve }) =>
  paraglideMiddleware(event.request, ({ locale }) =>
    resolve(event, {
      transformPageChunk: ({ html }) => html.replace('%lang%', locale)
    })
  );

// Combine both handlers using sequence
export const handle: Handle = sequence(kindeHandle, paraglideHandle);

In this snippet, casting event to any is a stopgap measure to let the code compile and run. It essentially bypasses the strict type check, so please verify that the integration behaves as expected at runtime. If you’re still encountering issues or if you’d prefer not to use an explicit cast, let me know. I can escalate this to our engineering team so we can investigate a more robust solution or update the type definitions accordingly. Looking forward to hearing back from you

Paul EOP•2mo ago

Hi Ages, thank you this works at runtime 🙂 There is this compile time warning: Unexpected any. Specify a different type.eslint@typescript-eslint/no-explicit-any I suppose a more robust solution might be a good idea for the future. ParaglideJS seems to be one of the most common ways to integrate internationalization into a SvelteKit App. Much appreciated and wish you a great week

Claire Mahoney•5w ago

Hi Paul, Glad to hear it’s working at runtime! 😊 Thanks for pointing out the compile-time warning—I’ll discuss this with my team and get back to you once we have more information on a potential improvement. Appreciate the suggestion on ParaglideJS as well! I'll keep you posted. Wishing you a great week too

Gaming

Programming

Kinde + ParaglideJS in SvelteKit

Did you find this page helpful?