Skip to main content

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
  • BitBucket
  • GitLab (Single tenant)
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", // This example will work with any contactMethod
            signInUpFeature: {
                providers: [
                    Github.init(),
                    Google.init(),
                    Facebook.init(),
                    Apple.init(),
                ], 
                // ...
            },
            // ...
        }),
        // ...
    ]
});

Step 2: Back End#

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import ThirdPartyPasswordless from "supertokens-node/recipe/thirdpartypasswordless";
let { Google, Github, Facebook, Apple } = ThirdPartyPasswordless;

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    supertokens: {
        connectionURI: "...",
    },
    recipeList: [
        ThirdPartyPasswordless.init({
            contactMethod: "EMAIL", // This example will work with any contactMethod
            flowType: "USER_INPUT_CODE_AND_MAGIC_LINK", // This example will work with any flow.
            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
    ]
});
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

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", // This example will work with any contactMethod
            signInUpFeature: {
                providers: [
                    Github.init({
                        buttonComponent: <div></div>
                    }),
                    Google.init({
                        buttonComponent: <div></div>
                    }),
                    Facebook.init({
                        buttonComponent: <div></div>
                    }),
                    Apple.init({
                        buttonComponent: <div></div>
                    }),
                ], 
                // ...
            },
            // ...
        }),
        // ...
    ]
});
Which UI do you use?
Custom UI
Pre built UI