NESTJS Gateway / Websocket - how to send jwt access_token through socket.emit

While the question is answered, I want to point out the Guard is not usable to prevent unauthorized users from establishing a connection.

It's only usable to guard specific events.

The handleConnection method of a class annotated with @WebSocketGateway is called before canActivate of your Guard.

I end up using something like this in my Gateway class:

  async handleConnection(client: Socket) {
    const payload = this.authService.verify(
      client.handshake.headers.authorization,
    );
    const user = await this.usersService.findOne(payload.userId);
    
    !user && client.disconnect();
  }

Thanks! At the end i implemented a Guard that like the jwt guard puts the user inside the request. At the end I'm using the query string method from the socket client to pass the auth token This is my implementation:

import { CanActivate, ExecutionContext, Injectable, Logger } from '@nestjs/common';
import { WsException } from '@nestjs/websockets';
import { Socket } from 'socket.io';
import { AuthService } from '../auth/auth.service';
import { User } from '../auth/entity/user.entity';

@Injectable()
export class WsJwtGuard implements CanActivate {
    private logger: Logger = new Logger(WsJwtGuard.name);

    constructor(private authService: AuthService) { }

    async canActivate(context: ExecutionContext): Promise<boolean> {

        try {
            const client: Socket = context.switchToWs().getClient<Socket>();
            const authToken: string = client.handshake?.query?.token;
            const user: User = await this.authService.verifyUser(authToken);
            client.join(`house_${user?.house?.id}`);
            context.switchToHttp().getRequest().user = user
    
            return Boolean(user);
        } catch (err) {
            throw new WsException(err.message);
        }
    }
}

@arminfro answer works, but it has some drawbacks as pointed out by @tg-person

I will just add that if you only verify token on handleConnection, if the token is invalid there is a short amount of time the client is connected and able to send other events before failed verification disconnects him

To be able to address this issue, you can instead implement afterInit() method and intercept the request headers. After that, you can handle the token authorization accordingly. This will directly close the connection if the token is not valid.

afterInit(server: Server) {
  server.use((socket: Socket, next) => {
    socket.handshake.headers.authorization
    const [type, token] = socket.handshake.headers.authorization?.split(' ') ?? [];
    const bearerToken = type === 'Bearer' ? token : undefined;

    if (bearerToken) { // handle token validation
      next()
    } else {
      next(new Error("Empty Token!"));
    }
  })
}

I had the same issue. I did just as the official docs said. I used the same logic for HTTP request but changed my code to gain access to the request handshake.

I noticed you have to use a separate Guard and Interceptor. Like, make them specific to your WebSocket module, class or endpoints.

See my implementation below.

    async canActivate(context: ExecutionContext): Promise<boolean> {

    const isPublic = this.reflector.getAllAndOverride<boolean>(IS_PUBLIC_KEY, [
      context.getHandler(),
      context.getClass(),
    ]);

    const request = context.switchToHttp().getRequest();
    //access the request handshake to get the header 
    const token = request?.handshake?.headers?.authorization?.split('Bearer ')[1]

    if (isPublic) return true;

    if (!token) throw new UnauthorizedException('no token provided');

    try {
      const user = (await this.jwtService.decode(
        token,
      )) as JwtAuthResponseInterface;
      request.user = user;
      return true;
    } catch (err) {
      throw new UnauthorizedException(err);
    }
  }

I hope this helps.