ThirdParty `init`

To start using the "ThirdParty" recipe for Sign-up / Sign-in, start by importing the ThirdParty module from the library and add it to the recipeList:

import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";

SuperTokens.init({
    appInfo: {...},
    recipeList: [
        ThirdParty.init()
    ]
});

You can customize the ThirdParty module by overwriting the following configs:

Here is an example of a fully customized "ThirdParty" configuration. Make sure to only include the ones that you want to customize.

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

Config values

palette:
- Description: The palette allows you to customize basic colours of the Sign-up / Sign-in widgets. Read the common customizations guide for more information about the palette.
useShadowDom:
- Description: Styling encapsulation relies on shadow DOM browser feature. Unfortunately password managers such as Dashlane, LastPass, OnePassword, etc... do not detect authentication forms fields inside shadow DOMs. If you would like to make sure that your end users can use their password managers, you will have to disable shadow DOM.
- Default: "false"
- Example: useShadowDom: "true"

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

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

emailVerificationFeature

disableDefaultImplementation:
- Description: When true, the default route (/auth/verify-email) for reset password is disabled.
- Default: "false"
- Example: disableDefaultImplementation: "true"
mode:
- Description: Email verification mode.
- Default: "OFF"
- Example: mode: "REQUIRED"
sendVerifyEmailScreen:
- Description: The sendVerifyEmailScreen configuration allows you to update styles. More information in the corresponding email verification section
verifyEmailLinkClickedScreen:
- Description: The verifyEmailLinkClickedScreen configuration allows you to update styles. More information in the corresponding email verification section

Hooks

preAPIHooks

Description: This async method can be used to update the request object sent to your API regarding authentication. See callbacks documentation for more information.

getRedirectionURL

Description: This async method can be used to update the redirection rules for specific paths. See callbacks documentation for more information.

onHandleEvent

Description: This method can be used to store analytics to your system on key events happening during authentication. See callbacks documentation for more information.

ThirdParty init