Customization of header parameters in authentication

[ezequidias]

I cannot send additional parameters to the Header, such as:

window.Echo = new Echo({
    broadcaster: WaveConnector,
    auth: {
      headers: {
        'Authorization': 'token test'
      }
    },
    bearerToken: 'test token'
    endpoint: '/wave',
    authEndpoint: '/broadcasting/auth',
    csrfToken: 'test token'
  })

I need to send a token header of type Bearer so is there any possibility to send auth.headers or bearerToken?
I don't use csrfToken but Laravel's passport API token bearer!

[slavarazum]

Looks like you need withCredentials option support to add Authorization header automatically. Great point 👍 I will ship this addition soon.

@ezequidias update:
Due to EventSource docs, it's not support additional headers in requests.

However, could you please describe your use case with Passport usage?
If you trying to authorize your first-party client, Passport has CreateFreshApiToken Middleware. This might be exactly the solution you need.

[ezequidias]

I'm trying to connect to private broadcasting channels (/broadcasting/auth)!

currently only works for laravel projects that use sessions (WEB)(CSRF_TOKEN) but does not work for API projects built with laravel!

in laravel websockets i added the token in additional settings in laravel echo! see an example of laravel echo connecting with laravel websockets:

   window.Pusher = require('pusher-js')
   window.Echo = new Echo({
     broadcaster: 'pusher',
     bearerToken: 'bearer token',
     key: 'key pusher',
     cluster: 'cluster_name',
     wsHost: 'localhost',
     wsPort: 80,
     forceTLS: false,
     authEndpoint: 'http://api.test/broadcasting/auth'
     enabledTransports: [ 'ws', 'wss' ]
   })

notice that I add the token bearerToken!! it is also possible to add with:

auth:{
  headers:{
   Authorization: token bearer
  }
}

i did some research and found that waveConnector is not up to date with laravel echo! I believe that making these changes will work:

Laravel Wave Connector
Laravel Echo Connector

just replace this here:

 private _defaultOptions: any = {
        auth: {
            headers: {},
        },
        authEndpoint: '/broadcasting/auth',
        broadcaster: 'pusher',
        csrfToken: null,
        host: null,
        key: null,
        namespace: 'App.Events',
    };
    
        protected setOptions(options: any): any {
        this.options = Object.assign(this._defaultOptions, options);

        if (this.csrfToken()) {
            this.options.auth.headers['X-CSRF-TOKEN'] = this.csrfToken();
        }

        return options;
    }

to:

 private _defaultOptions: any = {
        auth: {
            headers: {},
        },
        authEndpoint: '/broadcasting/auth',
        userAuthentication: {
            endpoint: '/broadcasting/user-auth',
            headers: {},
        },
        broadcaster: 'pusher',
        csrfToken: null,
        bearerToken: null,
        host: null,
        key: null,
        namespace: 'App.Events',
    };
    
      protected setOptions(options: any): any {
        this.options = Object.assign(this._defaultOptions, options);

        let token = this.csrfToken();

        if (token) {
            this.options.auth.headers['X-CSRF-TOKEN'] = token;
            this.options.userAuthentication.headers['X-CSRF-TOKEN'] = token;
        }

        token = this.options.bearerToken;

        if (token) {
            this.options.auth.headers['Authorization'] = 'Bearer ' + token;
            this.options.userAuthentication.headers['Authorization'] = 'Bearer ' + token;
        }

        return options;
    }

in request.ts:

const fetchRequest = (connectionId) => fetch(route, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Socket-Id': connectionId,
                'X-XSRF-TOKEN': csrfToken,
                'Authorization': 'Bearer token...' // add this header authorization to connect with /broascasting/auth
            },
            body: JSON.stringify(data || {}),
        }).then((response) => {
            return response.headers.get('content-type') === 'application/json' ? response.json() : response;
        });

[ezequidias]

I made some adjustments to laravel-wave-js ! to work with csrf-token and token bearer!

take a look at my updates and see if everything is ok?

pull laravel-wave-js