Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

ThirdParty init

SuperTokens.init({
    recipeList: [
        ThirdParty.init({
            useShadowDom: true,
            signInAndUpFeature: {...},
            emailVerificationFeature: {
                disableDefaultImplementation: false
                mode: "REQUIRED" | "OFF",
                sendVerifyEmailScreen: {...},
                verifyEmailLinkClickedScreen: {...}
            },
            preAPIHooks(context) {}
            getRedirectionURL(context) {}
            onHandleEvent(context) {}
        })
    ]
});

Config values

palette

• The palette allows you to customize basic colours of our forms.
• Read the common customizations guide for more information about the palette.

useShadowDom

• Styling encapsulation relies on shadow DOM browser feature.
• Default: true

caution

• SuperTokens uses only randomized styles to define its styling so disabling shadow DOM should not impact the rest of your application's styles. On the other hand, when disabling Shadow DOM, make sure to verify that your CSS does not impact how SuperTokens UI is rendered.
• Shadow DOM will always be disabled with Internet Explorer since it does not support it. Similarly, if you intend to support Internet Explorer for your application make sure to verify how SuperTokens UI is rendered.

signInAndUpFeature

• The signInAndUpFeature allows to configure third party providers and styling.
• More information in the corresponding sign in and up configs

emailVerificationFeature

• disableDefaultImplementation

  • When true, the default route (/auth/verify-email) for reset password is disabled.
  • Default: "false"

• mode

  • Set this to enable / disable email verification
  • Default: "OFF"

• sendVerifyEmailScreen

  • The sendVerifyEmailScreen configuration allows you to update styles for this form.
  • More information in the corresponding email verification section

• verifyEmailLinkClickedScreen

  • The verifyEmailLinkClickedScreen configuration allows you to update styles for this form.
  • More information in the corresponding email verification section

preAPIHooks

• Can be used to modify a request being sent by our login components to your backend.
• Learn more about how to use this function here

getRedirectionURL

• Can be used to modify where a user is sent to for various actions.
• Learn more about how to use this function here

onHandleEvent

• Can be used to capture and run logic on certain actions that happen via our components
• Learn more about how to use this function here