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.

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