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 valuesdisableDefaultImplementation
#
- 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
- Id of the provider. It will be used to build the auth callback route
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
- Name of the provider. It will be used to build the button component
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>