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 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. Recipe Guides page We also have a blog post on how to integrate , if that is what you are looking for. email password + social login with express and react 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 folder. This folder will contain the API logic that we can deploy on Vercel. We will be exposing the API's entry point via an file in this folder. api index.js Open the and export at the end of the file as shown below index.js app module.exports = app; Note: We are deploying our backend as a standalone express app, and not with serverless functions that Vercel provides. If you want to deploy using , then you can check out our nextJS framework integration guide that's within the recipe guide. /pages/api /pages/api 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 and 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 and dynamically. websiteDomain appDomain apiDomain websiteDomain 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 - - 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 and values dynamically. process.env.VERCEL_URL apiDomain websiteDomain On the frontend We can use it to get the currently loaded URL and set those to the and . This way, even if the inspect URL keeps on changing, it will still point to the current domain. window.location.origin apiDomain websiteDomain 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 on the frontend and backend to point to your backend server. In this case however, your app may not function properly for inspect deployments since your backend server has no way of knowing what the inspect URL of the frontend site would be on each deployment. apiDomain Update the CORS Middleware You also need to update the CORS middleware origin with the environment variable. VERCEL_URL 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 file in the root directory of your application which will instruct Vercel to push all traffic on path to our express backend server: vercel.json /api/* {
    "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 that has Email Password login with express and React, and is configured to work with Vercel. You can even see its . a demo app on our GitHub live preview Written by the Folks at — hope you enjoyed! We are always available on our server. Join us if you have any questions or need any help. SuperTokens Discord

How to connect SuperTokens to a MySQL or to a PostgreSQL database

An In-Depth Comparison of OAuth and JWT (JSON Web Tokens)

See our website for repositories

Nominated for 2022 - HackerNoon Contributor of the Year - Security

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Open Source

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Deploying SuperTokens with React and NodeJS on Vercel

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

All you need to know about user session security

161 Stories To Learn About Authentication

3 Reasons for B2C Enterprises to Implement Single Sign-on Authentication

4 Dangers of Sticking with Outdated MFA Methods

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

All you need to know about user session security

161 Stories To Learn About Authentication

3 Reasons for B2C Enterprises to Implement Single Sign-on Authentication

4 Dangers of Sticking with Outdated MFA Methods

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps