Which UI do you use?

Custom UI

Pre built UI

Using Vercel

With NextJS

Please see our NextJS guide (on the left navigation list) and get it to work for your local dev env.

With other stacks

• Please follow the setup section and make sure you complete all steps mentioned in it.
• For NodeJS apps, Vercel allows you to run a standalone Node express server on the backend. You can read this blog on how to deploy SuperTokens with React + Express on Vercel.

Working with Vercel's inspect and production URL

Vercel provides one production URL per app and one unique inspect URL per deployment. To get SuperTokens to work with dynamic URLs, you need to make the following changes to the appInfo object:

On the frontend

appInfo = {
    apiDomain: window.location.origin,
    websiteDomain: window.location.origin,
    ...
}

On the backend

appInfo = {
    apiDomain: process.env.VERCEL_URL,
    websiteDomain: process.env.VERCEL_URL,
    ...
},

Vercel adds an env var to the backend - VERCEL_URL, which points to the current URL that the app is deployed on. This allows SuperTokens to work on all inspect URLs generated by Vercel without you having to keep changing your code.

note

The above setting works only if your backend and frontend are deployed on the same URL. If you are using a different backend and using Vercel only for your frontend, then:

• Set the apiDomain on the frontend and backend to point to your backend.
• The websiteDomain on the frontend should be window.location.origin, but on the backend, it should be equal to your production deployment URL. This will break certain features of the app for inspect URL deployments, but it will work as expected for production deployments.