403 Forbidden on /broadcasting/auth with Sanctum and custom API prefix

[mawuli-agbenyo-creator]

Laravel Version

12.10.2

PHP Version

8.3.11

Database Driver & Version

No response

Description

When using Sanctum with API token authentication and configuring Broadcast::routes() with a custom prefix (e.g., api) and middleware ['auth:sanctum'], the /api/broadcasting/auth route returns a 403 AccessDeniedHttpException.

Even with valid tokens and a verified user (via Auth::check()), access is still denied.

The route is correctly listed via php artisan route:list:

Steps To Reproduce

POST | api/broadcasting/auth | ... Illuminate\Broadcasting\BroadcastController@authenticate

`// Enhanced pusherSetup.tsx for third-party Pusher
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
import { API_BASE_URL } from '@/constants/config';

// Disable Pusher logs for production
// Pusher.logToConsole = DEV; // Only log in development

// Make Pusher available on window
// @ts-ignore
window.Pusher = Pusher;

// Pusher Configuration - Replace with your Pusher app credentials
const PUSHER_APP_KEY = ''; //
const PUSHER_CLUSTER = 'us2'; // Your Pusher cluster (e.g., 'us2', 'eu', 'ap3')

const createEcho = (userToken: string): Echo | null => {
console.log(Creating Echo instance with Pusher and token: ${userToken});

if (!userToken) {
console.error('User token is required to create Echo instance');
return null;
}

try {
return new Echo({
broadcaster: 'pusher', // Changed from 'reverb' to 'pusher'
key: PUSHER_APP_KEY,
cluster: PUSHER_CLUSTER,
forceTLS: true, // Always use TLS with Pusher
encrypted: true, // Always encrypt with Pusher

  // Authentication for private/presence channels
  auth: {
    headers: {
      'Authorization': `Bearer ${userToken}`,
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    }
  },
  
  // Optional: Custom authorizer for more control
  authorizer: (channel: any, options: any) => {
    return {
      authorize: (socketId: string, callback: Function) => {
        // Make request to your Laravel app's broadcasting/auth endpoint
        fetch(`${API_BASE_URL}/broadcasting/auth`, {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${userToken}`,
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            socket_id: socketId,
            channel_name: channel.name
          })
        })
        .then(response => response.json())
        .then(data => {
          callback(false, data);
        })
        .catch(error => {
          console.error('Auth error:', error);
          callback(true, error);
        });
      }
    };
  },
  
  // Additional Pusher-specific options
  enabledTransports: ['ws', 'wss'],
  disabledTransports: [], // Don't disable any transports
  
  // Connection options
  wsHost: `ws-${PUSHER_CLUSTER}.pusher.com`,
  wsPort: 80,
  wssPort: 443,
  
  // Optional: Activity timeout (default is 120000ms)
  activityTimeout: 120000,
  
  // Optional: Pong timeout (default is 30000ms)  
  pongTimeout: 30000
});

} catch (error) {
console.error('Error creating Echo instance:', error);
return null;
}
};

// Alternative simplified configuration if you don't need custom auth
export const createEchoSimple = (userToken: string): Echo | null => {
if (!userToken) {
console.error('User token is required to create Echo instance');
return null;
}

try {
return new Echo({
broadcaster: 'pusher',
key: PUSHER_APP_KEY,
cluster: PUSHER_CLUSTER,
forceTLS: true,
auth: {
headers: {
'Authorization': Bearer ${userToken},
}
}
});
} catch (error) {
console.error('Error creating simple Echo instance:', error);
return null;
}
};

// Default export
export default createEcho;`

Register broadcast routes like this

`<?php

// app/Providers/BroadcastServiceProvider.php
namespace App\Providers;

use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\ServiceProvider;

class BroadcastServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*/
public function boot(): void
{

    // Broadcast::routes(['middleware' => ['auth:sanctum']]);
     Broadcast::routes([
    'prefix' => 'api',
    'middleware' => ['api', 'auth:sanctum'],
]);
    
   
    require base_path('routes/channels.php');
}

} const setupReverb = async (userToken: any) => {
try {
console.log('Setting up Pusher connection...');

  const echo = createEcho(userToken);
  if (!echo) {
    console.error('Failed to create Echo instance');
    return;
  }

  echoRef.current = echo;

  // Add connection status listeners for Pusher
  echo.connector.pusher.connection.bind('connected', () => {
    console.log('CONNECTED TO PUSHER! Socket ID:', echo.socketId());
    setReverbInitialized(true);
  });

  echo.connector.pusher.connection.bind('disconnected', () => {
    console.log('Disconnected from Pusher');
    setReverbInitialized(false);
  });

  echo.connector.pusher.connection.bind('error', (error: any) => {
    console.error('Pusher connection error:', error);
    setReverbInitialized(false);
  });

  // Additional Pusher-specific events
  echo.connector.pusher.connection.bind('connecting', () => {
    console.log('Connecting to Pusher...');
  });

  echo.connector.pusher.connection.bind('unavailable', () => {
    console.error('Pusher connection unavailable');
    setReverbInitialized(false);
  });

  if (!isOfferConversation || conversation) {
    const channelName = `conversation.${id}`;

    try {
      console.log(`Subscribing to channel: ${channelName}`);

      // For Pusher, decide between public and private channels
      // Use private channel for authenticated conversations
      const channel = echo.private(channelName); // or echo.channel() for public

      channel.subscribed(() => {
        console.log(`Successfully subscribed to ${channelName}`);
      });

      channel.error((error: any) => {
        console.error(`Error subscribing to ${channelName}:`, error);
      });

      // Listen for message events (Pusher automatically handles the dot prefix)
      channel.listen('MessageSent', (data: any) => { // Event class name without namespace
        console.log(`New message received on ${channelName}:`, data);

        // More robust message validation
        if (!data || !data.message || !data.message.id) {
          console.warn('Received invalid message data:', data);
          return;
        }

        const message = data.message; // Pusher typically wraps data in an object

        // Prevent adding our own messages and duplicates
        if (message.senderId !== currentUserId) {
          console.log('Adding new message to state:', message);

          setMessages(prevMessages => {
            // Check for duplicates by message ID
            const messageExists = prevMessages.some(msg => msg.id === message.id);
            if (messageExists) {
              console.log('Message already exists, skipping:', message.id);
              return prevMessages;
            }

            // Add new message
            const newMessages = [...prevMessages, message];
            return newMessages;
          });

          // Scroll to bottom with a slight delay to ensure message is rendered
          setTimeout(() => {
            scrollViewRef.current?.scrollToEnd({ animated: true });
          }, 100);
        }
      });

      // Optional: Listen for typing indicators
      channel.listen('UserTyping', (data: any) => {
        console.log('User typing:', data);
        // Handle typing indicator
      });

      // Optional: Listen for message status updates  
      channel.listen('MessageRead', (data: any) => {
        console.log('Message read:', data);
        // Update message read status
        if (data.messageId) {
          setMessages(prevMessages =>
            prevMessages.map(msg =>
              msg.id === data.messageId ? { ...msg, read: true } : msg
            )
          );
        }
      });

      console.log('Channel subscription complete');
    } catch (subscribeError) {
      console.error('Error subscribing to channel:', subscribeError);
    }
  }
} catch (error) {
  console.error('Error setting up Pusher:', error);
  setReverbInitialized(false);
}

}; routes/channel.php <?php

use App\Models\Conversation;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\Facades\Log;

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
Auth::check();
return (int) $user->id === (int) $id;
});

// Authorize conversation channels
Broadcast::channel('conversation.{conversationId}', function ($user, $conversationId) {
// Check if user is participant in this conversation
Auth::check();

$conversation = Conversation::find($conversationId);

Log::info('Checking conversation access', [
    'user_id' => $user->id,
    'conversation_id' => $conversationId,
    'conversation' => $conversation,
]);

if (!$conversation) {
    return false;
}

// Check if user is a participant
$participants = $conversation->participants ?? [];
return in_array($user->id, $participants) || 
       $conversation->sender_id === $user->id || 
       $conversation->receiver_id === $user->id;

});

// Optional: Presence channel for online status
Broadcast::channel('conversation-presence.{conversationId}', function ($user, $conversationId) {
$conversation = Conversation::find($conversationId);

Auth::check();

Log::info('Checking presence channel access', [
    'user_id' => $user->id,
    'conversation_id' => $conversationId,
    'conversation' => $conversation,
]);

if (!$conversation) {
    return false;
}

$participants = $conversation->participants ?? [];
if (in_array($user->id, $participants) || 
    $conversation->sender_id === $user->id || 
    $conversation->receiver_id === $user->id) {
    
    return [
        'id' => $user->id,
        'name' => $user->name,
        'avatar' => $user->avatar,
    ];
}

return false;

});`