Issue with client ID when using SPA like inertia

[graphem]

Posting something someone already posted on stackoverflow, anyone with same issue?

---

I'm using ably for broadcasting notifications in my admin panel, I've followed this repo https://github.com/ably/laravel-broadcaster, to setup ably/laravel-broadcaster and ably larvel echo for the client side I did ably laravel echo configuration in bootstrap.js as mentioned exactly in the repo

import Echo from '@ably/laravel-echo';
import * as Ably from 'ably';

window.Ably = Ably;
window.Echo = new Echo({
broadcaster: 'ably',
disconnectedRetryTimeout: 500
});
window.Echo.connector.ably.connection.on(stateChange => {
console.log(stateChange.current);
// if (stateChange.current === 'connected') {
// console.log('connected to ably server');
// }
});
everything works fine and notification is being broadcasted and received, but after the user login in my app laravel echo connection failes cuz of a clientId mismatch

Ably: Connection state: failed; reason: [ErrorInfo2: Mismatched clientId for existing connection; statusCode=401; code=40102; see https://help.ably.io/error/40102 ]
if I refreshed the page everything works fine again, it looks like after the client login, ably isn't updating the client id

Note 1: it worth mentioning that I'm using laravel inertia with vue to build my SPA applications

can anyone help? actually I don't know where to start

---

I am not sure if we can force the client_id to ably as usually the laravel broadcasting auth takes care of this

┆Issue is synchronized with this Jira Task by Unito

[sacOO7]

Hi @graphem thanks for raising the issue!
Seems auth is not setup properly at server side. You might like to go through this comment
ably-forks/laravel-echo#36 (comment). Also, I would like you to check https://github.com/ably-forks/laravel-echo?tab=readme-ov-file#working-with-laravel-sanctum-support-channel-auth-using-custom-implementation ( especially used for SPA applications )

[sacOO7]

As a starter, you might like to checkout https://github.com/ably-labs/laravel-broadcast-app. You can run the app using docker.

[graphem]

It is a bit different cause the app is not a PA, my app is working fine, the issue is just the client id generated by ablky gets reused when not logged in. I did a quick patch fix for now by removing the Echo instantiation from the bootstrap and only use it where it is needed when the user is authenticated. So a user cannot reuse a unauthenticated ably connection after being authenticated

[sacOO7]

I didn't get that clientId gets reused when not logged in. Does this mean user has clientId before logging in. Even if user has one, it should get updated for the next ably connection or channel attach request ( If we are making one ) ->

laravel-broadcaster/src/AblyBroadcaster.php

Line 227 in 83cc6bf

'x-ably-clientId' => $clientId ? strval($clientId) : null,

.
I would say the problem is happening because user switching is happening without explicit logout. Can you confirm that you are using guest user before explicit login? If that's the case, then there might be a case where this error can arise.
Since, connection + channel permisions are assigned to given user, it cannot be reused for other user. I would suggest that you explicitly logout guest user ( which has user id ) before logging in using another user.

[graphem]

From my investigation when using Inertia as SPA, if the Echo is in the bootstrap, then a client_id = null connection is created, then after login if redirected to a page were we call join channel properties, we get the error cause it seems it tries to reuse the connection with the client_id = null but with a now token with the client_id = user_id. When in a non SPA setup this would work fine cause the bootstrap will be reloaded a new connection created.

[sacOO7]

Okay, can you post ably token (returned by laravel server) before login and after login ( when error occurs). You should be able to check it in chrome developer console. Go to network tab. Http endpoint should be /broadcasting/auth.

[sacOO7]

Also, we do have a working laravel broadcaster app https://github.com/ably-labs/laravel-broadcast-app/. It does seem to use SPA, can you double check

[AmirHaroun1]

i'm facing this issue too, any solutions ???

[sacOO7]

@AmirHaroun1 we will be looking into this soon 👍

[sacOO7]

Link to internal discussion -> https://ably-real-time.slack.com/archives/C8SPU4589/p1720522240507579

[sacOO7]

Hi @graphem @AmirHaroun1 we have merged PR for the fix. Expect release soon 👍

[sacOO7]

Hi @graphem @AmirHaroun1 we have released fix in laravel echo 1.0.5. Do update the library

npm install @ably/laravel-echo 1.0.5

[sacOO7]

Also, give a read for user login section at the bottom of ably-laravel-echo readme.