Novu•3mo ago

Issues with the inbox component

Hello everyone, so basically i created an account on novu cloud and also created a dummy react app, in that i used the react example of novu inbox component and used it with my applicationIdentifier and subscriberId but still I'm not getting the notifications when I'm triggering the notification for the same subscriberId from novu cloud i have attached the react component below

// Inbox.tsx
import { Inbox } from "@novu/react";
import { useNavigate } from "react-router-dom";

function NovuInbox() {
  const navigate = useNavigate();

  return (
    <Inbox
      applicationIdentifier="aCs1wc4F2axM"
      subscriberId="b92f5c1a37d84eb2007e6faa"
      routerPush={(path: string) => navigate(path)}
      appearance={{
        variables: {
          colorPrimary: "#1990FE",
          colorForeground: "#D1D1D0",
          borderRadius: "0px",
        },
      }}
    />
  );
}

export default NovuInbox;

// Inbox.tsx
import { Inbox } from "@novu/react";
import { useNavigate } from "react-router-dom";

function NovuInbox() {
  const navigate = useNavigate();

  return (
    <Inbox
      applicationIdentifier="aCs1wc4F2axM"
      subscriberId="b92f5c1a37d84eb2007e6faa"
      routerPush={(path: string) => navigate(path)}
      appearance={{
        variables: {
          colorPrimary: "#1990FE",
          colorForeground: "#D1D1D0",
          borderRadius: "0px",
        },
      }}
    />
  );
}

export default NovuInbox;

// App.tsx
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import NovuInbox from "./Inbox";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/inbox" element={<NovuInbox />} />
      </Routes>
    </Router>
  );
}

export default App;

// App.tsx
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import NovuInbox from "./Inbox";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/inbox" element={<NovuInbox />} />
      </Routes>
    </Router>
  );
}

export default App;

I have attached images for successful completion of workflow, but inside inbox component nothing is showing up. @DevRel @Support @Community Support

11 Replies

Pawan Jain•3mo ago

@olivemonk in above code and second image of code sandbox, subscriberid and application identifier is different. Use correct credentials

olivemonkOP•3mo ago

@Pawan Jain I was using the same ids but i changed it with dummy values for security purpose, but I forgot to change it in code editor.

Pawan Jain•2mo ago

@olivemonk Can you please check the error in console or network tab @olivemonk ping!

olivemonkOP•2mo ago

im getting 400 bad request

olivemonkOP•2mo ago

@Pawan Jain do i need to deploy the app first?

Novu_Bot•2mo ago

@olivemonk, you just advanced to level 1!

Pawan Jain•2mo ago

please share the response from the network tab for this request

olivemonkOP•2mo ago

@Pawan Jain

{
    "error": "Bad Request",
    "statusCode": 400,
    "timestamp": "2025-02-19T18:19:36.436Z",
    "path": "/v1/inbox/session/",
    "message": "Please provide a valid HMAC hash",
    "ctx": {
        "error": "Bad Request",
        "statusCode": 400
    }
}

{
    "error": "Bad Request",
    "statusCode": 400,
    "timestamp": "2025-02-19T18:19:36.436Z",
    "path": "/v1/inbox/session/",
    "message": "Please provide a valid HMAC hash",
    "ctx": {
        "error": "Bad Request",
        "statusCode": 400
    }
}

Pawan Jain•2mo ago

you need to turn off this option in-app integration

Pawan Jain•2mo ago

https://docs.novu.co/inbox/react/production#enabling-hmac-encryption

Novu

Production Setup for React - Novu

Learn how to prepare your React notification inbox for production deployment including HMAC encryption and security best practices.

olivemonkOP•2mo ago

yeap it worked, thanks for the help @Pawan Jain I tried novu, novu-cloud is amazing loved it, you guys are doing great work 🙏

Gaming

Programming

Issues with the inbox component

Did you find this page helpful?