Function Overrides

Override frontend authentication functions to implement custom use cases.

Overview

Function overrides let you customize the behavior of the functions used internally, by the SDKs. You can change how actions like signing in, signing up, creating, or revoking sessions or signing out work. This flexibility lets you integrate your own logic into the authentication and session management processes.

For example, if a recipe checks for an active session using the session recipe’s doesSessionExist function, you can override that function to work with your custom session management. Similarly, if you already have a sign-in/sign-up flow and want to integrate with SuperTokens, overriding allows you to handle the migration process. You can even implement your own userId format by mapping your userIds to those generated by SuperTokens.

Before you start

This page is relevant if you are using the actual frontend SDK. If you are calling the backend SDK endpoints directly this code does not run in your use case.

Example

The code snippet shows the general flow of overriding a function. You inject your own custom logic while also calling the original implementation of the function.

import SuperTokens from "supertokens-auth-react";
import Session from "supertokens-auth-react/recipe/session";
import ThirdParty from "supertokens-auth-react/recipe/thirdparty";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    Session.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding the function for checking
            // if a session exists
            doesSessionExist: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.doesSessionExist(input);
            },
          };
        },
      },
    }),
    EmailPassword.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign up button.
            signUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
    ThirdParty.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign in or sign up button.
            signInAndUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signInAndUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
  ],
});

// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUISession.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding the function for checking
            // if a session exists
            doesSessionExist: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.doesSessionExist(input);
            },
          };
        },
      },
    }),
    supertokensUIEmailPassword.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign up button.
            signUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
    supertokensUIThirdParty.init({
      override: {
        functions: (originalImplementation) => {
          return {
            ...originalImplementation,

            // we will only be overriding what happens when a user
            // clicks the sign in or sign up button.
            signInAndUp: async function (input) {
              // TODO: some custom logic

              // or call the default behaviour as show below
              return originalImplementation.signInAndUp(input);
            },
            // ...
            // TODO: override more functions
          };
        },
      },
    }),
  ],
});