Skip to main content

Disable frontend network interceptors

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​

What type of UI are you using?

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);
                }
            }
        }
    }
})

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.

UI Type