What I want to solve

I want to implement Laravel-Echo to my Nuxt3 Application. As Laravel is my backend, I am using Sanctum as auth provider.

What my attempt looks like

I am using nuxt-auth-sanctum, which works nice for my purpose (so far). This is the nuxt.conf.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@vueuse/nuxt',
    'nuxt-auth-sanctum'
  ],
  runtimeConfig: {
    backendUrl: process.env.NUXT_BACKEND_URL,
    public: {
      pusherKey: process.env.NUXT_PUBLIC_PUSHER_KEY,
      pusherHost: process.env.NUXT_PUBLIC_PUSHER_HOST,
      pusherWsPort: process.env.NUXT_PUBLIC_PUSHER_WS_PORT,
      pusherWssPort: process.env.NUXT_PUBLIC_PUSHER_WSS_PORT,
      pusherScheme: process.env.NUXT_PUBLIC_PUSHER_SCHEME,
      pusherCluster: process.env.NUXT_PUBLIC_PUSHER_CLUSTER
    }
  },
  sanctum: {
    baseUrl: `${process.env.NUXT_PUBLIC_SITE_URL}/backend/api/${process.env.NUXT_API_VERSION}`,
    origin: process.env.NUXT_PUBLIC_SITE_URL,
    endpoints: {
      csrf: `${process.env.NUXT_PUBLIC_SITE_URL}/backend/csrf`,
      login: `${process.env.NUXT_PUBLIC_SITE_URL}/backend/auth/login`,
      logout: `${process.env.NUXT_PUBLIC_SITE_URL}/backend/auth/logout`,
      user: '/auth/me'
    },
    logLevel: 4,
    redirect: {
      keepRequestedRoute: true,
      onLogin: '/dashboard',
      onLogout: '/',
      onAuthOnly: '/login',
      onGuestOnly: '/dashboard'
    }
  },
  routeRules: {
    '/backend/api/v1/**': {
      proxy: {
        to: `${process.env.NUXT_BACKEND_URL}/api/${process.env.NUXT_API_VERSION}/**`,
        headers: { accept: 'application/json' }
      }
    },
    '/backend/web/**': {
      proxy: {
        to: `${process.env.NUXT_BACKEND_URL}/**`,
        headers: { accept: 'application/json' }
      }
    },
    '/backend/auth/**': {
      proxy: {
        to: `${process.env.NUXT_BACKEND_URL}/auth/**`,
        headers: { accept: 'application/json' }
      }
    },
    '/backend/csrf': {
      proxy: `${process.env.NUXT_BACKEND_URL}/sanctum/csrf-cookie`,
      headers: { accept: 'application/json' }
    },
    '/broadcasting/auth': {
      proxy: `${process.env.NUXT_BACKEND_URL}/api/${process.env.NUXT_API_VERSION}/broadcasting/auth`,
      headers: { accept: 'application/json' }
    },
    '/api/search.json': { prerender: true },
    '/docs': { redirect: '/docs/getting-started', prerender: false }
  },
  devtools: {
    enabled: true
  },
})

This is the echo plugin file called echo.client.ts:

import Echo from 'laravel-echo'
import Pusher from 'pusher-js'
import {
  useCookie
} from '#app'

declare global {
  interface Window {
    pusher: any
  }
}

export default defineNuxtPlugin(() => {
  window.pusher = Pusher
  const config = useRuntimeConfig().public
  const token = useCookie('XSRF-TOKEN')

  const echo = new Echo({
    broadcaster: 'pusher',
    key: config.pusherKey,
    wsHost: config.pusherHost,
    wsPort: config.pusherWsPort,
    wssPort: config.pusherWssPort,
    forceTLS: (config.pusherScheme ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster: config.pusherCluster,
    auth: {
      headers: {
        'X-XSRF-TOKEN': token.value
      }
    }
  })

  return {
    provide: {
      echo: echo
    }
  }
})

It is actually possible to login and subscribe to a channel like this:

onMounted(() => {
  $echo.private(`Order.${props.order.uuid}`).listen('.OrderShipped', () => {
    refresh()
  })
})

This makes this call:

fetch("http://web.example.test/broadcasting/auth", {
  "headers": {
    "accept": "*/*",
    "accept-language": "de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7",
    "content-type": "application/x-www-form-urlencoded",
    "x-xsrf-token": "...="
  },
  "referrer": "http://web.example.test/orders",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "socket_id=6189903872.1771283099&channel_name=private-Order.9c571400-9c2e-4d8a-bdbb-088ea138b0d5",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});

What is my problem

Now the strange thing happens here:

If I subscribe to another channel like this:

onMounted(() => {
  currentProject.value = data.value.data[selectedProject.value]
  $echo.private(`User.${user.value.uuid}`).listen('.OrderCreated', () => {
    refresh()
  })
})

the subscription process works out fine, too. But if I refresh the page, I am getting logged out. If I remove one $echo.private()-statement, this does not happen. If I just use $echo.channel() (not private), this is not happening, too.

On the Laravel database’s sessions table I can see that in these cases a new session is being created after refresh without an assigned user_id.

Sessions before using $echo.private()

Sessions after refresh