User authorization for react component
I just came across novu and seems very helpful, I'm trying to integrate it with my nextjs app.
I cannot figure out how to enable user authz, this seems pretty open and could easily leak other peoples' notifications if their id is known. Is there a way to add some sort of authz here? I'm intrested in using novu cloud.
Solution:Jump to solution
Hey @onestyle check out this guide about React InApp, the section about HMAC is what you are looking for https://docs.novu.co/notification-center/client/react/get-started#hmac-encryption
Novu
React Get Started - Novu
Learn how to add novu powered In-App notification center to your React app
6 Replies
Hi @onestyle, I'm an AI assistant for Novu. While a team member reviews this question, I'll look through relevant sources and see if I can provide suggestions. Please tag @Ask Inkeep with any follow-up questions.
-----------------------------
While I generate an answer, here are some sources that might be helpful:
* Vue
* Get active integrations
* Node.js
* Subscribers
-----------------------------
Answer
Integrating Novu with your Next.js app and ensuring secure authorization is crucial to protect user notifications. While the provided documents do not explicitly detail authorization mechanisms for Next.js, they offer insights into handling subscriber IDs which are essential for targeting notifications to specific users securely.
One general approach to secure authorization involves using unique
subscriberIds that represent individual users within your system. This ID should ideally come from your authentication system or database to ensure each user receives only their notifications. For instance, if you're using Auth0, you could use the Auth0 generated user ID as the subscriberId in Novu (1) .
Additionally, it's important to consider security practices around handling subscriberIds. While specific authorization mechanisms (like JWT tokens or secure hashing) aren't detailed in the provided documents, ensuring that these IDs are securely stored and transmitted is essential. One approach, as discussed in a related context, involves hashing the subscriberId with additional information like a timestamp to increase security (2) .
For integrating Novu with Next.js, while there's no direct mention of authorization, an example demonstrates integrating Novu with a React-based app, which Next.js also utilizes (3) . This example, along with practices for securely handling subscriberIds, could serve as a starting point for building a secure notification system within your Next.js application.
In summary, use unique, securely handled subscriberIds from your authentication system for targeting notifications. While the documents don't provide a Next.js-specific authorization guide, employing secure ID handling practices and reviewing available integration examples can help create a secure setup.
Got it. Tagging @Support for additional help.
User Id could be leak in some way or another, I don't think allowing anyone to openly request any users' notification without any kind of authz
Solution
Hey @onestyle check out this guide about React InApp, the section about HMAC is what you are looking for https://docs.novu.co/notification-center/client/react/get-started#hmac-encryption
Novu
React Get Started - Novu
Learn how to add novu powered In-App notification center to your React app
This will allow you to secure the request with the server, and thus solve issues with feed being leaked to someone who hold the subscriber (user) id.