Clerk, Convex and Svelte

<script lang="ts">
    import type { LayoutData } from './$types';
    import { useClerkContext } from 'svelte-clerk';
    import { convexClient } from '$lib/convexClient';
    import { onMount, type Snippet } from 'svelte';

    // Do not destructure context or you'll lose reactivity!
    const ctx = useClerkContext();
    const session = $derived(ctx.session);

    async function getAuthToken() {
        const token = await session?.getToken({ template: 'convex' });
        console.log('token: ', token);
        return token;
    }

    $effect(() => {
        if (session) {
            convexClient.setAuth(getAuthToken);
        }
    });
    let { children, data }: { children: Snippet; data: LayoutData } = $props();
</script>

{@render children()}

<script lang="ts">
    import { useQuery } from 'convex-svelte';
    import { api } from '../../convex/_generated/api';
    import { convexClient } from '$lib/convexClient';

    // This doesn't work since I'm not using the convexClient instance, which has the auth function set
    const query = useQuery(api.tasks.get, {});
    // user: null

    // This works since I'm using the convexClient instance, which has the auth function set
    convexClient.query(api.tasks.get, {}).then((tasks) => console.log(tasks));
    // user: { id: '...', email: '...', ... }
</script>