@stytch/vanilla-js v5

The following only apply to @stytch/vanilla-js v5 and below. We recommend upgrading to v6 to receive new features by following the upgrade guide.

This page documents old APIs used in @stytch/vanilla-js v5. APIs not described on this page are unchanged in v6.

StytchB2BUIClient and StytchB2BHeadlessClient

If you are using Stytch UI, use StytchB2BUIClient, otherwise use StytchB2BHeadlessClient from @stytch/vanilla-js/b2b/headless for smaller bundle size.

// For Stytch UI
import { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';

// Without Stytch UI
import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';

Imports

These imports are only available in @stytch/vanilla-js/b2b in v5 and should be imported separately from @stytch/react or @stytch/nextjs.

B2BProducts
Types for most SDK methods and configuration

Mounting

If you are using React or Next.js, pass the StytchB2BUIClient into <StytchB2BProvider>.

<StytchB2BProvider stytch={stytch}>
  // Your app here
</StytchB2BProvider>

If you are only using @stytch/vanilla-js, use the mount functions on the client. elementId is a selector matching an element on the page to mount Stytch UI to. Make sure this element is included in your HTML file before the script tag containing your Stytch configuration.

// Stytch login
stytch.mount({
  elementId: '#stytch-sdk',
  styles,
  callbacks,
  config,
  strings,
});

// Stytch identity provider
stytch.mountIdentityProvider({
  elementId: '#stytch-idp-container',
  styles,
});

Styles

The style object allows you to customize the look of the SDK. You can specify some of them or none at all. We’ll use our defaults for the ones you don’t specify.

string

The font family that will apply to all text in the SDK.

boolean

When this value is true, the title and description text will not show in the SDK.

object

The configuration object for the Stytch UI container.

Show properties

string

The width of the SDK container.

string

The background color of the SDK container.

string

The border color of the SDK container.

object

The configuration object for colors used in the Stytch UI components.

Show properties

string

Your primary brand color. This will be applied to most of the text in the SDK.

string

Your secondary brand color. This will be applied to text disclaimers and other visual elements.

string

A success color to be used in visual elements.

string

An error color to be used in visual elements.

object

The configuration object for buttons in the Stytch UI component.

Show properties

object

The configuration object for primary buttons.

Show properties

string

The text color of the primary button.

string

The background color of the primary button.

string

The border color of the primary button.

string

The border radius of the primary button.

object

The configuration object for secondary buttons.

Show properties

string

The text color of the secondary button.

string

The background color of the secondary button.

string

The border color of the secondary button.

string

The border radius of the secondary button.

object

The configuration object for text inputs in the Stytch UI components.

Show properties

string

The text color of the text inputs.

string

The background color of the text inputs.

string

The color of the placeholder text in the text inputs.

string

The border color of the text inputs.

string

The border radius of the text inputs.

object

The configuration object for your custom logo.

Show properties

string

The URL of your custom logo. The image will be resized to fit a max height of 50px, and a max width of 100px.

​StytchB2BUIClient and StytchB2BHeadlessClient

​Imports

​Mounting

​Styles

StytchB2BUIClient and StytchB2BHeadlessClient

Imports

Mounting

Styles