@knocklabs/react-core 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.2.5
+
+### Patch Changes
+
+- 10b5646: Include src files for react-core
+
+## 0.2.4
+
+### Patch Changes
+
+- bc69618: Add react-native to package.json files to fix a bug in our React Native SDK
+- Updated dependencies [bc69618]
+  - @knocklabs/client@0.9.3
+
 ## 0.2.3
 
 ### Patch Changes

package/package.json

@@ -2,22 +2,25 @@
   "name": "@knocklabs/react-core",
   "description": "A set of React components to build notification experiences powered by Knock",
   "author": "@knocklabs",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
+  "react-native": "./src/index.ts",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.mjs",
       "types": "./dist/types/index.d.ts",
+      "react-native": "./src/index.ts",
       "default": "./dist/cjs/index.js"
     }
   },
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "scripts": {
@@ -45,7 +48,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@knocklabs/client": "^0.9.2",
+    "@knocklabs/client": "^0.9.3",
     "@tanstack/react-query": "^5.18.1",
     "date-fns": "^3.3.1",
     "zustand": "^3.7.2"

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./modules/core";
+export * from "./modules/feed";
+export * from "./modules/slack"
+export * from "./modules/i18n";

package/src/modules/core/constants.ts

@@ -0,0 +1,8 @@
+export enum FilterStatus {
+  All = "all",
+  Read = "read",
+  Unseen = "unseen",
+  Unread = "unread",
+}
+
+export type ColorMode = "light" | "dark";

package/src/modules/core/context/KnockProvider.tsx

@@ -0,0 +1,82 @@
+import Knock, { AuthenticateOptions, LogLevel } from "@knocklabs/client";
+import * as React from "react";
+
+import { I18nContent, KnockI18nProvider } from "../../i18n";
+import { useAuthenticatedKnockClient } from "../hooks";
+
+export interface KnockProviderState {
+  knock: Knock;
+}
+
+const ProviderStateContext = React.createContext<KnockProviderState | null>(
+  null,
+);
+
+export interface KnockProviderProps {
+  // Knock client props
+  apiKey: string;
+  host?: string;
+  // Authentication props
+  userId: string;
+  userToken?: string;
+  onUserTokenExpiring?: AuthenticateOptions["onUserTokenExpiring"];
+  timeBeforeExpirationInMs?: AuthenticateOptions["timeBeforeExpirationInMs"];
+
+  // Extra options
+  children?: React.ReactElement;
+
+  // i18n translations
+  i18n?: I18nContent;
+
+  logLevel?: LogLevel;
+}
+
+export const KnockProvider: React.FC<KnockProviderProps> = ({
+  apiKey,
+  host,
+  logLevel,
+  userId,
+  userToken,
+  onUserTokenExpiring,
+  timeBeforeExpirationInMs,
+  children,
+  i18n,
+}) => {
+  // We memoize the options here so that we don't create a new object on every re-render
+  // TODO: we probably need to put this optimization into the `useAuthenticatedKnockClient`
+  // hook itself to fix this
+  const authenticateOptions = React.useMemo(
+    () => ({
+      host,
+      onUserTokenExpiring,
+      timeBeforeExpirationInMs,
+      logLevel,
+    }),
+    [host, onUserTokenExpiring, timeBeforeExpirationInMs, logLevel],
+  );
+
+  const knock = useAuthenticatedKnockClient(
+    apiKey,
+    userId,
+    userToken,
+    authenticateOptions,
+  );
+
+  return (
+    <ProviderStateContext.Provider
+      value={{
+        knock,
+      }}
+    >
+      <KnockI18nProvider i18n={i18n}>{children}</KnockI18nProvider>
+    </ProviderStateContext.Provider>
+  );
+};
+
+export const useKnockClient = (): Knock => {
+  const context = React.useContext(ProviderStateContext) as KnockProviderState;
+  if (context === undefined) {
+    throw new Error("useKnock must be used within a KnockProvider");
+  }
+  return context.knock;
+};

package/src/modules/core/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockProvider";

package/src/modules/core/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useAuthenticatedKnockClient } from "./useAuthenticatedKnockClient";

package/src/modules/core/hooks/useAuthenticatedKnockClient.ts

@@ -0,0 +1,50 @@
+import Knock, { AuthenticateOptions, KnockOptions } from "@knocklabs/client";
+import React, { useMemo } from "react";
+
+function authenticateWithOptions(
+  knock: Knock,
+  userId: string,
+  userToken?: string,
+  options: AuthenticateOptions = {},
+) {
+  knock.authenticate(userId, userToken, {
+    onUserTokenExpiring: options?.onUserTokenExpiring,
+    timeBeforeExpirationInMs: options?.timeBeforeExpirationInMs,
+  });
+}
+
+function useAuthenticatedKnockClient(
+  apiKey: string,
+  userId: string,
+  userToken?: string,
+  options: KnockOptions & AuthenticateOptions = {},
+) {
+  const knockRef = React.useRef<Knock | null>();
+
+  return useMemo(() => {
+    const currentKnock = knockRef.current;
+
+    // If the userId and the userToken changes then just reauth
+    if (
+      currentKnock &&
+      currentKnock.isAuthenticated() &&
+      (currentKnock.userId !== userId || currentKnock.userToken !== userToken)
+    ) {
+      authenticateWithOptions(currentKnock, userId, userToken, options);
+      return currentKnock;
+    }
+
+    if (currentKnock) {
+      currentKnock.teardown();
+    }
+
+    // Otherwise instantiate a new Knock client
+    const knock = new Knock(apiKey, options);
+    authenticateWithOptions(knock, userId, userToken, options);
+    knockRef.current = knock;
+
+    return knock;
+  }, [apiKey, userId, userToken, options]);
+}
+
+export default useAuthenticatedKnockClient;

package/src/modules/core/index.ts

@@ -0,0 +1,4 @@
+export * from "./context";
+export * from "./hooks";
+export * from "./constants";
+export * from "./utils";

package/src/modules/core/utils.ts

@@ -0,0 +1,74 @@
+import { FeedClientOptions } from "@knocklabs/client";
+import { intlFormatDistance, parseISO } from "date-fns";
+import { ReactNode } from "react";
+
+export function formatBadgeCount(count: number): string | number {
+  return count > 9 ? "9+" : count;
+}
+
+type FormatTimestampOptions = {
+  locale?: string | string[];
+};
+
+export function formatTimestamp(
+  ts: string,
+  options: FormatTimestampOptions = {},
+) {
+  try {
+    const parsedTs = parseISO(ts);
+    const formatted = intlFormatDistance(parsedTs, new Date(), {
+      locale: options.locale,
+    });
+
+    return formatted;
+  } catch (e) {
+    return ts;
+  }
+}
+
+export function toSentenceCase(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function renderNodeOrFallback(node: ReactNode, fallback: ReactNode) {
+  return node !== undefined ? node : fallback;
+}
+
+/*
+  Used to build a consistent key for the KnockFeedProvider so that React knows when
+  to trigger a re-render of the context when a key property changes.
+*/
+export function feedProviderKey(
+  userFeedId: string,
+  options: FeedClientOptions = {},
+) {
+  return [
+    userFeedId,
+    options.source,
+    options.tenant,
+    options.has_tenant,
+    options.archived,
+  ]
+    .filter((f) => f !== null && f !== undefined)
+    .join("-");
+}
+
+/*
+  Used to build a consistent key for the KnockSlackProvider so that React knows when
+  to trigger a re-render of the context when a key property changes.
+*/
+export function slackProviderKey({
+  knockSlackChannelId,
+  tenant,
+  connectionStatus,
+  errorLabel,
+}: {
+  knockSlackChannelId: string;
+  tenant: string;
+  connectionStatus: string;
+  errorLabel: string | null;
+}) {
+  return [knockSlackChannelId, tenant, connectionStatus, errorLabel]
+    .filter((f) => f !== null && f !== undefined)
+    .join("-");
+}

package/src/modules/feed/context/KnockFeedProvider.tsx

@@ -0,0 +1,68 @@
+import Knock, {
+  Feed,
+  FeedClientOptions,
+  FeedStoreState,
+} from "@knocklabs/client";
+import * as React from "react";
+import create, { UseBoundStore } from "zustand";
+
+import { useKnockClient } from "../../core";
+import { ColorMode } from "../../core/constants";
+import { feedProviderKey } from "../../core/utils";
+import useNotifications from "../hooks/useNotifications";
+
+export interface KnockFeedProviderState {
+  knock: Knock;
+  feedClient: Feed;
+  useFeedStore: UseBoundStore<FeedStoreState>;
+  colorMode: ColorMode;
+}
+
+const FeedStateContext = React.createContext<KnockFeedProviderState | null>(
+  null,
+);
+
+export interface KnockFeedProviderProps {
+  // Feed props
+  feedId: string;
+
+  // Extra options
+  children?: React.ReactElement;
+  colorMode?: ColorMode;
+
+  // Feed client options
+  defaultFeedOptions?: FeedClientOptions;
+}
+
+export const KnockFeedProvider: React.FC<KnockFeedProviderProps> = ({
+  feedId,
+  children,
+  defaultFeedOptions = {},
+  colorMode = "light",
+}) => {
+  const knock = useKnockClient();
+  const feedClient = useNotifications(knock, feedId, defaultFeedOptions);
+  const useFeedStore = create<FeedStoreState>(feedClient.store);
+
+  return (
+    <FeedStateContext.Provider
+      key={feedProviderKey(feedId, defaultFeedOptions)}
+      value={{
+        knock,
+        feedClient,
+        useFeedStore,
+        colorMode,
+      }}
+    >
+      {children}
+    </FeedStateContext.Provider>
+  );
+};
+
+export const useKnockFeed = (): KnockFeedProviderState => {
+  const context = React.useContext(FeedStateContext);
+  if (context === undefined) {
+    throw new Error("useKnockFeed must be used within a KnockFeedProvider");
+  }
+  return context as KnockFeedProviderState;
+};

package/src/modules/feed/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockFeedProvider";

package/src/modules/feed/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useNotifications } from "./useNotifications";
+export { default as useFeedSettings } from "./useFeedSettings";

package/src/modules/feed/hooks/useFeedSettings.ts

@@ -0,0 +1,44 @@
+import { Feed } from "@knocklabs/client";
+import { useEffect, useState } from "react";
+
+export type FeedSettings = {
+  features: {
+    branding_required: boolean;
+  };
+};
+
+function useFeedSettings(feedClient: Feed): {
+  settings: FeedSettings | null;
+  loading: boolean;
+} {
+  const [settings, setSettings] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // TODO: consider moving this into the feed client and into the feed store state when
+  // we're using this in other areas of the feed
+  useEffect(() => {
+    async function getSettings() {
+      const knock = feedClient.knock;
+      const apiClient = knock.client();
+      const feedSettingsPath = `/v1/users/${knock.userId}/feeds/${feedClient.feedId}/settings`;
+      setIsLoading(true);
+
+      const response = await apiClient.makeRequest({
+        method: "GET",
+        url: feedSettingsPath,
+      });
+
+      if (!response.error) {
+        setSettings(response.body);
+      }
+
+      setIsLoading(false);
+    }
+
+    getSettings();
+  }, []);
+
+  return { settings, loading: isLoading };
+}
+
+export default useFeedSettings;

package/src/modules/feed/hooks/useNotifications.ts

@@ -0,0 +1,32 @@
+import Knock, { Feed, FeedClientOptions } from "@knocklabs/client";
+import { useMemo, useRef } from "react";
+
+function useNotifications(
+  knock: Knock,
+  feedChannelId: string,
+  options: FeedClientOptions = {},
+) {
+  const feedClientRef = useRef<Feed | null>();
+
+  return useMemo(() => {
+    if (feedClientRef.current) {
+      feedClientRef.current.dispose();
+    }
+
+    const feedClient = knock.feeds.initialize(feedChannelId, options);
+
+    feedClient.listenForUpdates();
+    feedClientRef.current = feedClient;
+
+    return feedClient;
+  }, [
+    knock,
+    feedChannelId,
+    options.source,
+    options.tenant,
+    options.has_tenant,
+    options.archived,
+  ]);
+}
+
+export default useNotifications;

package/src/modules/feed/index.ts

@@ -0,0 +1,2 @@
+export * from "./context";
+export * from "./hooks";

package/src/modules/i18n/context/KnockI18nProvider.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { locales, I18nContent } from "../languages";
+
+export const I18nContext = React.createContext<I18nContent>(locales.en);
+
+interface KnockI18nProviderProps {
+  i18n?: I18nContent;
+  children: JSX.Element | undefined;
+}
+
+export function KnockI18nProvider({
+  i18n = locales.en,
+  ...props
+}: KnockI18nProviderProps) {
+  return <I18nContext.Provider {...props} value={i18n} />;
+}

