0

I am kind of new to React, so this might be just lack of experience, but I don't seem to find any answer to my question: I have a react app, where I need to subscribe to a push notification channel. Messages are delivered through PubNub, and in order to connect I need to supply a subscribe and a publish key to the message server. Now, I know it is not a good practice to store secrets in a react app, and they should be handled through backend services, but do I really need to create a service just to subscribe to the channel and forward the messages to my frontend app? Is this not an overkill?

The messages I am receiving are just time ticks (I need a trusted source of time), but I still don't want my API keys to leak out...

Is there any reasonably ok way for me to avoid standing up an intermediate service?

TamasGyorfi
  • 587
  • 1
  • 6
  • 14
  • Possible duplicate of [How to keep API keys secret when using client side Javascript?](https://stackoverflow.com/questions/7847121/how-to-keep-api-keys-secret-when-using-client-side-javascript) – falinsky Jun 29 '18 at 10:20
  • I don't think it would matter if your key leaks out though, It is supposed to be public, You must have set a domain in PubNub just like you do for facebook auth, it will only allow requests from that domain and protect you from CSRF. – supra28 Jun 29 '18 at 10:29

1 Answers1

1

It is perfectly normal to have your PubNub publish and subscribe keys in client side code. If it is necessary to restrict who has the power to publish and subscribe (read/write) using those keys, the developer can enable PubNub Access Manager (PAM) in the admin panel. There are PAM guides to get you started on controlling access.

Another point to consider is that your JavaScript PubNub connection can also be used as a trusted source of time. The JS SDK time call will get a 17 place precision unix timestamp from a PubNub node:

const pubnub = new PubNub({
  publishKey: 'your_free_pubnub_publish_key',
  subscribeKey: 'your_free_pubnub_subscribe_key'
});

let pojoDateObject;

pubnub.time().then((timetokenObject) => {
    pojoDateObject = new Date(+String(timetokenObject.timetoken).substring(0,13));
});
Adam
  • 659
  • 4
  • 13