​

Courier Inbox

The Courier Inbox acts as a convenient in-app notification feed with a clean interface where users can view notifications in real time directly inside your web app. It also lets them view their message history of all past notifications that you’ve sent to them.

​

Installation

To integrate the Inbox feature, you’ll need a backend to retrieve messages. This functionality is managed through the CourierProvider and requires an active Courier account.

Steps to Set Up Inbox:

This setup enables seamless message retrieval for the Inbox.

​

JWTs

A JWT should be generated on a per-user basis in your backend and be supplied to your frontend. When using JWT authentication, be sure to enable JWT support on the Courier Inbox Provider

The recommended way of doing authentication with Courier Inbox is to generate a JWT token for each user using the inbox.

The required scopes are the following:

• read:messages - Courier can fetch the messages
• write:events - Courier can create events like read/unread/archive

An example payload to the issue-token api looks like :

{
  "scope": "user_id:{{userId}} inbox:read:messages inbox:write:events"
}

​

CourierProvider

Install the following packages to get started:

yarn add/npm i @trycourier/react-provider
yarn add/npm i @trycourier/react-inbox

In order for the Inbox component to be placed in the dom you will need to use the CourierProvider. This will handle context and give us access Courier’s backend API.

The CourierProvider & Inbox hierarchy:

//App.js
import { CourierProvider } from "@trycourier/react-provider";
import { Inbox } from "@trycourier/react-inbox";

function App() {
  return (
    <CourierProvider>
      <Inbox />
    </CourierProvider>
  );
}

​

Implementation

To implement the Courier Inbox in a React application, you can use the @trycourier/react-inbox package mentioned previously, which provides components for integrating a notification inbox seamlessly. Here’s a basic example:

//App.js
import { useState, useEffect } from "react";
import { CourierProvider } from "@trycourier/react-provider";
import { Inbox } from "@trycourier/react-inbox";

function App() {
  const [authorization, setAuthorization] = useState();

  useEffect(() => {
    const response = await fetchAuthToken();
    setAuthorization(response.token);

    const interval = setInterval(async () => {
      const response = await fetchAuthToken();
      setAuthorization(response.token);
    }, 300000);

    return () => clearInterval(interval);
  }, []);

  return (
    <CourierProvider userId={yourUserId} authorization={authorization}>
      <Inbox />
    </CourierProvider>
  );
}

​

Sending Inbox Messages

In your frontend, the Inbox component will be visible straight away as a bell icon. Clicking this will initially show you an empty inbox until you start sending messages.

​

Send a Notification to Inbox

The fastest way to test this is to send a request to the Courier API.

// https://api.courier.com/send
{
    "message": {
          "to": {
            "user_id":"<YOUR_COURIER_USER_ID>", // user_id must have the appropriate JWT permissions mentioned previously
          },
          "content": {
            "title":"Push up!",
            "body":"Hi {{name}}, just testing that the notification displays as a toast."
          },
          "routing": {
            "method":"single",
            "channels":["inbox"]
          },
          "data": {
            "name":"<YOUR_NAME>"
          }
    }
}

You should now be able to see your message displayed in the Inbox.