Vercel

Learn how to integrate SuperTokens with Vercel

This page only talks about what environment variables to use when you are deploying an application on Vercel. For a full set of instructions on how to integrate SuperTokens in a Next.js project, please see either our app router or pages router guides.

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

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

On the backend

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

Vercel adds an environment variable 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.