Skip to main content
Version: Next
import SuperTokens from "supertokens-auth-react";import ThirdPartyEmailPassword, {Google, Facebook, Github} from "supertokens-auth-react/recipe/thirpartyemailpassword";SuperTokens.init({    recipeList: [        ThirdPartyEmailPassword.init({            signInAndUpFeature: {                disableDefaultImplementation: false,                defaultToSignUp: boolean,                style: {...},                signUpForm: {...},                signInForm: {...},                providers: [                    Google.init(),                    Facebook.init(),                    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"

defaultToSignUp#

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

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.

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.
  • 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>