package/src/modules/i18n/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockI18nProvider";

package/src/modules/i18n/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useTranslations";

package/src/modules/i18n/hooks/useTranslations.ts

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { I18nContent, locales } from "../languages";
+import { I18nContext } from "../context/KnockI18nProvider";
+
+export function useTranslations() {
+  const { translations, locale } = useContext<I18nContent>(I18nContext);
+
+  return {
+    locale,
+    t: (key: keyof typeof translations) => {
+      // We always use english as the default translation when a key doesn't exist
+      return translations[key] || locales.en.translations[key];
+    },
+  };
+}

package/src/modules/i18n/index.ts

@@ -0,0 +1,3 @@
+export * from "./context";
+export * from "./hooks";
+export * from "./languages";

package/src/modules/i18n/languages/de.ts

@@ -0,0 +1,40 @@
+import { I18nContent } from ".";
+
+const de: I18nContent = {
+  translations: {
+    archiveNotification: "Benachrichtigung archivieren",
+    markAllAsRead: "Alle als gelesen markieren",
+    notifications: "Benachrichtigungen",
+    emptyFeedTitle: "Noch keine Benachrichtigungen",
+    emptyFeedBody:
+      "Wir werden dich benachrichtigen, sobald wir etwas Neues für dich haben.",
+    all: "Alle",
+    unread: "Ungelesen",
+    read: "Gelesen",
+    unseen: "Ungesehen",
+    slackConnectChannel: "Kanal verbinden",
+    slackChannelId: "Slack Kanal ID",
+    slackConnecting: "Verbinden mit Slack...",
+    slackDisconnecting: "Trennen der Verbindung...",
+    slackConnect: "Mit Slack verbinden",
+    slackConnected: "Verbunden",
+    slackConnectContainerDescription: "Verbinden, um Benachrichtigungen in Ihrem Slack-Arbeitsbereich zu erhalten.",
+    slackSearchbarDisconnected: "Slack ist nicht verbunden.",
+    slackSearchbarMultipleChannels:  "Mehrere Kanäle verbunden",
+    slackSearchbarNoChannelsConnected: "Suchkanäle",
+    slackSearchbarNoChannelsFound: "Keine schlaffen Kanäle.",
+    slackSearchbarChannelsError: "Fehler beim Abrufen von Kanälen.",
+    slackSearchChannels: "Suchkanäle",
+    slackConnectionErrorExists: "Versuchen Sie, sich erneut mit Slack zu verbinden, um Kanäle in Ihrem Arbeitsbereich zu finden und auszuwählen.",
+    slackConnectionErrorOccurred: "Es ist ein Fehler beim Verbinden mit Slack aufgetreten. Versuchen Sie, sich erneut zu verbinden, um Kanäle in Ihrem Arbeitsbereich zu finden und auszuwählen.",
+    slackChannelAlreadyConnected: "Fehler: bereits verbunden",
+    slackError: "Fehler",
+    slackDisconnect: "Trennen Sie die Verbindung.",
+    slackChannelSetError: "Fehlereinstellung Kanal.",
+    slackAccessTokenNotSet: "Zugriffstoken nicht gesetzt.",
+    slackReconnect: "Neu verbinden",
+  },
+  locale: "de",
+};
+
+export default de;

package/src/modules/i18n/languages/en.ts

@@ -0,0 +1,39 @@
+import { I18nContent } from ".";
+
+const en: I18nContent = {
+  translations: {
+    archiveNotification: "Archive this notification",
+    markAllAsRead: "Mark all as read",
+    notifications: "Notifications",
+    emptyFeedTitle: "No notifications yet",
+    emptyFeedBody: "We'll let you know when we've got something new for you.",
+    all: "All",
+    unread: "Unread",
+    read: "Read",
+    unseen: "Unseen",
+    slackConnectChannel: "Connect channel",
+    slackChannelId: "Slack channel ID",
+    slackConnecting: "Connecting to Slack...",
+    slackDisconnecting: "Disconnecting...",
+    slackConnect: "Connect to Slack",
+    slackConnected: "Connected",
+    slackConnectContainerDescription: "Connect to get notifications in your Slack workspace.",
+    slackSearchbarDisconnected: "Slack is not connected.",
+    slackSearchbarMultipleChannels:  "Multiple channels connected",
+    slackSearchbarNoChannelsConnected: "Search channels",
+    slackSearchbarNoChannelsFound: "No slack channels.",
+    slackSearchbarChannelsError: "Error fetching channels.",
+    slackSearchChannels: "Search channels",
+    slackConnectionErrorExists: "Try reconnecting to Slack to find and select channels from your workspace.",
+    slackConnectionErrorOccurred: "There was an error connecting to Slack. Try reconnecting to find and select channels from your workspace.",
+    slackChannelAlreadyConnected: "Error: already connected",
+    slackError: "Error",
+    slackDisconnect: "Disconnect",
+    slackChannelSetError: "Error setting channel.",
+    slackAccessTokenNotSet: "Access token not set.",
+    slackReconnect: "Reconnect",
+  },
+  locale: "en",
+};
+
+export default en;

