Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

signInAndUpFeature

import SuperTokens from "supertokens-auth-react";
import ThirdParty, {Google, Facebook, Github} from "supertokens-auth-react/recipe/thirparty";
SuperTokens.init({
    recipeList: [
        ThirdParty.init({
            signInAndUpFeature: {
                disableDefaultImplementation: false,
                privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
                termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
                style: {
                    container: {
                        backgroundColor: "#ffeeff"
                    },
                    providerGoogle: {
                        color: "red"
                    }
                    (...)
                },
                providers: [
                    Google.init(),
                    Facebook.init({
                        // optional for all built in providers
                        buttonComponent: () => <div>Sign In with Facebook custom button</div>
                    }),
                    Github.init(),
                    {
                        id: "custom",
                        name: "Custom provider",
                        buttonComponent: () => <div>Sign In with this custom provider</div> // optional
                    }
                ]
            },
        })
    ]
});

Config values

disableDefaultImplementation

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

privacyPolicyLink

• Link to your privacy policy
• Example: privacyPolicyLink: "https://supertokens.com/legal/privacy-policy"

termsOfServiceLink

• Link to your terms and conditions
• Example: termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions"

style

• An object to overwrite the sign in form styles.
• Please refer to the common customizations guide on how to update the form style.

info

• To change the provider button's style, the style property should be "provider{name}".
• For example for sign in with google, you should use the key: providerGoogle.

providers

• This is an array that contains the third party providers.
• For build in providers:
  • buttonComponent
    • Button component that will be rendered in place of the default button.
    • Type: JSX.Element
    • Example: () => <div>Sign In with Gmail</div>
• For Custom providers:
  • id
    • Id of the provider. It will be used to build the auth callback route /auth/callback/google
    • Type: string
    • Example: "twitch" | "slack"
    • Required
  • name
    • Name of the provider. It will be used to build the button component Continue with {name} if no button component is provided.
    • Type: string
    • Example: "Google" | "Facebook" | "Twitch" | "Slack"
    • Required
  • buttonComponent
    • Button component that will be rendered in place of the default button.
    • Type: JSX.Element
    • Example: () => <div>Sign In with this custom provider</div>