Skip to main content

Built in providers

Setup#

Step 1: Front End#

SuperTokens currently supports the following providers, but you can also add your own:

  • Github
  • Google
  • Facebook
  • Apple
import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdPartyEmailPassword.init({
signInAndUpFeature: {
providers: [
Github.init(),
Google.init(),
Facebook.init(),
Apple.init(),
],
// ...
},
// ...
}),
// ...
]
});

Step 2: Back End#

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
let { Google, Github, Facebook, Apple } = ThirdPartyEmailPassword;

SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
supertokens: {
connectionURI: "...",
},
recipeList: [
ThirdPartyEmailPassword.init({
providers: [
Google({
clientSecret: "TODO: GOOGLE_CLIENT_SECRET",
clientId: "TODO: GOOGLE_CLIENT_ID"
}),
Github({
clientSecret: "TODO: GITHUB_CLIENT_SECRET",
clientId: "TODO: GITHUB_CLIENT_ID"
}),
Facebook({
clientSecret: "TODO: FACEBOOK_CLIENT_SECRET",
clientId: "TODO: FACEBOOK_CLIENT_ID"
}),
Apple({
clientSecret: {
teamId: "APPLE_TEAM_ID",
privateKey: "APPLE_PRIVATE_KEY",
keyId: "KEY_ID"
},
clientId: "APPLE_CLIENT_ID"
})
]
}), // initializes signin / sign up features
Session.init() // initializes session features
]
});
Security

Make sure that the above configurations for "CLIENT_SECRET" are stored in your environment variables and not directly in your source code files.

Get the Third Party Provider's Access Token:#

See this section

Changing the button style#

On the frontend, you can provide a button component to the in built providers defining your own UI

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdPartyEmailPassword.init({
signInAndUpFeature: {
providers: [
Github.init({
buttonComponent: <div></div>
}),
Google.init({
buttonComponent: <div></div>
}),
Facebook.init({
buttonComponent: <div></div>
}),
Apple.init({
buttonComponent: <div></div>
}),
],
// ...
},
// ...
}),
// ...
]
});
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react