EMILIANOM
EMILIANOM
PostsComments
CCConvex Community
Created by EMILIANOM on 10/22/2024 in #support-community
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 😦
5 replies
CCConvex Community
Created by EMILIANOM on 10/7/2024 in #support-community
Svelte + Clerk | Any example of how to get it working?
Hey, i want to integrate clerk with convex, can anyone share an example of this integration or maybe what steps should i follow and i will it give a try (I'm using lucia but i would like to migrate) https://github.com/lucia-auth/lucia/discussions/1707 (will be deprecated) thanks everyone
7 replies
CCConvex Community
Created by EMILIANOM on 9/26/2024 in #support-community
Convex + Lucia auth + Svelte | Help
Hello i was able to integrate Lucia with convex (thanks to @v and his repo https://github.com/vynxc/lucia-svelte-convex-demo) Now I'm trying to write queries that filter by auth user id, to show only those rows the user owns. 
import { queryWithAuth } from './auth/withAuth';

export const get = queryWithAuth({
    args: {},
    handler: async (ctx) => {
        const identity = ctx.userSessionContext?.user;
        if (!identity) {
            throw new Error('Not authenticated');
        }
        console.log(identity);

        const tasks = await ctx.db
            .query('tasks')
            // .filter((task) => task.userId === identity._id)
            .collect();
        return tasks.map((task) => ({ ...task, assigner: 'tom' }));
    }
});
import { queryWithAuth } from './auth/withAuth';

export const get = queryWithAuth({
    args: {},
    handler: async (ctx) => {
        const identity = ctx.userSessionContext?.user;
        if (!identity) {
            throw new Error('Not authenticated');
        }
        console.log(identity);

        const tasks = await ctx.db
            .query('tasks')
            // .filter((task) => task.userId === identity._id)
            .collect();
        return tasks.map((task) => ({ ...task, assigner: 'tom' }));
    }
});
Identity is null, even if I'm logged in, can anyone check my implementation and help me with some suggestions Thanks everyone Full code: https://github.com/emilianocalzada/convex-lucia-svelte
14 replies