Which UI do you use?

Custom UI

Pre built UI

Disabling frontend network interceptors

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 so that 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 and take control for how you want to attach session tokens to the request yourself. You can do this as follows:

ReactJS

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

This change is in your auth route config.

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

Angular

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

Vue

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

This change is in your auth route config.

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

In the code above, we override the shouldDoInterceptionBasedOnUrl function to only allow interception for all api calls that start with /auth in their path. This will ensure that API calls made from our frontend SDKs (like signOut), will continue to use the session tokens as expected by our backend APIs, whilst allowing 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 are attached to our API calls (like signOut), you can just return false from the function override and then attach custom session headers using the pre API hook function on the frontend.