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

import SuperTokens from "supertokens-node";

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

GoLang

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

Python

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=[
      #...
   ]
)