Pusher Svelte AuthError on a presence channel

Question

I'm trying to get pusher presenceschannels working using Svelte.

Here's my client code:

this._presenceChannel = this._pusher.subscribe('presence-' + this._channelName);
this._presenceChannel.bind("pusher:subscription_succeeded", (data) => {
  console.log(data);
});
this._presenceChannel.bind("pusher:subscription_error", (data) => {
  console.log(data);
});

And my server code for the auth endpoint:

export async function POST({request}) {
  const pusher = getPusher();
  const params = new URLSearchParams(await request.text());
  const socketId = params.get('socket_id');
  const user = {
    id: "1",
    user_info: {
      name: "User 1",
    },
  };
  const authResponse = pusher.authenticateUser(socketId, user);
  return new Response(JSON.stringify(authResponse));
}

I can see the network request from the client hitting /pusher/auth and it responds with a 200 and a body of:

{"auth":"...token...","user_data":"{\"id\":\"1\",\"user_info\":{\"name\":\"User 1\"}}"}

Then the client callback for "pusher:subscription_error" triggers with:

{type: 'AuthError', error: undefined}

Answer 1

It turns out that I was confusing "user authentication" and "user authorization" in Pusher.

What worked was first having the "user authenticate". The client for this was:

this._pusher.signin();

Which calls /pusher/user-auth on the server. The interface for that call was the function I had written in my original question, calling pusher.authenticateUser.

Then, when the client subscribes to the channel, this calls /pusher/auth which is similar, but requires a call to pusher.authorizeChannel.