Make it possible to overwrite app.d.ts typing from @auth/sveltekit

[MathiasWP]

Goals

1. Make it possible to define my own session type in PageData

Non-Goals

No response

Background

When importing from @auth/sveltekit like this:

import { SvelteKitAuth } from '@auth/sveltekit';

The library declares the global type for the namespace App like this:

import type { AuthConfig } from "@auth/core";
import type { BuiltInProviderType } from "@auth/core/providers";
import type { Session } from "@auth/core/types";
export type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
/** Configure the {@link SvelteKitAuth} method. */
export interface SvelteKitAuthConfig extends Omit<AuthConfig, "raw"> {
}
declare global {
    namespace App {
        interface Locals {
            auth(): Promise<Session | null>;
            /** @deprecated Use `auth` instead. */
            getSession(): Promise<Session | null>;
            signIn: <P extends BuiltInProviderType | (string & NonNullable<unknown>), R extends boolean = true>(
            /** Provider to sign in to */
            provider?: P, // See: https://github.com/microsoft/TypeScript/issues/29729
            options?: FormData | ({
                /** The URL to redirect to after signing in. By default, the user is redirected to the current page. */
                redirectTo?: string;
                /** If set to `false`, the `signIn` method will return the URL to redirect to instead of redirecting automatically. */
                redirect?: R;
            } & Record<string, any>), authorizationParams?: string[][] | Record<string, string> | string | URLSearchParams) => Promise<R extends false ? any : never>;
            signOut: <R extends boolean = true>(options?: {
                /** The URL to redirect to after signing out. By default, the user is redirected to the current page. */
                redirectTo?: string;
                /** If set to `false`, the `signOut` method will return the URL to redirect to instead of redirecting automatically. */
                redirect?: R;
            }) => Promise<R extends false ? any : never>;
        }
        interface PageData {
            session?: Session | null;
        }
    }
}
declare module "$env/dynamic/private" {
    const AUTH_SECRET: string;
    const AUTH_SECRET_1: string;
    const AUTH_SECRET_2: string;
    const AUTH_SECRET_3: string;
    const AUTH_TRUST_HOST: string;
    const VERCEL: string;
}

This crashes with my auth.ts config which looks like this:

import { AUTH_SECRET, GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } from '$env/static/private';
import { SvelteKitAuth } from '@auth/sveltekit';
import GitHub from '@auth/sveltekit/providers/github';

export const { handle, signIn, signOut } = SvelteKitAuth({
	providers: [
		GitHub({
			clientId: process.env.GITHUB_CLIENT_ID ?? GITHUB_CLIENT_ID,
			clientSecret: process.env.GITHUB_CLIENT_SECRET ?? GITHUB_CLIENT_SECRET,
			authorization: {
				// Scopes needed for app to work, may be extended in the future
				params: { scope: 'repo read:org' }
			}
		})
	],
	trustHost: true,
	secret: process.env.AUTH_SECRET ?? AUTH_SECRET,
	callbacks: {
		jwt({ token, account, profile }) {
			let jwt = token;

			if (account) {
				jwt = {
					...jwt,
					account
				};
			}

			if (profile) {
				jwt = {
					...jwt,
					profile
				};
			}

			return jwt;
		},
		session({ session, token }) {
			// Pass the access token to the session for client-side use
			return { ...session, token };
		}
	}
});

If i now try do define the PageData.session myself, the types are overwritten by the @auth/sveltekit library

// This will not work!

interface Session {
	user?: User;
	expires: ISODateString;
}

interface User {
	id?: string;
	name?: string | null;
	email?: string | null;
	image?: string | null;
}
type AuthData = Session & { token: { account: Account; profile: Profile } };

declare global {
	namespace App {
		// interface Error {}
		interface Locals {
			auth(): Promise<AuthData | null>;
		}
		interface PageData {
			session?: AuthData | null;
		}
		// interface PageState {}
		// interface Platform {}
	}
}

export { };

Proposal

Instead of automatically declaring the global App namespace from within the library, could you instead expose the types used:

// Export these:
declare global {
    namespace App {
        interface Locals {
            auth(): Promise<Session | null>;
            signIn: <P extends BuiltInProviderType | (string & NonNullable<unknown>), R extends boolean = true>(
            provider?: P, // See: https://github.com/microsoft/TypeScript/issues/29729
            options?: FormData | ({
                redirectTo?: string;
                redirect?: R;
            } & Record<string, any>), authorizationParams?: string[][] | Record<string, string> | string | URLSearchParams) => Promise<R extends false ? any : never>;
            signOut: <R extends boolean = true>(options?: {
                redirectTo?: string;
                redirect?: R;
            }) => Promise<R extends false ? any : never>;
        }
        interface PageData {
            session?: Session | null;
        }
    }
}

And then document that the user should set these themselves, so that it's possible to have full control over the App namespace.

[MathiasWP]

My current workaround that i found is to define a new property on PageData (for example called auth) that contains my custom Session type.