package/src/modules/i18n/languages/index.ts

@@ -0,0 +1,43 @@
+import de from "./de";
+import en from "./en";
+
+export interface Translations {
+  readonly emptyFeedTitle: string;
+  readonly emptyFeedBody: string;
+  readonly notifications: string;
+  readonly poweredBy: string;
+  readonly markAllAsRead: string;
+  readonly archiveNotification: string;
+  readonly all: string;
+  readonly unread: string;
+  readonly read: string;
+  readonly unseen: string;
+  readonly slackConnectChannel: string;
+  readonly slackChannelId: string;
+  readonly slackConnecting: string;
+  readonly slackDisconnecting: string;
+  readonly slackConnect: string;
+  readonly slackConnected: string;
+  readonly slackConnectContainerDescription: string;
+  readonly slackSearchbarDisconnected: string;
+  readonly slackSearchbarMultipleChannels: string;
+  readonly slackSearchbarNoChannelsConnected: string;
+  readonly slackSearchbarNoChannelsFound: string;
+  readonly slackSearchbarChannelsError: string;
+  readonly slackSearchChannels: string;
+  readonly slackConnectionErrorOccurred: string;
+  readonly slackConnectionErrorExists: string;
+  readonly slackChannelAlreadyConnected: string;
+  readonly slackError: string;
+  readonly slackDisconnect: string;
+  readonly slackChannelSetError: string;
+  readonly slackAccessTokenNotSet: string;
+  readonly slackReconnect: string;
+}
+
+export interface I18nContent {
+  readonly translations: Partial<Translations>;
+  readonly locale: string;
+}
+
+export const locales = { en, de };

package/src/modules/slack/constants.ts

@@ -0,0 +1,12 @@
+export type ContainerObject = {
+  objectId: string;
+  collection: string;
+};
+
+export type SlackChannelQueryOptions = {
+  maxCount?: number;
+  limitPerPage?: number;
+  excludeArchived?: boolean;
+  types?: string;
+  teamId?: string;
+};

package/src/modules/slack/context/KnockSlackProvider.tsx

@@ -0,0 +1,81 @@
+import { useSlackConnectionStatus } from "..";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+
+import { slackProviderKey } from "../../core";
+import { useKnockClient } from "../../core";
+import { ConnectionStatus } from "../hooks/useSlackConnectionStatus";
+
+const queryClient = new QueryClient();
+
+export interface KnockSlackProviderState {
+  knockSlackChannelId: string;
+  tenant: string;
+  connectionStatus: ConnectionStatus;
+  setConnectionStatus: (connectionStatus: ConnectionStatus) => void;
+  errorLabel: string | null;
+  setErrorLabel: (label: string) => void;
+  actionLabel: string | null;
+  setActionLabel: (label: string | null) => void;
+}
+
+const SlackProviderStateContext =
+  React.createContext<KnockSlackProviderState | null>(null);
+
+export interface KnockSlackProviderProps {
+  knockSlackChannelId: string;
+  tenant: string;
+  children?: React.ReactElement;
+}
+
+export const KnockSlackProvider: React.FC<KnockSlackProviderProps> = ({
+  knockSlackChannelId,
+  tenant,
+  children,
+}) => {
+  const knock = useKnockClient();
+
+  const {
+    connectionStatus,
+    setConnectionStatus,
+    errorLabel,
+    setErrorLabel,
+    actionLabel,
+    setActionLabel,
+  } = useSlackConnectionStatus(knock, knockSlackChannelId, tenant);
+
+  return (
+    <SlackProviderStateContext.Provider
+      key={slackProviderKey({
+        knockSlackChannelId,
+        tenant,
+        connectionStatus,
+        errorLabel,
+      })}
+      value={{
+        connectionStatus,
+        setConnectionStatus,
+        errorLabel,
+        setErrorLabel,
+        actionLabel,
+        setActionLabel,
+        knockSlackChannelId,
+        tenant,
+      }}
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </SlackProviderStateContext.Provider>
+  );
+};
+
+export const useKnockSlackClient = (): KnockSlackProviderState => {
+  const context = React.useContext(
+    SlackProviderStateContext,
+  ) as KnockSlackProviderState;
+  if (context === undefined) {
+    throw new Error(
+      "useKnockSlackClient must be used within a KnockSlackProvider",
+    );
+  }
+  return context as KnockSlackProviderState;
+};

