Auth info required to subscribe to private-channel Pusher JS

Hey Guys I need your help since I've posted this for couple of times and didn't get a useful answer ,I'm using pusher js and I'm trying to listen for a private channel.. I've this code below in my react js app

 componentDidMount() {
 
if(localStorage.getItem('user')){
  
  var pusher = new Pusher('23525de46fdea6e17af3', {

    authEndpoint: 'http://localhost/crud-app/public/api/broadcast/authorize',
    cluster: 'eu',
    encrypted: true,
    auth:{
        headers:{
          'Accept':'application/json',
          'Authorization': `Bearer ${localStorage.userToken}`
        }
      }
  });
  const id=JSON.parse(localStorage.getItem('user')).id
  
  const channel = pusher.subscribe('private-post'+id);
    channel.bind('App\Events\NewPost', data => {
alert('data recieved !');

})

}




  }

For the back side

I have this function below for authentication

public function handleAuthorizeUser(Request $request){


    $user = auth()->user();
    if ($user) {
        $pusher = new \Pusher(config('broadcasting.connections.pusher.key'), config('broadcasting.connections.pusher.secret'), config('broadcasting.connections.pusher.app_id'));
        $auth=$pusher->socket_auth($request->input('channel_name'), $request->input('socket_id'));
        return response()->json([$auth]);
    }else {
        header('', true, 403);
        echo "Forbidden";
        return response()->json(['statut'=>403]);
    }


}

This is the event that I'm firing

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class NewPost implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

   public $post;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($post)
    {
        $this->post=$post;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('post'.$this->post->user_id);
    }
}

and finally this is the content inside channels.php

Broadcast::channel('post.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

I don't see any error in the console ! except that in pusher dashboard whenever I refresh the page I get Auth info required to subscribe to private-post1

Thank you in advance