#clerk svelte convex

1 messages · Page 1 of 1 (latest)

iron imp
#

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

Module: react-clerk | Convex Developer Hub

React login component for use with Clerk.

outer gladeBOT
#

Hi @iron imp. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, it seems that you're trying to integrate Clerk with Convex in a Svelte project. However, the Convex documentation and support threads indicate that the official support for Convex Auth is currently limited to React.

In the Discord support threads, some community members have shared their experiences and workarounds for integrating Clerk with Convex in a Svelte project. One of the members mentioned that they configured Clerk in their Svelte project and then set the authentication on the Convex client using Clerk's getAuth to return the token in the Convex JWT template format. They also mentioned attaching a listener for the custom event that Clerk fires whenever the Clerk user object changes.

However, it's important to note that these are community solutions and may not be officially supported or guaranteed to work in all cases.

As for your specific question about passing a custom convexClient to Svelte's useQuery, there's no direct information available in the knowledge sources.

For more detailed guidance and support, you might want to consider reaching out to the Convex community or support team directly. You can also check out the Convex documentation and the GitHub repository for more information and potential updates on Svelte support.

Here are the relevant links:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: