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