Novu•11mo 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;

// 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;

// 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

Pawan Jain•2/16/25, 12:36 PM

@olivemonk

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

olivemonkOP•2/17/25, 2:19 PM

@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•2/18/25, 8:26 PM

@olivemonk

Can you please check the error in console or network tab

Pawan Jain•2/19/25, 2:09 PM

@olivemonk ping!

olivemonkOP•2/19/25, 5:23 PM

im getting 400 bad request

olivemonkOP•2/19/25, 5:36 PM

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

Novu_Bot•2/19/25, 5:36 PM

@olivemonk, you just advanced to level 1!

Pawan JainAPP•2/19/25, 6:11 PM

please share the response from the network tab for this request

olivemonkOP•2/19/25, 6:20 PM

@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•2/19/25, 8:54 PM

you need to turn off this option in-app integration

Pawan Jain•2/19/25, 8:54 PM

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•2/20/25, 2:53 PM

yeap it worked, thanks for the help @Pawan Jain

olivemonkOP•2/20/25, 2:54 PM

I tried novu, novu-cloud is amazing loved it, you guys are doing great work

Issues with the inbox component

Similar Threads

Similar Threads

Similar Threads