package/src/modules/slack/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockSlackProvider";

package/src/modules/slack/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useSlackConnectionStatus } from "./useSlackConnectionStatus";
+export { default as useSlackChannels } from "./useSlackChannels";
+export { default as useConnectedSlackChannels } from "./useConnectedSlackChannels";
+export { default as useSlackAuth } from "./useSlackAuth";

package/src/modules/slack/hooks/useConnectedSlackChannels.ts

@@ -0,0 +1,105 @@
+import { ContainerObject, useKnockSlackClient } from "..";
+import { SlackChannelConnection } from "@knocklabs/client";
+import { useCallback, useEffect, useState } from "react";
+
+import { useKnockClient } from "../../core";
+import { useTranslations } from "../../i18n";
+
+type UseSlackChannelsProps = {
+  slackChannelsRecipientObject: ContainerObject;
+};
+
+type UseSlackChannelOutput = {
+  data: SlackChannelConnection[] | null;
+  updateConnectedChannels: (
+    connectedChannels: SlackChannelConnection[],
+  ) => void;
+  loading: boolean;
+  error: string | null;
+  updating: boolean;
+};
+
+function useConnectedSlackChannels({
+  slackChannelsRecipientObject: { objectId, collection },
+}: UseSlackChannelsProps): UseSlackChannelOutput {
+  const { t } = useTranslations();
+  const knock = useKnockClient();
+  const { connectionStatus, knockSlackChannelId } = useKnockSlackClient();
+  const [connectedChannels, setConnectedChannels] = useState<
+    null | SlackChannelConnection[]
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const fetchAndSetConnectedChannels = useCallback(() => {
+    setIsLoading(true);
+    const getConnectedChannels = async () =>
+      await knock.objects.getChannelData({
+        collection,
+        objectId,
+        channelId: knockSlackChannelId,
+      });
+
+    getConnectedChannels()
+      .then((res) => {
+        if (res?.data?.connections) {
+          setConnectedChannels(res?.data?.connections);
+        } else {
+          setConnectedChannels([]);
+        }
+        setError(null);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setConnectedChannels([]);
+        setError(null);
+        setIsLoading(false);
+      });
+  }, [collection, knock.objects, knockSlackChannelId, objectId]);
+
+  useEffect(() => {
+    if (
+      connectionStatus === "connected" &&
+      !connectedChannels &&
+      !error &&
+      !isLoading
+    ) {
+      fetchAndSetConnectedChannels();
+    }
+  }, [
+    connectedChannels,
+    fetchAndSetConnectedChannels,
+    isLoading,
+    error,
+    connectionStatus,
+  ]);
+
+  const updateConnectedChannels = async (
+    channelsToSendToKnock: SlackChannelConnection[],
+  ) => {
+    setIsUpdating(true);
+    try {
+      await knock.objects.setChannelData({
+        objectId,
+        collection,
+        channelId: knockSlackChannelId,
+        data: { connections: channelsToSendToKnock },
+      });
+      fetchAndSetConnectedChannels();
+    } catch (error) {
+      setError(t("slackChannelSetError") || "");
+    }
+    setIsUpdating(false);
+  };
+
+  return {
+    data: connectedChannels,
+    updateConnectedChannels,
+    updating: isUpdating,
+    loading: isLoading,
+    error,
+  };
+}
+
+export default useConnectedSlackChannels;

package/src/modules/slack/hooks/useSlackAuth.ts

