From 5 to 6

@stytch/vanilla-js is no longer needed for @stytch/react and @stytch/nextjs. See their respective upgrade guides for how how to update to the new version.

Compatibility

Step by step guide

Upgrade @stytch/vanilla-js

Run npm, yarn or pnpm to install the new version.

package.json

"@stytch/vanilla-js": "^5.0.0", 
"@stytch/vanilla-js": "^6.0.0", 

Update to use custom element

The library now exports a custom element, and StytchB2BUIClient is deprecated in favor of StytchB2BClient. Instead of calling stytch.mount(), register the custom element and call render() on the element to pass in the client and config.

import {
  StytchB2BUIClient, 
  StytchB2B, 
  createStytchB2BClient,
} from '@stytch/vanilla-js/b2b';

const stytch = new StytchB2BUIClient($YOUR_PUBLIC_KEY); 
const stytch = createStytchB2BClient($YOUR_PUBLIC_KEY); 

stytch.mount({ 
  elementId: "#stytch-b2b-ui",
  config,
});
customElements.define('stytch-b2b-ui', StytchB2B); 
document.getElementById('stytch-b2b-ui').render({
  client: stytch,
  config,
})

Update products configuration

Update styles to presentation

Update customized strings

Update deprecated imports

The following are deprecated and should be updated.

createStytchB2BUIClient → createStytchB2BClient
createStytchB2BHeadlessClient → createStytchB2BClient
StytchB2BUIClient → StytchB2BClient
StytchB2BHeadlessClient → StytchB2BClient

Test your changes

We recommend running through every auth method used to make sure the new theme looks correct in context. You should also take note of errors or warnings in the browser console.

⌘I

​From 5 to 6

​Compatibility

​Step by step guide

From 5 to 6

Compatibility

Step by step guide