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 ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdPartyEmailPassword.init({            signInAndUpFeature: {                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 ThirdPartyEmailPassword from "supertokens-node/recipe/thirdpartyemailpassword";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    supertokens: {        connectionURI: "...",    },    recipeList: [        ThirdPartyEmailPassword.init({            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.

What type of UI do you want to use?
Custom UI
Pre built UI