Updating the Authorization-header

[petervmeijgaard]

So I have a single page application with authorization setup. When the app boots, it will check if the user is authenticated. If not, the user is send to the login page, if so, the app sets the Authorization header of the requests to the token saved in localStorage.
This is working fine, but when I want to login and update the Authorization token, the update isn't reflected and I have to manually refresh the page to make the request with the token.

As you can see here, I set the token correctly:
https://github.com/petervmeijgaard/jwt-example/blob/next/resources/frontend/src/app/store/modules/auth/mutations.js#L24

And even when I do a console.log(Vue.echo.options.auth.headers.Authorization) before I subscribe to a private channel, I get the correct token returned.
However, when I check the request send to the REST-server, the Authorization header isn't set.

The console.log ouput:

The request headers:

[kubacode]

@petervmeijgaard Have you been able to get the Authorisation header set? I'm also running into this issue.

[petervmeijgaard]

@kubacode Nope, I still haven't figured out how to get it working 😞

[kubacode]

@petervmeijgaard I think I've figured it out. The Authorization header isn't sent by Echo, its sent by Pusher. Setting the Authorization header in Echo only sets the header when the Pusher instance is constructed.

To set the Authorization header on the fly, you need to set the header on the Pusher object:

Echo.connector.pusher.config.auth.headers['Authorization'] = 'Bearer token';

I'm using the vue-auth plugin, so I'm able to add the header by overriding the _setHeaders function. You should also be able to set the header via a vue-resource interceptor.

[wiretail]

Setting the pusher config directly did not work for me (and I'm not using vue-resource) -- but this solution worked: tlaverdure/laravel-echo-server#129 (comment)

In my case I'm, using vue-echo on top of Echo, but the config block should work directly in Echo as well. For example:

           Vue.use(VueEcho, {
                broadcaster: 'pusher',
                key:         PUSHER_KEY,
                auth:        {
                    headers: {
                        Authorization: 'Bearer ' + BEARER_TOKEN,
                    },
                },
            });

...and setting:

Broadcast::routes(['middleware' => ['auth:api']]);

...in BroadcastServiceProvider as well.

[antonkomarev]

This works for me:

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
        headers: {
            'Authorization': 'Bearer ******'
        }
    }
});

[Krofek]

To set on the fly for socket.io:
Echo.connector.options.auth.headers['Authorization'] = 'Bearer ' + token

[chimit]

Need a special method in Echo instance to set parameters (at least headers and authEndpoint) on the fly.

[antonkomarev]

@chimit make a PR then.

[ibrahimshaer]

Hello, I had the same problem ,and it took me some time to figure it out. I was using pusher as my broadcasting driver. The first step required changing broadcasting middleware to Broadcast::routes(['middleware' => ['api', 'jwt.auth']]); because I am using jwt authentication.
This required sending the jwt token from the client-side upon registering to laravel-echo along with changing the authEndpoint as I was using a virtual host.
The resulting laravel-echo configuration is as follows:

window.Echo = new Echo({
broadcaster: 'pusher',
key: 'PUSHER_KEY',
authEndpoint :'http://virtual_host/broadcasting/auth',
auth: {
headers: {
Authorization: 'Bearer ' + CLIENT_TOKEN,
}
},
cluster: 'PUSHER_CLUSTER',
encrypted: true
});

I hope my answer will help you.

[pwnz22]

I have SPA with JWT AUTH.
When i join to presence channel i'm registering Echo in the component.

    window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: window.location.hostname + ':6001',
        auth: {
            headers: {
                Authorization: 'Bearer ' + token // user token after auth
            }
        }
    })

here is component code:

 methods: {

         listenForBroadcast () {
             const token = this.$auth.token()
             if (typeof io !== 'undefined' && token) {
                 window.Echo = new Echo({
                     broadcaster: 'socket.io',
                     host: window.location.hostname + ':6001',
                     auth: {
                         headers: {
                             Authorization: 'Bearer ' + token
                         }
                     }
                 })
             } else {
                 console.log('token error')
             }

             window.Echo.join('test')
                 .here(users => {
                     console.log(users, 'users')
                 })
                 .joining(user => {
                     console.log(user, 'joining user')
                 })
                 .leaving(user => {
                     console.log(user, 'leaving')
                 })
                 .listen('MessagePushed', e => {
                     console.log(e)
                 })
         },
     },

     mounted () {
         this.listenForBroadcast()
     }

but i'm thinking it's not best practice.
Is there something wrong i'm doing?

[unickortega]

I had the same issue. But mine was 405 method not allowed.
I added added App\Providers\BroadcastServiceProvider::class provider in the config/app.php file.
Then I entered php artisan config:cache command.

[jacinto-joao]

Hi Guys,

I'm facing similar issue using Nuxt js, I can't get any events broadcasted on frontend side.

It's have been days so far trying to get it working, i have looked entire googling but nothing is out there envolving laravel-echo with pusher-js using Nuxtjs.

And the funny thing is that I got the same scripts working on the demo side, which I made for testing, using Laravel with Vuejs setup without any API, it works properly.

But now I've created any standalone Nuxtjs project and using Laravel for Backend, and I can't get the events working.

If I check on Pusher Console, I get the broadcast, but nothing is firing on the frontend,

tried all tricks, renaming the Namespace of Echo, using . on Event but nothing works.

Below the code

Echo Integration

`import LaravelEcho from "laravel-echo"

export default ({ app, redirect }) => {
const token = localStorage.getItem('auth._token.local')

window.Pusher = require('pusher-js');

window.Echo = new LaravelEcho({
    authEndpoint: `${process.env.apiUrl}accounts/broadcast`,
    broadcaster: 'pusher',
    key: 'mykeysgoeshere',
    cluster: 'eu',
    auth: {
        headers: {
            Authorization: `${token}`
        },
    },
});

}
`

channels.php

Broadcast route

Broacast call

Broadcast Provider

One of the thing which I'm not sure about all of this is how to check broacasting/auth which above I just check if the user is Authenticated or not.

But any help will be appreciated, or any advice if someone tried echo with pusher using Nuxtjs.

[unr]

Hey @jjoao07, hope I can help you a bit.

I think your biggest issue, is trying to set up a window.Echo instance, in your js App.
Good chance you're calling things too early in the lifecycle to hook up into it properly...

--

Here's an example of how I'm working pusher on my app in nuxt.js. I've set it up as a Vuex Module, so I can easily call it and check instances in my app...

For now, I've dealt with logged in/out states as different echo instances. But I'm working on trying to solve that problem too....

https://gist.github.com/unr/345fe5c9daf7e5daffa1f23842d2c9ab

You can see how I've tried to set up my module, and call it from my main layouts in this gist.

I would ignore some of my refresh-csrf stuff in this gist tho... likely don't need it. It's a poor route to refresh it on the frontend in really fringe cases.