Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

Built in providers

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

• Apple (thirdPartyId: "apple")
• Discord (thirdPartyId: "discord")
• Facebook (thirdPartyId: "facebook")
• Github (thirdPartyId: "github")
• Google (thirdPartyId: "google")
• LinkedIn (thirdPartyId: "linkedin")

Step 1: Frontend setup

ReactJS

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

Import and all the built in providers that you wish to show in the UI as shown below.

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

Angular

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

Import and all the built in providers that you wish to show in the UI as shown below.

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

Vue

Import and all the built in providers that you wish to show in the UI as shown below.

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

Changing the button style

On the frontend, you can provide a button component to the in built providers defining your own UI. The component you add will be clickable by default.

ReactJS

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

import SuperTokens from "supertokens-auth-react";import ThirdParty, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdparty";SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdParty.init({            signInAndUpFeature: {                providers: [                    Github.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Google.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Facebook.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Apple.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                ],                 // ...            },            // ...        }),        // ...    ]});

Angular

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

import SuperTokens from "supertokens-auth-react";import ThirdParty, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdparty";SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdParty.init({            signInAndUpFeature: {                providers: [                    Github.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Google.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Facebook.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Apple.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                ],                 // ...            },            // ...        }),        // ...    ]});

Vue

import SuperTokens from "supertokens-auth-react";import ThirdParty, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdparty";SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdParty.init({            signInAndUpFeature: {                providers: [                    Github.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Google.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Facebook.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                    Apple.init({                        buttonComponent: (props: {name: string}) => <div></div>                    }),                ],                 // ...            },            // ...        }),        // ...    ]});

Step 2: Adding providers config to the backend

You should add all the built in providers to the providers array during the init function call on the backend. At a minimum, you will require the client ID and secret (unless the provider supports PKCE flow), but you can also change our default behaviour for any of the in built providers.

NodeJS

import SuperTokens from "supertokens-node";import Session from "supertokens-node/recipe/session";import ThirdParty from "supertokens-node/recipe/thirdparty";let { Google, Github, Facebook, Apple } = ThirdParty
TODO
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    supertokens: {        connectionURI: "...",    },    recipeList: [        ThirdParty.init({            signInAndUpFeature: {                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    ]});

GoLang

import (    "github.com/supertokens/supertokens-golang/recipe/thirdparty"    "github.com/supertokens/supertokens-golang/recipe/thirdparty/tpmodels"    "github.com/supertokens/supertokens-golang/supertokens")
func main() {    supertokens.Init(supertokens.TypeInput{        RecipeList: []supertokens.Recipe{            thirdparty.Init(&tpmodels.TypeInput{                SignInAndUpFeature: tpmodels.TypeInputSignInAndUp{                    Providers: []tpmodels.ProviderInput{                        {                            Config: tpmodels.ProviderConfig{                                ThirdPartyId: "google",                                Clients: []tpmodels.ProviderClientConfig{                                    {                                        ClientID:     "TODO: GOOGLE_CLIENT_ID",                                        ClientSecret: "TODO: GOOGLE_CLIENT_SECRET",                                    },                                },                            },                        },                        {                            Config: tpmodels.ProviderConfig{                                ThirdPartyId: "github",                                Clients: []tpmodels.ProviderClientConfig{                                    {                                        ClientID:     "TODO: GITHUB_CLIENT_ID",                                        ClientSecret: "TODO: GITHUB_CLIENT_SECRET",                                    },                                },                            },                        },                        {                            Config: tpmodels.ProviderConfig{                                ThirdPartyId: "facebook",                                Clients: []tpmodels.ProviderClientConfig{                                    {                                        ClientID:     "TODO: FACEBOOK_CLIENT_ID",                                        ClientSecret: "TODO: FACEBOOK_CLIENT_SECRET",                                    },                                },                            },                        },                    },                },            }),        },    })}

Python

from supertokens_python import init, InputAppInfofrom supertokens_python.recipe import thirdpartyfrom supertokens_python.recipe.thirdparty import Github, Google, Facebook, Apple
TODO
init(        app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),    framework='...',     recipe_list=[        thirdparty.init(            sign_in_and_up_feature=thirdparty.SignInAndUpFeature(providers=[                Google(                    client_id='GOOGLE_CLIENT_ID',                    client_secret='GOOGLE_CLIENT_SECRET'                ), Facebook(                    client_id='FACEBOOK_CLIENT_ID',                    client_secret='FACEBOOK_CLIENT_SECRET'                ), Github(                    client_id='GITHUB_CLIENT_ID',                    client_secret='GITHUB_CLIENT_SECRET'                ),                Apple(                    client_id="APPLE_CLIENT_ID",                     client_key_id="KEY_ID",                     client_private_key="APPLE_PRIVATE_KEY",                     client_team_id="APPLE_TEAM_ID"                )            ])        )    ])

• You can see all the configs available for each of our built in providers over here
• Make sure that the above configurations for "CLIENT_SECRET" are stored in your environment variables and not directly in your source code files.

Setting OAuth Scopes

If you would like to add additional OAuth Scopes when accessing your third party provider, you can do so by adding them to the config when initializing the backend SDK.

For example if you are using Google as your third party provider, you can add an additional scope as follows:

NodeJS

import SuperTokens from "supertokens-node";import ThirdParty from "supertokens-node/recipe/thirdparty";
TODO
SuperTokens.init({    supertokens: {        connectionURI: "...",    },    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdParty.init({            signInAndUpFeature: {                providers: [                    ThirdParty.Google({                        clientSecret: "TODO: GOOGLE_CLIENT_SECRET",                        clientId: "TODO: GOOGLE_CLIENT_ID",                        scope: [                            "additionalFeatureURL",                        ]                    })                ]            }        })    ]});

GoLang

import (    "github.com/supertokens/supertokens-golang/recipe/thirdparty"    "github.com/supertokens/supertokens-golang/recipe/thirdparty/tpmodels"    "github.com/supertokens/supertokens-golang/supertokens")
func main() {    supertokens.Init(supertokens.TypeInput{        RecipeList: []supertokens.Recipe{            thirdparty.Init(&tpmodels.TypeInput{                SignInAndUpFeature: tpmodels.TypeInputSignInAndUp{                    Providers: []tpmodels.ProviderInput{                        {                            Config: tpmodels.ProviderConfig{                                ThirdPartyId: "google",                                Clients: []tpmodels.ProviderClientConfig{                                    {                                        ClientID:     "TODO: GOOGLE_CLIENT_ID",                                        ClientSecret: "TODO: GOOGLE_CLIENT_SECRET",                                        Scope: []string{                                            "scope1", "scope2",                                        },                                    },                                },                            },                        },                    },                },            }),        },    })}

Python

from supertokens_python import init, InputAppInfofrom supertokens_python.recipe import thirdpartyfrom supertokens_python.recipe.thirdparty import Google
TODO
init(    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),    framework='...',     recipe_list=[        thirdparty.init(            sign_in_and_up_feature=thirdparty.SignInAndUpFeature(providers=[                Google(                    client_id=os.environ.get('GOOGLE_CLIENT_ID'),                     client_secret=os.environ.get('GOOGLE_CLIENT_SECRET'),                     scope=["scope1", "scope2"]                )            ])        )    ])

important

Your scopes should ensure that the provider returns the user's email.

See also

• Get the third party provider's access token
• Get the user info from the third party provider
• Multi-tenancy SSO (Okta, AD, SAML, Google Workspaces)