---
title: Disable frontend network interceptors
description: Disable frontend network interceptors to manage session tokens and request headers manually in projects.
sidebar:
  order: 50
---

## 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

<UITypeSwitch />

<VariantContent storageKey="ui-type" value="prebuilt">

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Angular" value="angular">
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.
</ContentOption>
</DependentContent>

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
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);
        },
      };
    },
  },
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="Requires SDK globals from surrounding application"
// 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);
        },
      };
    },
  },
});
```
</Tab>
</CodeGroup>

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Angular" value="angular">
This change goes in the `supertokens-web-js` SDK configuration at the root of your application:
</ContentOption>
</DependentContent>

<CodeGroup passive group="frontend-prebuilt-ui">
<Tab title="Angular" value="angular">
```tsx
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);
        },
      };
    },
  },
});
```
</Tab>
</CodeGroup>

</VariantContent>
<VariantContent storageKey="ui-type" value="custom">



<DependentContent passive group="frontend-custom-ui">
<ContentOption title="Mobile" value="mobile">
<DependentContent passive group="mobile-frameworks">
<ContentOption title="ReactNative" value="reactnative">
You can use the `doesSessionExist` function to check if a session exists.
</ContentOption>
<ContentOption title="Android" value="android">
:::note[At the moment this feature is not supported through the Android SDK.]
:::
</ContentOption>
<ContentOption title="iOS" value="ios">
:::note[At the moment this feature is not supported through the iOS SDK.]
:::
</ContentOption>
<ContentOption title="Flutter" value="flutter">
:::note[At the moment this feature is not supported through the Flutter SDK.]
:::
</ContentOption>
</DependentContent>
</ContentOption>
</DependentContent>

<CodeGroup group="frontend-custom-ui">
<Tab title="Web" value="web">
<DependentContent group="install-method" label="Installation method">
<ContentOption title="npm" value="npm">
```tsx
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);
        },
      };
    },
  },
});
```
</ContentOption>
<ContentOption title="Script tag" value="script-tag">
```tsx check=false reason="Requires SDK globals from surrounding application"
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);
        },
      };
    },
  },
});
```
</ContentOption>
</DependentContent>
</Tab>
<Tab title="Mobile" value="mobile">
<DependentContent group="mobile-frameworks" label="Mobile framework">
<ContentOption title="ReactNative" value="reactnative">
```tsx
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);
        },
      };
    },
  },
});
```
</ContentOption>
<ContentOption title="Android" value="android">

</ContentOption>
<ContentOption title="iOS" value="ios">

</ContentOption>
<ContentOption title="Flutter" value="flutter">

</ContentOption>
</DependentContent>
</Tab>
</CodeGroup>



</VariantContent>

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](/references/frontend-sdks/hooks#pre-api-hook) on the frontend.