Socket Authentication with Phoenix v1.5.1

Questions / Help
, , ,
1

Hi,
I’m newbie to Elixir + Phoenix world. I’ve started an open source project to help COVID-19 pandemic if you live in a community, like a share-house.

In the app, I don’t have a user system, not needed, however I need to add device feature in order to be able to send notification later. So, I want to know which device is connected. I’m going to create a unique device id for each client on first call and set it in the cookie (I’ve have a plug for that, coding is going on).

For test purpose, to make the code easier, I created a separated branch along with some explanation in the comments here: https://github.com/rainlab-inc/cothings/tree/socket-authentication which is created from this: https://github.com/rainlab-inc/cothings/tree/upgrade-phoenix-version-to-1.5

I’ve been following latest documentations for:

However I’m not able to receive the token in user_socket module. I get a very common error like this:

Server: localhost:4000 (http)
Request: GET /socket/websocket?vsn=2.0.0
** (exit) an exception was raised:
    ** (FunctionClauseError) no function clause matching in ColivingWeb.UserSocket.connect/3
        (coliving 0.1.0) lib/coliving_web/channels/user_socket.ex:6: ColivingWeb.UserSocket.connect(%{"vsn" => "2.0.0"}, %Phoenix.Socket{assigns: %{}, channel: nil, channel_pid: nil, endpoint: ColivingWeb.Endpoint, handler: ColivingWeb.UserSocket, id: nil, join_ref: nil, joined: false, private: %{}, pubsub_server: ColivingWeb.PubSub, ref: nil, serializer: Phoenix.Socket.V2.JSONSerializer, topic: nil, transport: :websocket, transport_pid: nil}, %{})
        (phoenix 1.5.1) lib/phoenix/socket.ex:572: Phoenix.Socket.user_connect/4
        (phoenix 1.5.1) lib/phoenix/socket.ex:434: Phoenix.Socket.__connect__/3
        (phoenix 1.5.1) lib/phoenix/transports/websocket.ex:32: Phoenix.Transports.WebSocket.connect/4
        (phoenix 1.5.1) lib/phoenix/endpoint/cowboy2_handler.ex:31: Phoenix.Endpoint.Cowboy2Handler.init/4
        (cowboy 2.7.0) coliving/deps/cowboy/src/cowboy_handler.erl:41: :cowboy_handler.execute/2
        (cowboy 2.7.0) coliving/deps/cowboy/src/cowboy_stream_h.erl:320: :cowboy_stream_h.execute/3
        (cowboy 2.7.0) coliving/deps/cowboy/src/cowboy_stream_h.erl:302: :cowboy_stream_h.request_process/3
        (stdlib 3.11.2) proc_lib.erl:249: :proc_lib.init_p_do_apply/3
[error] #PID<0.523.0> running ColivingWeb.Endpoint (connection #PID<0.522.0>, stream id 1) terminated

But if I do the solution that I found online, especially discussions from here, then I don’t get an authenticated socket connection.

For example adding this function in the user_socket module:

def connect(_params, socket, _connect_info), do: {:ok, socket }

You may check the commit history from the branches or following the links for the codes:

Creating token with a hard coded device_uuid: https://github.com/rainlab-inc/cothings/blob/socket-authentication/lib/coliving_web/templates/layout/app.html.eex#L12

JS Socket Client: https://github.com/rainlab-inc/cothings/blob/socket-authentication/assets/js/socket.js

User_Socket module: https://github.com/rainlab-inc/cothings/blob/socket-authentication/lib/coliving_web/channels/user_socket.ex

What do I miss from the documentations?

Thanks in advance for your help!

1 Like
2

The socket connect function accepts the params as argument 1. The initializer doesn’t accept params as an option. If you make that change, it looks like it will work.

Great post and welcome, BTW. I appreciate you laying it all out and linking to the code.

1 Like
3

Thank you! Sorry, I’m not sure that I understand clearly. You mean like this?

let socket = new Socket("/socket");
    socket.connect({
        params: {
            token: window.userToken
        }
    });
// or

socket.connect({
    token: window.userToken
});

if so, it didn’t work. Still same error. I tried to find the JS Socket class but it says opposite? https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js#L838

4

You don’t need to put the params inside of the object with params key. You can simply pass in the token object directly and it will work.

connect({ token })

1 Like
5

yeah … the main problem was actually related to moment and webpack: https://github.com/moment/moment/issues/2979

and here’s how I solved: https://github.com/rainlab-inc/cothings/commit/b6ca751901ad6b3ab04e530966734724aa882498

due to much debugging logs (aggressive reconnection ) I wasn’t able to see the real problem. However your hint was the proper way.

Thanks a lot!

1 Like