Socket Authentication with Phoenix v1.5.1

nesimtunc

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:

Phoenix.Socket Phoenix.Socket — Phoenix v1.8.8
Phoenix.Channels Channels — Phoenix v1.5.1
JS Client Library: phoenix 1.8.8 | Documentation

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!

4 comments

/phoenix #authentication #phoenix_pubsub #web-socket

1 2975 4

2020-05-03 18:38:45 UTC

Showing Posts 1 to 4

Show Best Posts
Show All Posts (oldest first)
Show All Posts (newest first)

sb8244

Author of Real-Time Phoenix

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.

Post #1

nesimtunc

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

Post #2