Join_meeting_failed with 200 - Laravel PHP

[itlh2022 (ITLH)]

Description
Trying to integrate meeting web SDK using Laravel PHP

Browser Console Error

errorCode: 200
reason: "Fail to join the meeting."
type: "JOIN_MEETING_FAILED

Which Web Meeting SDK version?
2.4.5

Meeting SDK Code Snippets
Frontend Footer:

<script src="https://source.zoom.us/2.4.5/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/2.4.5/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/2.4.5/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/2.4.5/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/2.4.5/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/2.4.5/zoom-meeting-embedded-2.4.5.min.js"></script>

    <script>
        const client = ZoomMtgEmbedded.createClient();
        let meetingSDKElement = document.getElementById('meetingSDKElement');
        client.init({
            debug: true,
            zoomAppRoot: meetingSDKElement,
            language: 'en-US'
        })

        client.join({
            sdkKey: '{{ config('services.zoom.key') }}',
            signature: '{{ $zoomSignature }}', // role in SDK Signature needs to be 0
            meetingNumber: '{{ $zoomMeetingId }}',
            // password: '',
            userName: 'John Doe'
        })
    </script>

Backend:

class CourseController extends Controller
{
    public function show(Request $request)
    {
        $zoomMeetingId = '89215861167';
        $zoomSignature = $this->generate_signature(
            config('services.zoom.key'),
            config('services.zoom.secret'),
            $zoomMeetingId,
            0
        );

        return view('student.course', compact('zoomSignature', 'zoomMeetingId'));
    }

    private function generate_signature($api_key, $api_secret, $meeting_number, $role)
    {
        $now = Carbon::now();

        //build the headers
        $headers = ['alg' => 'HS256', 'typ' => 'JWT'];
        $headers_encoded = $this->base64url_encode(json_encode($headers));

        //build the payload
        $payload = [
            'mn' => $meeting_number,
            'role' => $role,
            'iat' => $now->timestamp,
            'exp' => $now->addSeconds(1800)->timestamp
        ];
        $payload_encoded = $this->base64url_encode(json_encode($payload));

        //build the signature
        $signature = hash_hmac('SHA256', "$headers_encoded.$payload_encoded", $api_secret, true);
        $signature_encoded = $this->base64url_encode($signature);

        $token = "$headers_encoded.$payload_encoded.$signature_encoded";

        // Log::debug($token);
        return $token;
    }

    private function base64url_encode($data)
    {
        return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
    }
}

Screenshots

Device (please complete the following information):

• Device: [Macbook Pro]
• OS: [macOS 12]
• Browser: [Chrome]
• Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]

Additional context
Already tried following the PHP signature generator mentioned at Generate Signature which returns an invalid signature error. Then refactored backed signature logic to the above referring SDK Authorization