I’m trying to create a collaborative text editor using partykit + yjs. I’m new to partykit and am following the instructions as mentioned in the documentations. I’m passing the auth token as param in the connection string and want to use that same param to update the database every time user makes an edit to the document.

Here is the code that I have written for server:

export default class Server implements Party.Server {
    constructor(public room: Party.Room) {
    }

    async onConnect(connection: Party.Connection, context: Party.ConnectionContext): Promise<void> {
        const room = this.room;

        try {
            const token = new URL(context.request.url).searchParams.get("token") ?? "";

            await onConnect(connection, this.room, {
                load: async () => {
                    try {
                        const document = await getDocumentByID(room.id, token);
                        const yDoc = new Y.Doc();
                        if (document.content != null) {
                            Y.applyUpdate(yDoc, new Uint8Array(Buffer.from(document.content, "base64")));
                        }
                        return yDoc;
                    } catch (error) {
                        console.log("error in fetching document", error);
                        throw error;
                    }
                },
                callback: {
                    handler: async (yDoc: Y.Doc) => {
                        try {
                            const content = Y.encodeStateAsUpdate(yDoc);
                            await updateDocumentContentByID(room.id, Buffer.from(content).toString("base64"), token);
                        } catch (error) {
                            console.log("error in updating document", error);
                        }
                    }
                }
            });
        } catch (error) {
            console.log("error in onConnect", error);
        }
    }
}

Server satisfies Party.Worker;

To test this I have created a client. The code for the client is:

import {useEditor, EditorContent} from "@tiptap/react";
import useYProvider from "y-partykit/react";
import Collaboration from "@tiptap/extension-collaboration";
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import StarterKit from "@tiptap/starter-kit";

const colours = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF"];

function Tiptap() {
    const provider = useYProvider({
        host: "localhost:1999",
        room: "document-1", // replace with your own document name
        options: {
            params: {
                token: import.meta.env.VITE_AUTH_TOKEN
            }
        }
    });

    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                // The Collaboration extension comes with its own history handling
                history: false,
            }),
            Collaboration.configure({
                document: provider.doc,
            }),
            // Register the collaboration cursor extension
            CollaborationCursor.configure({
                provider: provider,
                user: {
                    name: import.meta.env.VITE_USER_LABEL,
                    color: MY_COLOR,
                },
            }),
        ],
    });

    return <EditorContent style={{border: "solid"}} editor={editor}/>;
}


function App() {
    return (
        <div style={{minHeight: 100, minWidth: 100}}>
            <Tiptap/>
        </div>
    )
}

export default App```


The problem is when I run two instances of my client on my local machine and the server. I can see server only uses 1 token in the handler method.