@@ -0,0 +1,84 @@
+import { useKnockSlackClient } from "..";
+import { TENANT_OBJECT_COLLECTION } from "@knocklabs/client";
+import { useCallback } from "react";
+
+import { useKnockClient } from "../../core";
+
+const SLACK_AUTHORIZE_URL = "https://slack.com/oauth/v2/authorize";
+const DEFAULT_SLACK_SCOPES = [
+  "chat:write",
+  "chat:write.public",
+  "channels:read",
+  "groups:read"
+];
+
+type UseSlackAuthOutput = {
+  buildSlackAuthUrl: () => string;
+  disconnectFromSlack: () => void;
+};
+
+function useSlackAuth(
+  slackClientId: string,
+  redirectUrl?: string,
+): UseSlackAuthOutput {
+  const knock = useKnockClient();
+  const { setConnectionStatus, knockSlackChannelId, tenant, setActionLabel } =
+    useKnockSlackClient();
+
+  const disconnectFromSlack = useCallback(async () => {
+    setActionLabel(null);
+    setConnectionStatus("disconnecting");
+    try {
+      const revoke = await knock.slack.revokeAccessToken({
+        tenant,
+        knockChannelId: knockSlackChannelId,
+      });
+
+      if (revoke === "ok") {
+        setConnectionStatus("disconnected");
+      } else {
+        setConnectionStatus("error");
+      }
+    } catch (error) {
+      setConnectionStatus("error");
+    }
+  }, [
+    setConnectionStatus,
+    knock.slack,
+    tenant,
+    knockSlackChannelId,
+    setActionLabel,
+  ]);
+
+  const buildSlackAuthUrl = useCallback(() => {
+    const rawParams = {
+      state: JSON.stringify({
+        redirect_url: redirectUrl,
+        access_token_object: {
+          object_id: tenant,
+          collection: TENANT_OBJECT_COLLECTION,
+        },
+        channel_id: knockSlackChannelId,
+        public_key: knock.apiKey,
+        user_token: knock.userToken,
+      }),
+      client_id: slackClientId,
+      scope: DEFAULT_SLACK_SCOPES.join(","),
+    };
+    return `${SLACK_AUTHORIZE_URL}?${new URLSearchParams(rawParams)}`;
+  }, [
+    redirectUrl,
+    tenant,
+    knockSlackChannelId,
+    knock.apiKey,
+    knock.userToken,
+    slackClientId,
+  ]);
+
+  return {
+    buildSlackAuthUrl,
+    disconnectFromSlack,
+  };
+}
+
+export default useSlackAuth;

package/src/modules/slack/hooks/useSlackChannels.ts

@@ -0,0 +1,91 @@
+import { SlackChannelQueryOptions, useKnockSlackClient } from "..";
+import { SlackChannel } from "@knocklabs/client";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
+
+import { useKnockClient } from "../../core";
+
+const MAX_COUNT = 1000;
+const LIMIT_PER_PAGE = 200;
+const CHANNEL_TYPES = "private_channel,public_channel";
+
+type UseSlackChannelsProps = {
+  queryOptions?: SlackChannelQueryOptions;
+};
+
+type UseSlackChannelOutput = {
+  data: SlackChannel[];
+  isLoading: boolean;
+  refetch: () => void;
+};
+
+function useSlackChannels({
+  queryOptions,
+}: UseSlackChannelsProps): UseSlackChannelOutput {
+  const knock = useKnockClient();
+  const { knockSlackChannelId, tenant, connectionStatus } =
+    useKnockSlackClient();
+
+  const fetchChannels = ({ pageParam }: { pageParam: string }) => {
+    return knock.slack.getChannels({
+      tenant,
+      knockChannelId: knockSlackChannelId,
+      queryOptions: {
+        ...queryOptions,
+        cursor: pageParam,
+        limit: queryOptions?.limitPerPage || LIMIT_PER_PAGE,
+        types: queryOptions?.types || CHANNEL_TYPES,
+      },
+    });
+  };
+
+  const {
+    data,
+    isLoading,
+    isFetching,
+    fetchNextPage,
+    hasNextPage,
+    refetch,
+    error,
+  } = useInfiniteQuery({
+    queryKey: ["slackChannels"],
+    queryFn: fetchChannels,
+    initialPageParam: "",
+    getNextPageParam: (lastPage) =>
+      lastPage?.next_cursor === "" ? null : lastPage?.next_cursor,
+  });
+
+  const slackChannels = useMemo(() => {
+    return (
+      data?.pages
+        ?.flatMap((page) => page?.slack_channels)
+        .filter((channel) => !!channel) || []
+    );
+  }, [data?.pages]);
+
+  const maxCount = queryOptions?.maxCount || MAX_COUNT;
+
+  useEffect(() => {
+    if (
+      connectionStatus === "connected" &&
+      !error &&
+      hasNextPage &&
+      !isFetching &&
+      slackChannels?.length < maxCount
+    ) {
+      fetchNextPage();
+    }
+  }, [
+    slackChannels?.length,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    maxCount,
+    error,
+    connectionStatus,
+  ]);
+
+  return { data: slackChannels, isLoading, refetch };
+}
+
+export default useSlackChannels;

