Skip to main content
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.

​
StytchUIClient and StytchHeadlessClient

If you are using Stytch UI, use StytchUIClient, otherwise use StytchHeadlessClient from @stytch/vanilla-js/headless for smaller bundle size. 
// For Stytch UI
import { StytchUIClient } from '@stytch/vanilla-js';

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

​
Imports

These imports are only available in @stytch/vanilla-js in v5 and should be imported separately from @stytch/react or @stytch/nextjs.
  • Products
  • Types for most SDK methods and configuration

​
Mounting

If you are using React or Next.js, pass the StytchUIClient into <StytchProvider>. 
<StytchProvider stytch={stytch}>
  // Your app here
</StytchProvider>
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.mountLogin({
  elementId: '#stytch-sdk',
  styles,
  callbacks,
  config,
  strings,
});

// Stytch password reset
stytch.mountResetPassword({
  elementId: '#stytch-sdk',
  config,
  passwordResetToken,
});

// Stytch passkey registration
stytch.mountPasskeyRegistration({
  elementId: '#stytch-sdk',
  config,
});

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

​
Styles

Stytch UI v5 login component 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.
​
fontFamily
string
The font family that will apply to all text in the SDK.
​
hideHeaderText
boolean
When this value is true, the title and description text will not show in the SDK.
​
container
object
The configuration object for the Stytch UI container.
​
colors
object
The configuration object for colors used in the Stytch UI components.
​
buttons
object
The configuration object for buttons in the Stytch UI component.
​
inputs
object
The configuration object for text inputs in the Stytch UI components.
The configuration object for your custom logo.