Which UI do you use?

Custom UI

Pre built UI

ThrdPartyEmailPassword init

SuperTokens.init({
    recipeList: [
        ThirdPartyEmailPassword.init({
            palette: {...},
            useShadowDom: true,
            disableEmailPassword: false,
            signInAndUpFeature: {
                disableDefaultImplementation: false,
                defaultToSignUp: false,
                signUpForm: {...},
                signInForm: {...},
                providers: [...]
            },
            resetPasswordUsingTokenFeature: {
                disableDefaultImplementation: false
                enterEmailForm: {...}
                submitNewPasswordForm: {...}
            },
            emailVerificationFeature: {
                disableDefaultImplementation: false
                mode: "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.

disableEmailPassword

• If set to true, it removes the email and password module from the Sign-up/Sign-in widget.
• Default: "false"

signInAndUpFeature

• disableDefaultImplementation

  • When true, the default route (/auth) for Sign-up / Sign-in is disabled.
  • Default: "false"

• defaultToSignUp

  • When set to false, the Sign-up / Sign-in widget will display the Sign-In widget by default.
  • Default: "false"

• signUpForm

  • The signUpForm configuration allows you to update styles, create new Sign up fields and add custom validators.
  • More information in the corresponding sign up section

• signInForm

  • The signInForm configuration allows you to update styles, customize "email" | "password" fields and add custom validators.
  • More information in the corresponding sign in section

• providers

  • This is an array that contains the third party providers.
  • More information in the corresponding sign in and up section

resetPasswordUsingTokenFeature

• disableDefaultImplementation

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

• enterEmailForm

  • The enterEmailForm configuration allows you to update styles for this form.
  • More information in the corresponding reset password email section

• submitNewPasswordForm

  • The submitNewPasswordForm configuration allows you to update styles for this form.
  • More information in the corresponding reset password new password section

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