catalyst-sso

Integer Catalyst SSO React package for rendering Okta and Microsoft Entra SAML login buttons.

Install

npm i @arizondigital/catalyst-sso

Usage

Import the button component you need and pass your storeHash and channelId. In Catalyst or Next.js, read these values from your app environment and pass them into the button component. On a login page, also pass the customer's login state so silent SSO login does not redirect customers who are already signed in.

Okta SAML Button

import { isLoggedIn } from "~/auth";
import { OktaSamlButton } from "@arizondigital/catalyst-sso";

export default async function LoginPage() {
  const customerIsLoggedIn = await isLoggedIn();

  return (
    <OktaSamlButton
      storeHash={process.env.BIGCOMMERCE_STORE_HASH}
      channelId={process.env.BIGCOMMERCE_CHANNEL_ID}
      isLoggedIn={customerIsLoggedIn}
      buttonText="Login With Okta"
      redirectTo={redirectTarget}
    />
  );
}

Entra SAML Button

import { isLoggedIn } from "~/auth";
import { EntraSamlButton } from "@arizondigital/catalyst-sso";

export default async function LoginPage() {
  const customerIsLoggedIn = await isLoggedIn();

  return (
    <EntraSamlButton
      storeHash={process.env.BIGCOMMERCE_STORE_HASH}
      channelId={process.env.BIGCOMMERCE_CHANNEL_ID}
      isLoggedIn={customerIsLoggedIn}
      buttonText="Login With Entra"
      redirectTo={redirectTarget}
    />
  );
}

If you render these buttons inside another client component, pass the env values from a server component into that client component first. Do not expose the values with NEXT_PUBLIC_ unless you are comfortable making them available in browser JavaScript.

Mode

The mode prop is optional. If you do not pass mode, the package uses production.

<OktaSamlButton
  storeHash={process.env.BIGCOMMERCE_STORE_HASH}
  channelId={process.env.BIGCOMMERCE_CHANNEL_ID}
  mode="production"
  redirectTo={redirectTarget}
/>

<EntraSamlButton
  storeHash={process.env.BIGCOMMERCE_STORE_HASH}
  channelId={process.env.BIGCOMMERCE_CHANNEL_ID}
  mode="sandbox"
  redirectTo={redirectTarget}
/>

Available modes:

| Mode | URL | | --- | --- | | production | https://ssomerchant.arizon.solutions | | sandbox | https://ssomerchantdev.arizon.solutions |

Props

| Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | storeHash | string | Yes | - | BigCommerce store hash. | | channelId | string or number | Yes | - | Storefront channel ID. | | mode | production, sandbox| No | production | Environment used to call the SSO API. | | buttonText | string | No | (fetched from API) | Override the button label. | | redirectTo | string | No | "" | Path to redirect the user to after a successful SSO login. Common values: "/account" (account dashboard) or "/checkout" (proceed to checkout). | | isLoggedIn | boolean | No | false | Customer login state. Set this with await isLoggedIn() on the login page to prevent a silent SSO redirect for an already signed-in customer. |