In this tutorial, you’ll learn how to add SuperTokens authentication to your React and NodeJS application and deploy it on Vercel.
Getting started
To get started with SuperTokens, please visit the Recipe Guides page and pick the login method you want for your application. After choosing a guide, follow the quick setup section or one of the sections for integrating with a framework that you have chosen.
We also have a blog post for how to integrate email password + social login with express and react, if that is what you are looking for.
Restructuring your application for Vercel deployment
Once you have done the basic implementation on your local system, we want to do the following to convert your application so that it can be deployed on Vercel:
- Create an
api
folder. This folder will contain the API logic that we can deploy on Vercel. We will be exposing the API's entry point via anindex.js
file in this folder. Open the
index.js
and exportapp
at the end of the file as shown belowmodule.exports = app;
Note: We are deploying our backend as a standalone express app, and not with
/pages/api
serverless functions that Vercel provides. If you want to deploy using/pages/api
, then you can check out our nextJS framework integration guide that's within the recipe guide.
Change the appInfo config to get Vercel deployments to work
To enable your project to run on production and the inspect sites for Vercel, you need to make the websiteDomain
and appDomain
point to the URLs generated by Vercel. The production URL is always the same for an app, but the inspect URL keeps changing. To allow it to work in this dynamic condition, we must set the values of apiDomain
and websiteDomain
dynamically.
On the backend
appInfo = {
appName: "My App",
apiDomain: process.env.VERCEL_URL,
websiteDomain: process.env.VERCEL_URL,
apiBasePath: "/api/auth",
websiteBasePath: "/auth",
},
Vercel provides an env var - process.env.VERCEL_URL
- to the backend which is equal to the inspect URL / production URL (depending on the site that’s loaded). So we use this to set the apiDomain
and websiteDomain
values dynamically.
On the frontend
We can use window.location.origin
to get the currently loaded URL and set those to the apiDomain
and websiteDomain
. This way, even if the inspect URL keeps on changing, it will still point to the current domain.
appInfo = {
appName: "TodoApp",
apiDomain: window.location.origin,
websiteDomain: window.location.origin,
apiBasePath: "/api/auth",
websiteBasePath: "/auth",
},
This only works if the frontend and backend of your application have the same domain. If your backend is hosted elsewhere and you use Vercel only for the frontend, be sure to change the
apiDomain
on the frontend and backend to point to your backend server. In this case, however, your app may not function properly for inspecting deployments since your backend server has no way of knowing what the inspect URL of the frontend site would be on each deployment.
Update the CORS Middleware
You also need to update the CORS middleware origin with the VERCEL_URL
environment variable.
app.use(
cors({
origin: process.env.VERCEL_URL,
allowedHeaders: ['content-type', ...SuperTokens.getAllCORSHeaders()],credentials: true,
})
);
Configure Vercel and Deploy
With the backend and frontend of your application code updated, create a vercel.json
file in the root directory of your application which will instruct Vercel to push all traffic on /api/*
path to our express backend server:
{
"rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}
Finally, to deploy the app to Vercel, you need to run the Vercel command on the root of your project:
vercel
Once deployed, you should be able to test the login functionality on the inspect URL and the production URL.
Demo app
We also have a demo app on our GitHub that has Email Password login with express and React, and is configured to work with Vercel. You can even see its live preview.
Written by the Folks at SuperTokens — hope you enjoyed! We are always available on our Discord server. Join us if you have any questions or need any help.