Skip to main content

​
Installation

To implement Inbox in React, you’ll need a backend to retrieve messages. This functionality is managed through the CourierInbox component and requires an active Courier account. Steps to Set Up Inbox:
1

Install the Courier React SDK

Install the Courier React v8 SDK package for your React version.
npm install @trycourier/courier-react

//App.js
import { CourierInbox } from "@trycourier/courier-react";

function App() {
  return <CourierInbox />;
}
2

Create a JWT

After installation, you’ll need a JWT to authenticate your users. A JWT should be generated on a per-user basis in your backend and be supplied to your frontend. The required scopes are the following:
  • read:messages - Courier can fetch the messages
  • write:events - Courier can create events like read/unread/archive
You can designate how long tokens last by passing an expires_in property to the token generation.
An example payload to the issue-token API looks like :
{
  "scope": "user_id:{{userId}} inbox:read:messages inbox:write:events",
  "expires_in": "1d"
}
3

Configure the CourierInbox

Use JWTs to initialize and configure the CourierInbox component in your application. Here’s a complete example with JWT authentication:
//App.js
import { useState, useEffect } from "react";
import { CourierInbox, useCourier } from "@trycourier/courier-react";

function App() {
  const [courierJwt, setCourierJwt] = useState();
  const [userId] = useState(<YOUR_COURIER_USER_ID>);
  const courier = useCourier();

  const generateCourierJwt = async () => {
    // Pass user ID to your backend to generate a JWT
    const response = await fetch(`/api/generate-courier-jwt`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ userId })
    });
    const { token } = await response.json();
    setCourierJwt(token);
  };

  // When the userId in the app changes,
  // generate a new JWT to sign in to the Courier SDK
  useEffect(() => {
    generateCourierJwt();
  }, [userId]);

  // When courierJwt has been updated, call signIn
  useEffect(() => {
    if (courierJwt) {
      // Authenticate the user with the inbox
      courier.shared.signIn({ userId, jwt: courierJwt });
    }
  }, [courierJwt, userId]);

  return <CourierInbox />;
}

​
Send a Notification to Inbox

The fastest way to test your inbox is to send a request to the Courier API. 
// https://api.courier.com/send
{
    "message": {
          "to": {
            "user_id":"<YOUR_COURIER_USER_ID>",
          },
          "content": {
            "title":"Hello 👋 ",
            "body":"How are you today."
          },
          "routing": {
            "method":"single",
            "channels":["inbox"]
          },
          "data": {
            "name":"<YOUR_NAME>"
          }
    }
}
You should now be able to see your message displayed in the Inbox.

Inbox First Message