package/src/modules/slack/hooks/useSlackConnectionStatus.ts

@@ -0,0 +1,102 @@
+import Knock from "@knocklabs/client";
+import { useEffect, useState } from "react";
+
+import { useTranslations } from "../../i18n";
+
+export type ConnectionStatus =
+  | "connecting"
+  | "connected"
+  | "disconnected"
+  | "error"
+  | "disconnecting";
+
+type UseSlackConnectionStatusOutput = {
+  connectionStatus: ConnectionStatus;
+  setConnectionStatus: (status: ConnectionStatus) => void;
+  errorLabel: string | null;
+  setErrorLabel: (errorLabel: string) => void;
+  actionLabel: string | null;
+  setActionLabel: (actionLabel: string | null) => void;
+};
+
+/**
+ * Transforms a slack error message into
+ * a formatted one. Slack error messages: https://api.slack.com/methods/auth.test#errors
+ *
+ * Ex.: "account_inactive" -> "Account inactive"
+ */
+const formatSlackErrorMessage = (errorMessage: string) => {
+  const firstLetter = errorMessage.substring(0, 1).toUpperCase();
+  const rest = errorMessage.substring(1);
+  return firstLetter?.concat(rest).replace("_", " ");
+};
+
+function useSlackConnectionStatus(
+  knock: Knock,
+  knockSlackChannelId: string,
+  tenant: string,
+): UseSlackConnectionStatusOutput {
+  const { t } = useTranslations();
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>("connecting");
+  const [errorLabel, setErrorLabel] = useState<string | null>(null);
+  const [actionLabel, setActionLabel] = useState<string | null>(null);
+
+  useEffect(() => {
+    const checkAuthStatus = async () => {
+      if (connectionStatus !== "connecting") return;
+
+      try {
+        const authRes = await knock.slack.authCheck({
+          tenant,
+          knockChannelId: knockSlackChannelId,
+        });
+
+        if (authRes.connection?.ok) {
+          return setConnectionStatus("connected");
+        }
+
+        if (!authRes.connection?.ok) {
+          return setConnectionStatus("disconnected");
+        }
+
+        // This is a normal response for a tenant that doesn't have an access
+        // token set on it, meaning it's not connected to Slack, so we
+        // give it a "disconnected" status instead of an error status.
+        if (
+          authRes.code === "ERR_BAD_REQUEST" &&
+          authRes.response?.data?.message === t("slackAccessTokenNotSet")
+        ) {
+          return setConnectionStatus("disconnected");
+        }
+
+        // This is for an error coming directly from Slack.
+        if (!authRes.connection?.ok && authRes.connection?.error) {
+          const errorLabel = formatSlackErrorMessage(authRes.connection?.error);
+          setErrorLabel(errorLabel);
+          setConnectionStatus("error");
+          return;
+        }
+
+        // This is for any Knock errors that would require a reconnect.
+
+        setConnectionStatus("error");
+      } catch (error) {
+        setConnectionStatus("error");
+      }
+    };
+
+    checkAuthStatus();
+  }, [connectionStatus, tenant, knockSlackChannelId, knock.slack, t]);
+
+  return {
+    connectionStatus,
+    setConnectionStatus,
+    errorLabel,
+    setErrorLabel,
+    actionLabel,
+    setActionLabel,
+  };
+}
+
+export default useSlackConnectionStatus;

package/src/modules/slack/index.ts

@@ -0,0 +1,3 @@
+export * from "./context";
+export * from "./hooks";
+export * from "./constants"