Skip to main content

​
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

1

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",
2

Update to use custom element

The library now exports a custom element, and StytchUIClient is deprecated in favor of StytchClient. Instead of calling stytch.mount(), register the custom element and call render() on the element to pass in the client and config.
import {
  StytchUIClient, 
  StytchUI, 
  createStytchClient,
} from '@stytch/vanilla-js';

const stytch = new StytchUIClient($YOUR_PUBLIC_KEY); 
const stytch = createStytchClient($YOUR_PUBLIC_KEY); 

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

Update products configuration

4

Update styles to presentation

5

Update customized strings

6

Update deprecated imports

The following are deprecated and should be updated.
  • createStytchUIClient → createStytchClient
  • createStytchHeadlessClient → createStytchClient
  • StytchUIClient → StytchClient
  • StytchHeadlessClient → StytchClient
7

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.