@boxyhq/react-ui

@boxyhq/react-ui

UI components from BoxyHQ for plug-and-play enterprise features.

Installation

npm install @boxyhq/react-ui --save

Usage

SSO Login Component

There are mainly 2 ways of using the SSO Login Component as outlined below:

Preset value for ssoIdentifier

If a value is passed for ssoIdentifier, it would render a button that on click calls the passed-in handler (onSubmit) with the ssoIdentifier value. The handler can then initiate a redirect to the SSO service forwarding the value for ssoIdentifier.

import { Login as SSOLogin } from '@boxyhq/react-ui';

const onSSOSubmit = async (ssoIdentifier: string) => {
  // Below calls signIn from next-auth. Replace this with whatever auth lib that you are using.
  await signIn('boxyhq-saml', undefined, { client_id: ssoIdentifier });
};

<SSOLogin
  buttonText={'Login with SSO'}
  ssoIdentifier={`tenant=${tenant}&product=${product}`}
  onSubmit={onSSOSubmit}
  classNames={{
    container: 'mt-2',
    button: 'btn-primary btn-block btn rounded-md active:-scale-95',
  }}
/>;

Accept input from the user for ssoIdentifier

If a value is not passed for ssoIdentifier, it would render an input field for the user to enter the ssoIdentifier value. And then on submit, the value gets passed to the handler. The handler can then initiate a redirect to the SSO service forwarding the value for ssoIdentifier.

import { Login as SSOLogin } from '@boxyhq/react-ui';

const onSSOSubmit = async (ssoIdentifier: string) => {
  // Below calls signIn from next-auth. Replace this with whatever auth lib that you are using.
  await signIn('boxyhq-saml', undefined, { client_id: ssoIdentifier });
};

<SSOLogin
  buttonText={'Login with SSO'}
  onSubmit={onSSOSubmit}
  classNames={{
    container: 'mt-2',
    label: 'text-gray-400',
    button: 'btn-primary btn-block btn rounded-md active:-scale-95',
    input: 'input-bordered input mb-5 mt-2 w-full rounded-md',
  }}
/>;