Allow authToken to be a function (#6751)

Similar to params. When reconnecting, we call the function to get
a potentially updated authToken. Previously, to update the auth
token, a user would have to mutate socket.authToken, which is not
publicly documented.

Author: SteffenDE

assets/js/phoenix/socket.js

@@ -87,8 +87,8 @@ import Timer from "./timer"
  * Defaults to 20s (double the server long poll timer).
  *
  * @param {(Object|function)} [opts.params] - The optional params to pass when connecting
- * @param {string} [opts.authToken] - the optional authentication token to be exposed on the server
- * under the `:auth_token` connect_info key.
+ * @param {(string|function)} [opts.authToken] - the optional authentication token to be exposed on the server
+ * under the `:auth_token` connect_info key. Can be a string or a function that returns a string.
  * @param {string} [opts.binaryType] - The binary type to use for binary WebSocket frames.
  *
  * Defaults to "arraybuffer"
@@ -201,7 +201,7 @@ export default class Socket {
       }
       this.teardown(() => this.connect())
     }, this.reconnectAfterMs)
-    this.authToken = opts.authToken
+    this.authToken = opts.authToken && closure(opts.authToken)
   }
 
   /**
@@ -396,7 +396,7 @@ export default class Socket {
     // Sec-WebSocket-Protocol based token
     // (longpoll uses Authorization header instead)
     if(this.authToken){
-      protocols = ["phoenix", `${AUTH_TOKEN_PREFIX}${btoa(this.authToken).replace(/=/g, "")}`]
+      protocols = ["phoenix", `${AUTH_TOKEN_PREFIX}${btoa(this.authToken()).replace(/=/g, "")}`]
     }
     this.conn = new this.transport(this.endPointURL(), protocols)
     this.conn.binaryType = this.binaryType

assets/test/channel_test.js

@@ -65,10 +65,19 @@ describe("with transport", function (){
     it("sets subprotocols when authToken is provided", function (){
       const authToken = "1234"
       const socket = new Socket("/socket", {authToken})
-      
+
       socket.connect()
       expect(socket.conn.protocols).toEqual(["phoenix", "base64url.bearer.phx.MTIzNA"])
     })
+
+    it("sets subprotocols when authToken is a function", function (){
+      let authToken = "1234"
+      const socket = new Socket("/socket", {authToken: () => authToken})
+
+      authToken = "5678"
+      socket.connect()
+      expect(socket.conn.protocols).toEqual(["phoenix", "base64url.bearer.phx.NTY3OA"])
+    })
   })
 
   describe("updating join params", function (){

assets/test/longpoll_test.js

@@ -282,12 +282,9 @@ describe("Socket with LongPoll", () => {
       const authToken = "my-auth-token"
       const socket = new Socket("/socket", {
         transport: LongPoll,
-        params: {token: authToken}
+        authToken
       })
-      
-      // Set auth token
-      socket.authToken = authToken
-      
+
       // Mock the transport to capture the protocols argument
       socket.transport = jest.fn(() => ({
         onopen: jest.fn(),
@@ -369,4 +366,3 @@ describe("Ajax.request", () => {
     )
   })
 })
-

assets/test/socket_test.js

@@ -2,7 +2,7 @@ import {jest} from "@jest/globals"
 import {WebSocket, Server as WebSocketServer} from "mock-socket"
 import {encode} from "./serializer"
 import {Socket, LongPoll} from "../js/phoenix"
-import {SOCKET_STATES} from "../js/phoenix/constants"
+import {AUTH_TOKEN_PREFIX, SOCKET_STATES} from "../js/phoenix/constants"
 
 let socket
 
@@ -222,6 +222,43 @@ describe("with transports", function (){
       socket.connect()
       expect(conn).toBe(socket.conn)
     })
+
+    it("uses updated authToken function value when reconnecting", function (){
+      jest.useFakeTimers()
+
+      try {
+        let authToken = "old-token"
+        const connections = []
+        class ReconnectingWebSocket {
+          constructor(_url, protocols){
+            this.protocols = protocols
+            this.readyState = SOCKET_STATES.open
+            this.bufferedAmount = 0
+            connections.push(this)
+          }
+          close(){ this.readyState = SOCKET_STATES.closed }
+          send(){}
+        }
+
+        socket = new Socket("/socket", {
+          transport: ReconnectingWebSocket,
+          authToken: () => authToken,
+          reconnectAfterMs: () => 10
+        })
+
+        socket.connect()
+        authToken = "new-token"
+        socket.onConnClose({code: 1006})
+        jest.advanceTimersByTime(10)
+
+        expect(connections.length).toBe(2)
+        expect(connections[0].protocols).toEqual(["phoenix", `${AUTH_TOKEN_PREFIX}${btoa("old-token").replace(/=/g, "")}`])
+        expect(connections[1].protocols).toEqual(["phoenix", `${AUTH_TOKEN_PREFIX}${btoa("new-token").replace(/=/g, "")}`])
+        expect(socket.conn).toBe(connections[1])
+      } finally {
+        jest.useRealTimers()
+      }
+    })
   })
 
   describe("connect with long poll", function (){