Support runes mode on @auth/sveltekit

[lucas-subli]

Goals

1. Work with Svelte 5 if runes mode is enforced

Currently it errors with:

node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_v_c22cw6ibutgwrkatehthzhxwee/node_modules/@auth/sveltekit/dist/components/SignIn.svelte:18:6 Cannot use `$$restProps` in runes mode
https://svelte.dev/e/legacy_rest_props_invalid]

Non-Goals

No response

Background

Svelte 5 has changed to use the runes system.
Runes are the future of Svelte, and eventually, non-Runes mode will be removed; thus, this will be a necessity.

Proposal

Migrate the existing components under @auth/sveltekit/components to user runes

[caleb1248]

Not sure when runes support will be added, but for now, I use a runes version of the SignIn component. Code below:

<!--src/lib/components/SignIn.svelte-->
<script lang="ts">
	import { enhance } from '$app/forms';
	import type { Snippet } from 'svelte';
	import type { HTMLFormAttributes } from 'svelte/elements';
	type SignInParameters = Parameters<App.Locals['signIn']>;

	interface SignInProps extends HTMLFormAttributes {
		provider?: SignInParameters[0];
		signInPage?: string;
		options?: SignInParameters[1] | undefined;
		authorizationParams?: SignInParameters[2] | undefined;
		email?: Snippet;
		credentials?: Snippet;
		submitButton?: Snippet;
	}

	const {
		class: className = '',
		provider = '',
		signInPage = 'signin',
		options = undefined,
		authorizationParams = undefined,
		email,
		credentials,
		submitButton,
		...restProps
	}: SignInProps = $props();

	const callbackUrl = options instanceof FormData ? options.get('redirectTo') : options?.redirectTo;
	const redirect = options instanceof FormData ? options.get('redirect') : options?.redirectTo;
	const redirectTo = callbackUrl;

	const authorizationParamsInputs = authorizationParams
		? typeof authorizationParams === 'string' && authorizationParams
			? new URLSearchParams(authorizationParams)
			: authorizationParams
		: undefined;
</script>

<form
	method="POST"
	action={`/${signInPage}`}
	use:enhance
	class={`signInButton ${className}`}
	{...restProps}
>
	<input type="hidden" name="providerId" value={provider} />
	{#if callbackUrl}
		<input type="hidden" name="callbackUrl" value={callbackUrl} />
	{/if}
	{#if redirect}
		<input type="hidden" name="redirect" value={redirect} />
	{/if}
	{#if redirectTo}
		<input type="hidden" name="redirectTo" value={redirectTo} />
	{/if}
	{#if authorizationParamsInputs}
		{#each Object.entries(authorizationParamsInputs) as [key, value]}
			<input type="hidden" name={`authorizationParams-${key}`} {value} />
		{/each}
	{/if}
	{#if provider === 'credentials'}
		{@render credentials?.()}
	{/if}
	<!-- TODO: Filter by provider type only -->
	{#if provider === 'email' || provider === 'sendgrid' || provider === 'resend'}
		{#if email}
			{@render email()}
		{:else}
			<label class="section-header" for={`input-email-for-${provider}-provider`}> Email </label>
			<input
				id="input-email-for-email-provider"
				type="email"
				name="email"
				placeholder="[email protected]"
				required
			/>
		{/if}
	{/if}
	<button type="submit">
		{#if submitButton}
			{@render submitButton()}
		{:else}
			Signin{provider ? ` with ${provider}` : ''}
		{/if}
	</button>
</form>

Usage:

1. Import the above component instead of importing the SignIn component from @auth/sveltekit/components.
2. Replace slot usage with snippets inside your code.