Skip to main content

Custom providers

If SuperTokens doesn't support a provider out of the box, you can use custom providers to add a new third party provider to your application.

note

If you think that this provider should be supported by SuperTokens by default, make sure to let us know here.

Step 1: Front End#

import React from "react";
import SuperTokens from "supertokens-auth-react";
import ThirdPartyPasswordless 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: [
                    {
                        id: "custom",
                        name: "X", // Will display "Continue with X"

                        // optional
                        // you do not need to add a click handler to this as
                        // we add it for you automatically.
                        buttonComponent: <div style={{
                            cursor: "pointer",
                            border: "1",
                            paddingTop: "5px",
                            paddingBottom: "5px",
                            borderRadius: "5px",
                            borderStyle: "solid"
                        }}>Login with Custom</div>
                    }
                ],
                // ...
            },
            // ...
        }),
        // ...
    ]
});

Step 2: Back End#

note

The OAuth callback URL for your custom provider will be {websiteDomain}{websiteBasePath}/callback/{customId}, where customId is the id given in the config below (the value below is "custom").

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import ThirdPartyPasswordless from "supertokens-node/recipe/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 flowType
            providers: [
                {
                    id: "custom",
                    get: (redirectURI, authCodeFromRequest) => {
                        return {
                            accessTokenAPI: {
                                // this contains info about the token endpoint which exchanges the auth code with the access token and profile info.
                                url: "https://oauth.example.com/token",
                                params: {
                                    // example post params
                                    client_id: "<CLIENT ID>",
                                    client_secret: "<CLIENT SECRET>",
                                    grant_type: "authorization_code",
                                    redirect_uri: redirectURI || "",
                                    code: authCodeFromRequest || "",
                                    //...
                                }
                            },
                            authorisationRedirect: {
                                // this contains info about forming the authorisation redirect URL without the state params and without the redirect_uri param
                                url: "https://oauth.example.com",
                                params: {
                                    client_id: "<CLIENT ID>",
                                    scope: "<SCOPES>",
                                    response_type: "code",
                                    //...
                                }
                            },
                            getClientId: () => {
                                return "<CLIENT ID>";
                            },
                            getProfileInfo: async (accessTokenAPIResponse) => {
                                /* accessTokenAPIResponse is the JSON response from the accessTokenAPI POST call. Using this, you need to return an object of the following type:
                                {
                                    id: string, // user ID as provided by the third party provider
                                    email?: { // optional 
                                        id: string, // emailID
                                        isVerified: boolean // true if the email is verified already
                                    }
                                }
                                */
                                return {
                                    id: "..."
                                };
                            }
                        }
                    }
                }
            ]
        }),
        Session.init({})
    ]
});
info

To see example implementations for popular third party providers like Google or Facebook, please see our Github repo.

Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react