Websockets authentication using JWT.

[maverick504]

Hello world!

I'm struggling with implementing authentication via JWT using websockets.

I'm using Nuxt.js on the front end, specifically, I'm using this template. JWT authentication via HTTP is working fine, and connecting to websockets without the auth middlewares on the backend is working too, but it isn't working when i add the auth middleware.

This is my wsKernel.js file (I think maybe i need to add some other middleware or something?):

'use strict'

const Ws = use('Ws')

const globalMiddleware = [
  'Adonis/Middleware/Session',
  'Adonis/Middleware/AuthInit'
]

const namedMiddleware = {
  auth: 'Adonis/Middleware/Auth',
}


Ws
  .registerGlobal(globalMiddleware)
  .registerNamed(namedMiddleware)

And this is my socket.js file:

'use strict'

const Ws = use('Ws')

Ws.channel('chat:*', 'ChatController').middleware(['auth']);

I've tried auth:jwt instead of auth, but it is still not working...

I'm using the adonis-vue-websocket package. It uses internally the withJwtToken method. This is the code i use on the client to make the connection:

Vue.ws.connect(
  {
    wsDomain: 'ws://127.0.0.1:3333',
    jwtToken: token
  },
  {
    path: 'adonis-ws',
    reconnectionAttempts: 300,
    reconnectionDelay: 5000
  }
);

Thanks in advance!

[McSneaky]

Can you show browser dev tools WS request. Is JWT attached in there?

[RodolfoSilva]

The browser websocket does not support headers, you will need implement a logic to authenticate without use headers, using only packages.

https://github.com/whatwg/html/issues/3062

https://stackoverflow.com/a/4361358/3629273

https://javascript.info/websocket