Skip to main content

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#

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.
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react