Search code examples
pubnub

pubnub exposed subcribe key and publish key in frontend

I am developing a chat app and in frontend i am using reactjs

for reactjs, i am using this library: https://www.npmjs.com/package/pubnub-react

I see here, the subcribe and publish key is exposed in frontend, My question is, it it secure to add such key in frontend?

here you go for sample code:

const pubnub = new PubNub({
  publishKey: 'myPublishKey',
  subscribeKey: 'mySubscribeKey',
  uuid: 'myUniqueUUID'
});
Solution

  • PubNub Access Manager

    Quote from Stephen Blum (founder and CTO of Pubnub) from an answer to a duplicate question:

    This is the same problem with Facebook. I can open your FB page and copy your auth_key from the network tab and gain access to your Facebook page. You must treat your PubNub auth_key the same as you would a secret intended only for the user. This is like a Session Key/ID that allows access to a data stream, similar to the way Netflix, Spotify, Facebook and Gmail provide a secure access layer.

    To summarize, you cannot hide the PN keys but you can secure them by enabling and implementing PubNub Access Manager.

    PubNub Access Manager High Level Process Flow

    Read the docs from the link above, but this question has also been answered a couple of times before on Stack Overflow. The code samples there are older but the concept is the same:

    Also, always pass the pub/sub keys back to the client app from your server (along with the auth-key and the UUID) rather than hardcoding them into the client code. This allows you to swap the keys if you ever need to do so. It's rare but can be super-useful if you ever need to.