Auth with JWT in Convex Svelte

[COCPORN]

I am running into some issues with auth using Convex Svelte. I was directed here from the Convex Discord. I feel like I am so close, so thank you for checking this out. This works:

• Convex connection to the backend works
• Clerk integration (giving me a valid JWT in te below code), I am not married to Clerk, I just want something to work
• The line containing INSIDE setAuth is called, and shown in the log in Chrome

...however...:

• I cannot see the JWT in the network payload (not quite sure where to look, have looked at the WS-connection)
• Identity on the server is null

My "main" file looks like this:

<script lang="ts">
	import { PUBLIC_CONVEX_URL } from '$env/static/public';
	import { setupConvex, useConvexClient } from 'convex-svelte';
	import { SignIn, useClerkContext } from 'svelte-clerk';
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import AppSidebar from '$lib/components/app-sidebar.svelte';
	import '../app.css';

	let { children } = $props();

	const ctx = useClerkContext();
	const isLoaded = $derived(ctx.isLoaded);
	const user = $derived(ctx.user);

	setupConvex(PUBLIC_CONVEX_URL);

	$effect.pre(() => {
		const client = useConvexClient();
		client.setAuth(async () => {			
			const token = await ctx.session?.getToken();
			console.log('INSIDE setAuth', token);
			return token;
		});
	});
</script>

This code is created from a discussion on Discord #general. As I mentioned above the console.log-line outputs a valid JWT.

Thanks!

[COCPORN]

What is the normal response time on these kind of issues?

This is related: #11

@thomasballinger

[thomasballinger]

Check for multiple websocket connections, when I tried something similar but different

I got two websocket connections, the second was the one that sent the authenticate message (it was the original, but it was closed because the token was invalid)

[thomasballinger]

This seems to work fine? What's the Authenticate message on your websocket look like?

[COCPORN]

Sorry about not answering earlier.

{"type":"Authenticate","baseVersion":0,"tokenType":"User","value":"eyJhbGci[SNIPPED]"}
{"type":"AuthError","error":"No auth provider found matching the given token","baseVersion":0}

This is good, I guess, as the token is indeed sent on the wire. Sorry, I am new to Convex and Clerk.

My auth.config.ts-file looks like this:

export default {
  providers: [
    {
      domain: "https://bold-sloth-53.clerk.accounts.dev",
      applicationID: "convex",
    },
  ],
};

I can also see this in the Convex dashboard. In the Clerk-dashboard, I have created a JWT-template called "convex", and the domain in the Clerk-dashboard matches the one in the config file.

Thanks so much for your time and attention, @thomasballinger

[COCPORN]

This was resolve and was not Svelte-related.

[COCPORN]

Solution:

	$effect.pre(() => {
		const client = useConvexClient();
		client.setAuth(async () => {
			const token = await ctx.session?.getToken({ template: "convex" });
			return token;
		});
	});

I had forgotten the {template: "convex" }-part using svelte-clerk.

[thomasballinger]

@COCPORN It'd be great to get an example into this repo of this, do you have code you'd be willing to contribute?

[COCPORN]

@thomasballinger I think my answer has to be "Yes", a resounding yes with reservations.

I understand why it is a little difficult to provide an out-of-the box example on it, as there are many moving and configurable parts here, and I personally only have a version working using Clerk and I am not super happy with the implementation of it. My implementation feels hacky still, but it works consistently.

I will get to it sometime this week, if for no other reason than to have the little code needed for it pulled to pieces.