Skip to main content
Version: 0.15.X

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#

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>
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react