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

ReactJS
Angular
Vue
Plain JavaScript
React Native

Note

You can use the supertokens-web-js SDK which exposes several helper functions that query the APIs exposed by the SuperTokens backend SDK.

You can refer to this example app as a reference for using the supertokens-web-js SDK.

Note

To use SuperTokens with React Native you need to use the supertokens-react-native SDK. The SDK provides session management features.

To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here

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(),
                ],
                // ...
            },
            // ...
        }),
        // ...
    ]
});

Step 2: Back End#

NodeJS
GoLang
Python

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import EmailPassword from "supertokens-node/recipe/emailpassword";
import ThirdParty from "supertokens-node/recipe/thirdparty";
let { Google, Github, Facebook, Apple } = ThirdParty

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
    ]
});

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.TypeProvider{
                        thirdparty.Google(tpmodels.GoogleConfig{
                            ClientID:     "TODO: GOOGLE_CLIENT_ID",
                            ClientSecret: "TODO: GOOGLE_CLIENT_SECRET",
                        }),
                        thirdparty.Github(tpmodels.GithubConfig{
                            ClientID:     "TODO: GITHUB_CLIENT_ID",
                            ClientSecret: "TODO: GITHUB_CLIENT_SECRET",
                        }),
                        thirdparty.Facebook(tpmodels.FacebookConfig{
                            ClientID:     "TODO: FACEBOOK_CLIENT_ID",
                            ClientSecret: "TODO: FACEBOOK_CLIENT_SECRET",
                        }),
                    },
                },
            }),
        },
    })
}

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import thirdparty
from supertokens_python.recipe.thirdparty import Github, Google, Facebook, Apple

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"
                )
            ])
        )
    ]
)

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

ReactJS
Angular
Vue
Plain JavaScript
React Native

Note

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: <div></div>
                    }),
                    Google.init({
                        buttonComponent: <div></div>
                    }),
                    Facebook.init({
                        buttonComponent: <div></div>
                    }),
                    Apple.init({
                        buttonComponent: <div></div>
                    }),
                ], 
                // ...
            },
            // ...
        }),
        // ...
    ]
});