Disable use of shadow DOM

Disable Shadow DOM to customize CSS and improve password manager compatibility.

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

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: [
    /* ... */
  ],
});

// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

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