Skip to main content

If you are using our backend SDK that is lesser than the following versions, please visit the older documentation link here.

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#

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.

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.

You can also add providers using the Dashboard. Access the public tenant from the tenant management page and then add the providers in the Social/Enterprise Providers section.

Create Google Provider
  • You can see all the configs available for each of our built in providers over here

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 ThirdParty from "supertokens-node/recipe/thirdparty";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdParty.init({
            signInAndUpFeature: {
                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#

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI