v0.10.x JWT documentation seems unclear?

[acupofjose]

Question

Using the current release of @supabase/realtime-js I am unable to connect to the latest release of @supabase/realtime. Following the documentation of the breaking changes in v0.10, what are client opening requests supposed to include?

A token query param? A header?

To Reproduce

docker-compose.yml

version: "3"
services:
  realtime:
    image: supabase/realtime:latest
    ports:
      - "4000:4000"
    environment:
      DB_HOST: db
      DB_NAME: postgres
      DB_USER: postgres
      DB_PASSWORD: postgres
      DB_PORT: 5432
      PORT: 4000
      HOSTNAME: localhost
      JWT_SECRET: SOMETHING_SUPER_SECRET
      SECURE_CHANNELS: "true"
    depends_on:
      - db
  db:
    image: supabase/postgres
    ports:
      - "5432:5432"
    command:
      - postgres
      - -c
      - wal_level=logical
    environment:
      POSTGRES_PASSWORD: postgres

index.js

const { RealtimeClient } = require("@supabase/realtime-js")

const client = new RealtimeClient("ws://localhost:4000/socket")
client.onOpen(() => console.log("Socket opened."))
client.onClose(() => console.log("Socket closed."))
client.onError((e) => console.log("Socket error", e.message))
client.connect()

Terminal Output

realtime_1  | 2021-01-28 16:01:20.162 [info] Running RealtimeWeb.Endpoint with cowboy 2.6.3 at :::4000 (http)
realtime_1  | 2021-01-28 16:01:20.162 [info] Access RealtimeWeb.Endpoint at http://localhost:4000
realtime_1  | 2021-01-28 16:03:25.018 [info] REFUSED CONNECTION TO RealtimeWeb.UserSocket in 114µs
realtime_1  |   Transport: :websocket
realtime_1  |   Serializer: Phoenix.Socket.V1.JSONSerializer
realtime_1  |   Connect Info: %{}
realtime_1  |   Parameters: %{"vsn" => "1.0.0"}
realtime_1  | 2021-01-28 16:03:26.033 [info] REFUSED CONNECTION TO RealtimeWeb.UserSocket in 100µs

Application Output

realtime-test-js % node .
Socket error undefined
Socket closed.
Socket error undefined
Socket closed.

Expected behavior

A connection to the realtime socket.

System information

• OS: macOS - docker
• Version of realtime-js: 1.0.6

[w3b6x9]

@acupofjose we're in the process of enabling JWT auth to realtime so apologies if the documentation isn't clear.

Looks like SECURE_CHANNELS is already set to "true" in your docker-compose.yml, which means you'll have to set your JWT_SECRET to the secret used to sign your JWT. Then, you can pass in your JWT like this:

const client = new RealtimeClient("ws://localhost:4000/socket", { params: { token: "your_jwt" }})

If you don't want to enable JWT auth, you can set SECURE_CHANNELS to "false" and everything should continue to work as expected. When SECURE_CHANNELS is set to "false", you don't have to set JWT_SECRET.

I'll go ahead and update @supabase/realtime-js documentation to reflect what I've written here.

Let me know if you have any other questions.

Hope that helped!

[acupofjose]

@w3b6x9 awesome, that's exactly what I was looking for, thank you! Trying to get the @supabase/realtime-csharp library written and was struggling to understand how to pass the token.