EMILIANOM•5mo ago

Clerk, Convex and Svelte

Hey I have successfully added clerk to my svelte project and I'm almost there with convex auth but I'm still missing something. +layout.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 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>

<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>

is it possible to pass a custom convexClient to svelte useQuery? ** In react clerk you use "ConvexProviderWithClerk" (https://docs.convex.dev/api/modules/react_clerk) I tried to reimplement it but it's just too time consuming since i don't know react and i don't fully understand the whole context. Thanks, i really like convex but it's a bit of a pain working with it on svelte 5, i understand you are focused on react because its more adopted by the community 😦

Module: react-clerk | Convex Developer Hub

React login component for use with Clerk.

4 Replies

Convex Bot•5mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

EMILIANOMOP•5mo ago

Link to my repo: https://github.com/emilianocalzada/svelte-convex-clerk It's almost fully integrated just need to use the authenticated convex client inside queries or if that's not possible create a wrapper Svelte component which provides a ConvexSvelteClient authenticated with Clerk Hope you can help me

GitHub

GitHub - emilianocalzada/svelte-convex-clerk

Contribute to emilianocalzada/svelte-convex-clerk development by creating an account on GitHub.

EMILIANOMOP•5mo ago

I think i fixed it, i was creating 2 different convex clients and that was the error. now im just creating it in the main +layout.svelte and using "useConvexClient" to get the instance where i need it. I will let the repo public in case it helps anyone

wminor•5d ago

Thanks for this! Was super helpful in enabling me to get up and running with svelte and clerk ❤️

Clerk, Convex and Svelte

Did you find this page helpful?