Skip to main content

Disable use of shadow DOM

Overview​

SuperTokens uses Shadow DOM to prevent CSS clashes between your CSS and the ones provided by SuperTokens. This guarantees that all the prebuilt UI renders as expected.

However, this has a few problems:

  • You cannot override the prebuilt UI CSS directly through your CSS files. You need to use JavaScript to achieve this.
  • Password managers may not work for your end user.

Before you start​

This example is relevant only if you use the prebuilt UI components.

Example​

If you want to disable use of shadow dom, you can do this like:

import SuperTokens from "supertokens-auth-react";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    useShadowDom: false,
    recipeList: [/* ... */]
});
caution

If disabled, please be sure to check that the components render correctly - because your CSS might affect the components' UI (the other way around does not happen).