Which UI do you use?

Custom UI

Pre built UI

Website Base Path

Step 1) Front End Change

Since the beginning of this guide, you probably noticed that all the front-end routes for SuperTokens widget are prefixed by /auth. You can change this value in the init function by setting websiteBasePath.

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 SuperTokens from "supertokens-auth-react";

SuperTokens.init({
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        websiteBasePath: "/authentication"
    },
    recipeList: [],
});

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 SuperTokens from "supertokens-auth-react";

SuperTokens.init({
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        websiteBasePath: "/authentication"
    },
    recipeList: [],
});

Vue

import SuperTokens from "supertokens-auth-react";

SuperTokens.init({
    appInfo: {
        appName: "yourAppName",
        apiDomain: "yourApi",
        websiteDomain: "yourWebsite",
        websiteBasePath: "/authentication"
    },
    recipeList: [],
});

Step 2) Back End Change

You also need to change the websiteBasePath in your backend code:

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",
        websiteBasePath: "/authentication"
    },
    recipeList: [],
});

Python

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

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

Other Frameworks

from supertokens_python import init, InputAppInfo

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