Skip to main content

CourierProvider

Make sure you've installed the Courier into your workspace before attempting to integrate these components.

Github Docs: @trycourier/react-provider

All of Courier's react components require the CourierProvider which is responsible for all the API calls, authentication, and state management.

Check here for more information on the React Context concept.

Installation​

yarn add @trycourier/react-provider

or 

npm i @trycourier/react-provider

Authentication​

No Auth Enabled​

import { CourierProvider } from "@trycourier/react-provider";
// const CourierProvider = require("@trycourier/react-provider").CourierProvider;

import { Inbox } from "@trycourier/react-inbox";
// const Inbox = require("@trycourier/react-inbox").Inbox;

function App() {
  // YOUR_CLIENT_KEY is a public facing key and can be found at https://app.courier.com/channels/courier
  return (
    <CourierProvider userId={yourUserId} clientKey={process.env.YOUR_CLIENT_KEY}>
      <Inbox />
    </CourierProvider>
  );
}

JWT Auth Enabled​

import { useState, useEffect } from "react";
import { CourierProvider } from "@trycourier/react-provider";
// const CourierProvider = require("@trycourier/react-provider").CourierProvider;

import { Inbox } from "@trycourier/react-inbox";
// const Inbox = require("@trycourier/react-inbox").Inbox;

function App() {
  const [authentication, setAuthentication] = useState();

  useEffect(() => {
    const response = await fetchJWTAuthTokenFromYourBackend();
    setAuthentication(response);
  }, []);

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

HMAC Auth Enabled​

import { useState, useEffect } from "react";
import { CourierProvider } from "@trycourier/react-provider";
// const CourierProvider = require("@trycourier/react-provider").CourierProvider;

import { Inbox } from "@trycourier/react-inbox";
// const Inbox = require("@trycourier/react-inbox").Inbox;

function App() {
  const [userSignature, setUserSignature] = useState();

  useEffect(() => {
    const response = await fetchHMACUserSignatureFromYourBackend();
    setUserSignature(response);
  }, []);

  return (
    <CourierProvider 
      clientKey={process.env.CLIENT_KEY} 
      userId={yourUserId} 
      userSignature={userSignature}>
      <Inbox />
    </CourierProvider>
  );
}