Spring + Oauth2 + JWT+ Websocket

Question

I am doing an example on spring boot + oauth2 + websocket. I am having spring websocket configuration and other code on resource server which is running on 8098 port. And I trying to get connect it from client application which is running on 8080 port. But when I run my application I get error 401 (unauthorized) on browser console. I am sharing some of my code:

1) Client application (running on 8080 port) javaScript code to get websocket connection

'use strict';

// pull in the SockJS JavaScript library for talking over WebSockets.
var SockJS = require('sockjs-client');
// pull in the stomp-websocket JavaScript library to use the STOMP sub-protocol.
require('stompjs');

function register(registrations) {
    const access_token = localStorage.getItem("ACCESS_TOKEN");
    console.log("Access Token " + access_token);
    const csrf_token = localStorage.getItem("XSRF");
    // Here is where the WebSocket is pointed at the server application’s /messages endpoint
    // websocket use this URL to open TCP connection
    var socket = SockJS('http://localhost:8098/notifications');
    var stompClient = Stomp.over(socket);

    var headers = {
        'X-Csrf-Token': csrf_token,
        Authorization: 'Bearer ' + access_token
    }

    // connect to server using stompClient
    stompClient.connect(headers, function(frame) {
        // Iterate over the array of registrations supplied so each can subscribe for callback as messages arrive.
        stompClient.send("/app/notifications", {});
        registrations.forEach(function (registration) {
            stompClient.subscribe(registration.route, registration.callback);
        });
    });

}

module.exports = {
    register: register
};

2) Resource server(running on 8098 port) code where I have server side websocket configuration

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractSecurityWebSocketMessageBrokerConfigurer {

    // This prefix we will append to every message's route.
    static final String MESSAGE_PREFIX = "/topic"
    static final String END_POINT = "/notifications"
    static final String APPLICATION_DESTINATION_PREFIX = "/app"

    @Override
    protected boolean sameOriginDisabled() {
        return true;
    }

    /**
     * This method configure the end-point on the backend for clients and server to link ('/notifications').
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {

         // This code register the '/notifications' end-point. The SockJS client will attempt to connect to '/notifications' end-point
        if(registry != null) {
            registry.addEndpoint(END_POINT).setAllowedOrigins("*").withSockJS()
        }

    }

    /**
     * This method configure the message broker used to relay messages between server and client.
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {

        if(registry != null) {
            // Enable a broker to send messages to the client on destinations prefixed with '/topic'
            registry.enableSimpleBroker(MESSAGE_PREFIX);
            // prefix for messages that are bound for @MessageMapping annotated methods. This prefix will be used to define all message mappings
            registry.setApplicationDestinationPrefixes(APPLICATION_DESTINATION_PREFIX)
        }
    }
}

Kindly suggest some solution.

Answer 1

Finally I solved the issue. The problem was previously I was sending access token in decoded form using jwt_token and with prefix 'bearer'.

So I did some debugging and I came to know that token should be send in its actual form and without decoding.

1. Previously I was extracting access token at client side from response like this:

let decoded = jwt_decode(response.entity.details.tokenValue); localStorage.setItem("ACCESS_TOKEN", decoded.jti);

And this is not correct. So I changed it with below code:

localStorage.setItem("ACCESS_TOKEN", response.entity.details.tokenValue);

2. In websocket-listener js file I did below changes

const access_token = localStorage.getItem("ACCESS_TOKEN");

var socket = SockJS('http://localhost:8098/notifications/?access_token='+access_token);

And see I am sending access token in url query parameter without prefix 'bearer'.

And it worked.