Which UI do you use?

Custom UI

Pre built UI

API Base Path

Step 1) Back End Change

The default apiBasePath is /auth. If you don't like that, or if you need to change it to make is similar to your other routes, you can do so by setting the apiBasePath config:

NodeJS

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

import SuperTokens from "supertokens-node";

SuperTokens.init({
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        apiBasePath: "/api/v3/auth"
    },
    recipeList: [],
});

Python

import "github.com/supertokens/supertokens-golang/supertokens"

func main() {
    apiBasePath := "/authentication"
    supertokens.Init(supertokens.TypeInput{
        AppInfo: supertokens.AppInfo{
            AppName:       "yourAppName",
            APIDomain:     "yourApi",
            WebsiteDomain: "yourWebsite",
            APIBasePath: &apiBasePath,
        },
    })
}

Other Frameworks

from supertokens_python import init, InputAppInfo

init(
    app_info=InputAppInfo(
        app_name='yourAppName',
        website_domain='yourWebsite',
        api_domain='yourApi',
        api_base_path='/authentication'
    ),
    
    framework='...', 
    recipe_list=[
      #...
   ]
)

Step 2) Front End Change

You also need to change the apiBasePath in your frontend code:

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)
(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        apiBasePath: "/api/v3/auth"
    },
    recipeList: [],
});

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

// this goes in the root of your frontend app
import SuperTokens from "supertokens-web-js";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        apiBasePath: "/api/v3/auth",
        appName: "...",
    },
    recipeList: [/* ... */],
});

Angular

import SuperTokens from "supertokens-auth-react";

SuperTokens.init({
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        apiBasePath: "/api/v3/auth"
    },
    recipeList: [],
});

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)
(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        apiBasePath: "/api/v3/auth"
    },
    recipeList: [],
});

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

// this goes in the root of your frontend app
import SuperTokens from "supertokens-web-js";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        apiBasePath: "/api/v3/auth",
        appName: "...",
    },
    recipeList: [/* ... */],
});