Disable frontend network interceptors

Disable frontend network interceptors to manage session tokens and request headers manually in projects.

Overview

SuperTokens frontend SDKs add interceptors to networking libraries to:

Enable auto refreshing of session tokens.
Auto adding of the right request headers (Authorization header in case of header based auth, or the anti-csrf headers in case of cookie based auth).
Setting credentials: true for cookie based auth to ensure the browser adds session cookies.

Whilst this helps for greenfield projects, for existing projects, you may want to disable this interception for your API calls. Take control of how you want to attach session tokens to the request yourself. You can do this as follows:

Steps

1. Update the frontend configuration

UI type

Pre-built UIDrop-in components that handle the flows for you.Custom UIBuild your own UI and call the SDK directly.

You need to make changes to the auth route configuration, as well as to the supertokens-web-js SDK configuration at the root of your application:

This change is in your auth route configuration.

import Session from "supertokens-auth-react/recipe/session";

Session.init({
  override: {
    functions: (oI) => {
      return {
        ...oI,
        shouldDoInterceptionBasedOnUrl: (url, apiDomain, sessionTokenBackendDomain) => {
          try {
            let urlObj = new URL(url);
            if (!urlObj.pathname.startsWith("/auth")) {
              return false;
            }
          } catch (ignored) {}
          return oI.shouldDoInterceptionBasedOnUrl(url, apiDomain, sessionTokenBackendDomain);
        },
      };
    },
  },
});

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

supertokensUISession.init({
  override: {
    functions: (oI) => {
      return {
        ...oI,
        shouldDoInterceptionBasedOnUrl: (url, apiDomain, sessionTokenBackendDomain) => {
          try {
            let urlObj = new URL(url);
            if (!urlObj.pathname.startsWith("/auth")) {
              return false;
            }
          } catch (ignored) {}
          return oI.shouldDoInterceptionBasedOnUrl(url, apiDomain, sessionTokenBackendDomain);
        },
      };
    },
  },
});

This change goes in the supertokens-web-js SDK configuration at the root of your application:

import Session from "supertokens-web-js/recipe/session";

Session.init({
  override: {
    functions: (oI) => {
      return {
        ...oI,
        shouldDoInterceptionBasedOnUrl: (url, apiDomain, sessionTokenBackendDomain) => {
          try {
            let urlObj = new URL(url);
            if (!urlObj.pathname.startsWith("/auth")) {
              return false;
            }
          } catch (ignored) {}
          return oI.shouldDoInterceptionBasedOnUrl(url, apiDomain, sessionTokenBackendDomain);
        },
      };
    },
  },
});

You can use the doesSessionExist function to check if a session exists.

import Session from "supertokens-web-js/recipe/session";

Session.init({
  override: {
    functions: (oI) => {
      return {
        ...oI,
        shouldDoInterceptionBasedOnUrl: (url, apiDomain, sessionTokenBackendDomain) => {
          try {
            let urlObj = new URL(url);
            if (!urlObj.pathname.startsWith("/auth")) {
              return false;
            }
          } catch (ignored) {}
          return oI.shouldDoInterceptionBasedOnUrl(url, apiDomain, sessionTokenBackendDomain);
        },
      };
    },
  },
});

supertokensSession.init({
  override: {
    functions: (oI) => {
      return {
        ...oI,
        shouldDoInterceptionBasedOnUrl: (url, apiDomain, sessionTokenBackendDomain) => {
          try {
            let urlObj = new URL(url);
            if (!urlObj.pathname.startsWith("/auth")) {
              return false;
            }
          } catch (ignored) {}
          return oI.shouldDoInterceptionBasedOnUrl(url, apiDomain, sessionTokenBackendDomain);
        },
      };
    },
  },
});

import SuperTokens from "supertokens-react-native";

SuperTokens.init({
  apiDomain: "...",
  override: {
    functions: (oI) => {
      return {
        ...oI,
        shouldDoInterceptionBasedOnUrl: (url, apiDomain, sessionTokenBackendDomain) => {
          try {
            let urlObj = new URL(url);
            if (!urlObj.pathname.startsWith("/auth")) {
              return false;
            }
          } catch (ignored) {}
          return oI.shouldDoInterceptionBasedOnUrl(url, apiDomain, sessionTokenBackendDomain);
        },
      };
    },
  },
});

In the code above, the shouldDoInterceptionBasedOnUrl function is overridden to only allow interception for all API calls that start with /auth in their path. This ensures that API calls made from frontend SDKs (like sign out) continue to use the session tokens as expected by backend APIs. It also allows you to take control of how you want to attach session tokens to your own API calls (ones that have a path that don’t start with /auth).

If you want to also change how session tokens attach to API calls (like sign out), you can return false from the function override. Then, attach custom session headers using the pre-API hook function on the frontend.