Skip to main content
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")

Step 1: Frontend setup#

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

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.

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: (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.

import SuperTokens from "supertokens-node";
import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    supertokens: {
        connectionURI: "...",
    },
    recipeList: [
        ThirdPartyEmailPassword.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"
                            }]
                        },
                    },
                ]
        })
    ]
});
  • 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:

import SuperTokens from "supertokens-node";
import ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
                providers: [
                    {
                        config: {
                            thirdPartyId: "google",
                            clients: [{
                                clientId: "TODO: GOOGLE_CLIENT_ID",
                                clientSecret: "TODO: 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#

Which UI do you use?
Custom UI
Pre built UI