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: {...},    recipeList: [        ThirdPartyEmailPassword.init({            signInAndUpFeature: {                providers: [                    Github.init(),                    Google.init(),                    Facebook.init(),                    Apple.init(),                ],                 (...)            },            (...)        }),        (...)    ]});
info

Please refer to the Auth React > SignInAndUpFeature configs section for information on how to customize the styles.

Step 2: Back End#

let SuperTokens = require("supertokens-node");let Session = require("supertokens-node/recipe/session");let ThirdPartyEmailPassword = require("supertokens-node/recipe/thirdpartyemailpassword");let {Google, Github, Facebook, Apple} = ThirdPartyEmailPassword;
SuperTokens.init({    appInfo: {...},    supertokens: {...},    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    ]});
info

Learn more about customizing third party configs here

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:#

You can get the Third Party Provider's access token to query their APIs through your backend with the following method:

SuperTokens.init({    appInfo: {...},    supertokens: {...},    recipeList: [        ThirdPartyEmailPassword.init({            override: {                apis: (originalImplementation) => {                    return {                        ...originalImplementation,
                        signInUpPOST: async (input) => {
                            if (originalImplementation.signInUpPOST === undefined) {                                throw Error("Should never come here");                            }                                                        let response = await originalImplementation.signInUpPOST(input)
                            if (response.status === "OK"){                                if(response.type === "thirdparty"){                                                                        // In this example we are using Google as our provider                                    let accessToken = response.authCodeResponse.access_token                                                                        // TODO: ...                                }                            }
                            return response;                        },                    }                }            },        }),        Session.init()     ]});