Hooks and overrides
Customize the authentication flow to trigger events like analytics or database updates.
SuperTokens exposes a set of constructs that allow you to trigger different actions during the authentication lifecycle or to even fully customize the logic based on your use case.
The following sections describe how you can adjust the thirdparty
recipe to your needs.
Explore the references section for a more in depth guide on hooks and overrides.
Frontend hook
What type of UI are you using?
This method gets fired, with the SUCCESS
action, immediately after a successful sign in or sign up.
Follow the code snippet to determine if the user is signing up or signing in.
With this method you can fire events immediately after a successful sign in. You can use it to send analytics events.
import SuperTokens from "supertokens-auth-react";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
recipeList: [
ThirdParty.init({
onHandleEvent: async (context) => {
if (context.action === "SUCCESS") {
if (context.isNewRecipeUser && context.user.loginMethods.length === 1) {
// TODO: Sign up
} else {
// TODO: Sign in
}
}
}
}),
Session.init()
]
});
Backend override
Overriding the signInUp
function allows you to introduce your own logic for the sign in process.
Use it to persist different types of data or trigger actions.
import SuperTokens from "supertokens-node";
import ThirdParty from "supertokens-node/recipe/thirdparty";
import Session from "supertokens-node/recipe/session";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
supertokens: {
connectionURI: "...",
},
recipeList: [
ThirdParty.init({
signInAndUpFeature: {
providers: [/* ... */]
},
override: {
functions: (originalImplementation) => {
return {
...originalImplementation,
signInUp: async function (input) {
// First we call the original implementation of signInUp.
let response = await originalImplementation.signInUp(input);
// Post sign up response, we check if it was successful
if (response.status === "OK") {
let { id, emails } = response.user;
// This is the response from the OAuth 2 provider that contains their tokens or user info.
let providerAccessToken = response.oAuthTokens["access_token"];
let firstName = response.rawUserInfoFromProvider.fromUserInfoAPI!["first_name"];
if (input.session === undefined) {
if (response.createdNewRecipeUser && response.user.loginMethods.length === 1) {
// TODO: Post sign up logic
} else {
// TODO: Post sign in logic
}
}
}
return response;
}
}
}
}
}),
Session.init({ /* ... */ })
]
});