Nuxt•2y ago

Understanding authentication with websockets

Hello everybody,

I am trying to understand and solve an issue: I want to make use of Websockets in order to broadcast events from my backend (Laravel using Soketi) to my frontend (Nuxt3). For auth I am using nuxt-auth-sanctum (https://github.com/manchenkoff/nuxt-auth-sanctum)

Now here's what happens: Using this plugin (

echo.client.ts

echo.client.ts

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
    }
  }
})

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
    }
  }
})

I indeed can subscribe to a channel like this:

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

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

But if I try to subscribe to another channel in another compoent, I am getting logged out.

I am using routeRules to proxy requests to my backend, which I defined like this:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  routeRules: {
    '/backend/auth/**': {
      proxy: {
        to: `${process.env.NUXT_BACKEND_URL}/auth/**`,
        headers: { accept: 'application/json' }
      }
    },
    '/broadcasting/auth': {
      proxy: `${process.env.NUXT_BACKEND_URL}/api/${process.env.NUXT_API_VERSION}/broadcasting/auth`,
      headers: { accept: 'application/json' }
    },
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  routeRules: {
    '/backend/auth/**': {
      proxy: {
        to: `${process.env.NUXT_BACKEND_URL}/auth/**`,
        headers: { accept: 'application/json' }
      }
    },
    '/broadcasting/auth': {
      proxy: `${process.env.NUXT_BACKEND_URL}/api/${process.env.NUXT_API_VERSION}/broadcasting/auth`,
      headers: { accept: 'application/json' }
    },
  },
})

Now I really don't have any idea, what's going wrong there. What I do see is that for some reason a new session is being created when I subscribe to two channels, which does not happen if I subscribe only to one.

GitHub

GitHub - manchenkoff/nuxt-auth-sanctum: Nuxt module for Laravel San...

Nuxt module for Laravel Sanctum authentication. Contribute to manchenkoff/nuxt-auth-sanctum development by creating an account on GitHub.

AhoiromanOP•6/24/24, 8:08 AM

What I did figure out: There's a new session being created in Laravel's sessions-table, if I try to join two channels. If I try to join one channel only, this does not happen.

The first session that is being created before I log in got the useragent . After logging in, the same session gets the useragent .

AhoiromanOP•6/24/24, 8:08 AM

Now, if I enter multiple channels, the behaviour changes.

I am going to outline the steps:

AhoiromanOP•6/24/24, 8:08 AM

Entering the page: Session is being created:

| id | user_id | ip_address | user_agent | payload | last_activity |
|------------------------------------------|---------|------------|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| SCDpN7Qac64PZFsUIVd9Hi5kxGiVMqKqR45kTdH7 | | 127.0.0.1 | node | YTozOntzOjY6Il90b2tlbiI7czo0MDoiblNWYTJySFB0OXczQzhQS3RIOElVRmc4bER3WnQyd2JDWU80Q09jVyI7czo5OiJfcHJldmlvdXMiO2E6MTp7czozOiJ1cmwiO3M6MzY6Imh0dHA6Ly9hcGkuaG9zdHIudGVzdC9hcGkvdjEvYXV0aC9tZSI7fXM6NjoiX2ZsYXNoIjthOjI6e3M6Mzoib2xkIjthOjA6e31zOjM6Im5ldyI7YTowOnt9fX0= | 1719216079 |

AhoiromanOP•6/24/24, 8:08 AM

After logging in:

| id | user_id | ip_address | user_agent | payload | last_activity |
|------------------------------------------|--------------------------------------|------------|-----------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| I09Iv2sAdubRWUxYUvZj03xZeu9885bPONZstz9u | 9c571400-9c2e-4d8a-bdbb-088ea138b0d5 | 127.0.0.1 | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 | ...== | 1719216200 |

AhoiromanOP•6/24/24, 8:09 AM

After refreshing the page

| id | user_id | ip_address | user_agent | payload | last_activity |
|------------------------------------------|--------------------------------------|------------|------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| I09Iv2sAdubRWUxYUvZj03xZeu9885bPONZstz9u | 9c571400-9c2e-4d8a-bdbb-088ea138b0d5 | 127.0.0.1 | node | ...= | 1719216228 |
| q5YXbbteK7znhilMDKeIBrhvOeEcRUw4Sj8ITGSR | | 127.0.0.1 | node | ...= | 1719216229 |

AhoiromanOP•6/24/24, 8:09 AM

So I can see that there's a second session being created if I join multiple channels. But the second one does not have an user_id assigned, so the user is logged out.