Vercel Guide
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
What type of UI are you using?
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 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.
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 bewindow.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.