Invalid data: only uncompressed keys are supported.

[OverFlow636]

When attempting to send a notification I get the following exception from the encryption attempt.
https://github.com/phpecc/phpecc/blob/0cb2c74fcc3f70b4c03cc486e1acb893c0b97f42/src/Serializer/Point/UncompressedPointSerializer.php#L67

My p256dh and auth key values look correct and are of the correct length.

Is there anything else i can try?

[Minishlink]

Hi,

Please make sure that the user public key and user auth token are base 64 encoded (in the MIME specification RFC2045).
A frequent mistake is to encode in URL-safe base 64.

To make sure, please send a dummy auth token/public key.

[OverFlow636]

Thanks this was the issue,

str_replace(['_', '-'], ['/', '+'], $in);

fixed it

[leonnduati]

Thanks this was the issue,

str_replace(['_', '-'], ['/', '+'], $in);

fixed it

How exactly did you solve this? By adding this or this was an erroneous line in your code?

[dashatan]

hello guys ,
i'v done everything as right as i could but error not solving
this is my code
Laravel :

<?php

namespace App\Notifications;

use App\Message;
use App\User;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Notification;
use Illuminate\Support\Facades\Log;
use NotificationChannels\WebPush\WebPushMessage;
use NotificationChannels\WebPush\WebPushChannel;

class NewMessageNotification extends Notification
{
//    use Queueable;
    protected $messageModel;
    protected $senderUser;

    /**
     * Create a new notification instance.
     *
     * @param User $senderUser
     * @param Message $message
     */
    public function __construct(User $senderUser, Message $message)
    {
        Log::info('notification constructed');
        $this->messageModel = $message;
        $this->senderUser = $senderUser;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param mixed $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return [WebPushChannel::class];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param mixed $notifiable
     * @param $notification
     * @return WebPushMessage
     */
    public function toWebPush($notifiable, $notification)
    {
        Log::info('notification sent');
        return (new WebPushMessage())
            ->title(__('new message'))
            ->icon($this->senderUser->avatar)
            ->body($this->senderUser->name .' : '. $this->messageModel->message);
//            ->action('reply', 'view_account')
//            ->options(['TTL' => 1000]);
        // ->data(['id' => $notification->id])
        // ->badge()
        // ->dir()
        // ->image()
        // ->lang()
        // ->renotify()
        // ->requireInteraction()
        // ->tag()
        // ->vibrate()
    }
}

JS :

import Store from "./components/redux/store";
import Axios from "axios";

let _registration;

export function register() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then((reg) => {
      console.log('serviceWorker registered')
      _registration = reg;
    }).catch((e) => {
      console.log('serviceWorker failed', e)
    })
  }
}

export function askPermission(userToken) {
  return new Promise((resolve, reject) => {
    const permissionResult = Notification.requestPermission(result => {
      resolve(result);
    })
    if (permissionResult) {
      permissionResult.then(resolve, reject);
    }
  }).then((permissionResult) => {
    if (permissionResult !== 'granted') {
      throw new Error('service worker permission denied');
    } else {
      console.log('permission granted');
      // subscribeUserToPush(userToken);
    }
  })
}

function getServiceWorkerRegistration() {
  return new Promise((resolve, reject) => {
    if (_registration !== null) {
      resolve(_registration);
    } else {
      reject(Error('it broke'));
    }
  });
}

function urlBase64ToUint8Array(base64String) {
  let padding = '='.repeat((
    4 - base64String.length % 4
  ) % 4);
  let base64 = (
    base64String + padding
  )
  .replace(/\-/g, '+')
  .replace(/_/g, '/');

  let rawData = window.atob(base64);
  let outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

function subscribeUserToPush(userToken) {
  getServiceWorkerRegistration()
  .then((registration) => {
    const subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(process.env.MIX_VAPID_PUBLIC_KEY),
    }
    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then((pushSubscription) => {
    console.log('received pushSubscription => ', pushSubscription);
    sendSubscriptionToBackEnd(pushSubscription, userToken);
    return pushSubscription;
  })
}

function sendSubscriptionToBackEnd(subscription, userToken) {
  const url = Store.getState().baseUrl + '/api/storeNotificationSubscription';
  let data = {
    userToken,
    subscription,
  }
  Axios.post(url, data).then(e => {
    console.log('storeNotificationSubscription was successful');
  }).catch(e => {
    console.log('storeNotificationSubscription failed')
    subscription.unsubscribe();
  })
}

[mreduar]

@dashatan How did you solve the problem?

[martijnimhoff]

I also had this issue. My mistake was that I put the auth and p256dh the wrong way around.

After swapping those variables, it worked!

[javaddev]

I also had this issue. My mistake was that I put the auth and p256dh the wrong way around.

After swapping those variables, it worked!

Me too,
p256dh must be placed in push_subscriptions.public_key attribute and
auth in push_subscriptions.auth_token
when using https://github.com/laravel-notification-channels/webpush