Allow a `token` string to be passed into `createSvelteAuthClient`

[Tyler-Petrov]

The access token can be retrieved server side. Because createSvelteAuthClient doesn't except a token as input there's no way to use the client during SSR. If the token is passed in (event if undefined/null) the token shouldn't be fetched. I don't see any reason that this wouldn't be the preferred happy path moving forward.

I would love to see this:

layout.server.ts

import type { LayoutServerLoad } from './$types';

export const load = (async ({ locals: { token } }) => {
    return {
        token
    };
}) satisfies LayoutServerLoad;

layout.svete (root)

<script lang="ts">
  import '../app.css';
  import favicon from '$lib/assets/favicon.svg';
  import { createSvelteAuthClient } from '@mmailaender/convex-better-auth-svelte/svelte'; 
  import { authClient } from '$lib/auth-client'; 

  let { children, data } = $props();

  createSvelteAuthClient({
    authClient,
    options: {
      token: data.token
    }
  }); 
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
</svelte:head>

{@render children?.()}

[mmailaender]

Yeah, agree this is a good one - have this also on my roadmap. Good to see that someone else is also interested in this. Motivates me to implement this earlier 😉

[mmailaender]

Great news => solved with 0.4.0.

Documentation waiting for merge: get-convex/better-auth#164

src/routes/+layout.server.ts

import type { LayoutServerLoad } from "./$types";
import { createAuth } from "$convex/auth.js";
import { getAuthState } from "@mmailaender/convex-better-auth-svelte/sveltekit";

export const load: LayoutServerLoad = async ({ cookies }) => {
  const authState = await getAuthState(createAuth, cookies);
  return { authState };
};

src/routes/+layout.svelte

<script lang="ts">
 import { createSvelteAuthClient } from '@mmailaender/convex-better-auth-svelte/svelte';
 import { authClient } from '$lib/auth-client';

 let { children, data } = $props();

 // Pass server auth state to prevent loading flash
 createSvelteAuthClient({ 
   authClient, 
   getServerState: () => data.authState  // [!code ++]
 });
</script>

{@render children()}

[Tyler-Petrov]

Thank you sir!