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