Which UI do you use?

Custom UI

Pre built UI

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")
• Twitter (thirdPartyId: "twitter")

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 ThirdPartyPasswordless, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartypasswordless";
SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL",
            signInUpFeature: {
                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 ThirdPartyPasswordless, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartypasswordless";
SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL",
            signInUpFeature: {
                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 ThirdPartyPasswordless, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartypasswordless";
SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL",
            signInUpFeature: {
                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 ThirdPartyPasswordless, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartypasswordless";
SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL",
            signInUpFeature: {
                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 ThirdPartyPasswordless, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartypasswordless";
SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL",
            signInUpFeature: {
                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 ThirdPartyPasswordless, {Google, Github, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartypasswordless";
SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL",
            signInUpFeature: {
                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

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

import SuperTokens from "supertokens-node";
import ThirdPartyPasswordless from "supertokens-node/recipe/thirdpartypasswordless";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    supertokens: {
        connectionURI: "...",
    },
    recipeList: [
        ThirdPartyPasswordless.init({
                providers: [
                    {
                        config: {
                            thirdPartyId: "google",
                            clients: [{
                                clientId: "TODO: GOOGLE_CLIENT_ID",
                                clientSecret: "TODO: GOOGLE_CLIENT_SECRET"
                            }]
                        },
                    },
                    {
                        config: {
                            thirdPartyId: "github",
                            clients: [{
                                clientId: "TODO: GITHUB_CLIENT_ID",
                                clientSecret: "TODO: GITHUB_CLIENT_SECRET"
                            }]
                        },
                    },
                    {
                        config: {
                            thirdPartyId: "facebook",
                            clients: [{
                                clientId: "TODO: FACEBOOK_CLIENT_ID",
                                clientSecret: "TODO: FACEBOOK_CLIENT_SECRET"
                            }]
                        },
                    },
                ]
        })
    ]
});

Python

import (
    "github.com/supertokens/supertokens-golang/recipe/thirdpartypasswordless"
    "github.com/supertokens/supertokens-golang/recipe/thirdparty/tpmodels"
    "github.com/supertokens/supertokens-golang/recipe/thirdpartypasswordless/tplmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            thirdpartypasswordless.Init(tplmodels.TypeInput{
                    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",
                                    },
                                },
                            },
                        },
                    },
            }),
        },
    })
}

Other Frameworks

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import thirdpartypasswordless
from supertokens_python.recipe.thirdparty import ProviderInput, ProviderConfig, ProviderClientConfig

init(
    
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        thirdpartypasswordless.init(
   flow_type="USER_INPUT_CODE",
                providers=[
                    ProviderInput(
                        config=ProviderConfig(
                            third_party_id="google",
                            clients=[
                                ProviderClientConfig(
                                    client_id="GOOGLE_CLIENT_ID",
                                    client_secret="GOOGLE_CLIENT_SECRET",
                                ),
                            ],
                        ),
                    ),
                    ProviderInput(
                        config=ProviderConfig(
                            third_party_id="facebook",
                            clients=[
                                ProviderClientConfig(
                                    client_id="FACEBOOK_CLIENT_ID",
                                    client_secret="FACEBOOK_CLIENT_SECRET",
                                ),
                            ],
                        ),
                    ),
                    ProviderInput(
                        config=ProviderConfig(
                            third_party_id="github",
                            clients=[
                                ProviderClientConfig(
                                    client_id="GITHUB_CLIENT_ID",
                                    client_secret="GITHUB_CLIENT_SECRET",
                                ),
                            ],
                        ),
                    ),
                ]
        )
    ]
)

• 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

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

import SuperTokens from "supertokens-node";
import ThirdPartyPasswordless from "supertokens-node/recipe/thirdpartypasswordless";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyPasswordless.init({
                providers: [
                    {
                        config: {
                            thirdPartyId: "google",
                            clients: [{
                                clientId: "TODO: GOOGLE_CLIENT_ID",
                                clientSecret: "TODO: GOOGLE_CLIENT_SECRET",
                                scope: ["scope1", "scope2"]
                            }]
                        }
                    }
                ]
        })
    ]
});

Python

import (
    "github.com/supertokens/supertokens-golang/recipe/thirdpartypasswordless"
    "github.com/supertokens/supertokens-golang/recipe/thirdparty/tpmodels"
    "github.com/supertokens/supertokens-golang/recipe/thirdpartypasswordless/tplmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            thirdpartypasswordless.Init(tplmodels.TypeInput{
                    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",
                                        },
                                    },
                                },
                            },
                        },
                    },
            }),
        },
    })
}

Other Frameworks

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import thirdpartypasswordless
from supertokens_python.recipe.thirdparty import ProviderInput, ProviderConfig, ProviderClientConfig

init(
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        thirdpartypasswordless.init(
   flow_type="USER_INPUT_CODE",
                providers=[
                    ProviderInput(
                        config=ProviderConfig(
                            third_party_id="google",
                            clients=[
                                ProviderClientConfig(
                                    client_id="GOOGLE_CLIENT_ID",
                                    client_secret="GOOGLE_CLIENT_SECRET",
                                    scope=["scope1", "scope2"]
                                ),
                            ],
                        ),
                    ),
                ]
        )
    ]
)

important

Along with your custom scopes, you also need to add scopes that ask for the user's email and its verification status. For example with Google, this scope is called "https://www.googleapis.com/auth/userinfo.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)