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

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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

Angular

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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

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, 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.