Skip to main content

If you are using our backend SDK that is lesser than the following versions, please visit the older documentation link here.

3. Adding auth APIs

We will add all the backend APIs for auth on /api/auth. This can be changed by setting the apiBasePath property in the appInfo object in the appInfo.ts file. For the rest of this page, we will assume you are using /api/auth.

1) Create the pages/api/auth/[[...path]].tsx page#

  • Be sure to create the auth folder in the pages/api/ folder.
  • [[...path]].tsx will use the middleware exposed by supertokens-node which exposes all the APIs like sign in, sign up etc..

2) Expose the SuperTokens APIs#

Your app's name:*
Information about the question
This is the name of your application
API Base Path:
Information about the question
SuperTokens will expose it's APIs scoped by this base API path.
Website Domain:*
Information about the question
This is the URL of your website.
Website Base Path:
Information about the question
The path where the login UI will be rendered
Submit form
pages/api/auth/[[...path]].ts
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
import { middleware } from 'supertokens-node/framework/express'
import { NextApiRequest, NextApiResponse } from 'next'
import { Request, Response } from 'express';
import supertokens from 'supertokens-node'
import { backendConfig } from '../../../config/backendConfig'
import NextCors from "nextjs-cors";

supertokens.init(backendConfig())

export default async function superTokens(
req: NextApiRequest & Request,
res: NextApiResponse & Response
) {

// NOTE: We need CORS only if we are querying the APIs from a different origin
await NextCors(req, res, {
methods: ["GET", "HEAD", "PUT", "PATCH", "POST", "DELETE"],
origin: "<YOUR_WEBSITE_DOMAIN>",
credentials: true,
allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
});

await superTokensNextWrapper(
async (next) => {
// This is needed for production deployments with Vercel
res.setHeader(
"Cache-Control",
"no-cache, no-store, max-age=0, must-revalidate"
);
await middleware()(req, res, next)
},
req,
res
)
if (!res.writableEnded) {
res.status(404).send('Not found')
}
}
note

In the snippet above we add the Cache-Control header to the responses for all auth APIs. This is required if you are deploying your app with Vercel because API responses are automatically cached for production deployments. This results in problems because APIs such as /session/refresh return older session tokens resulting in infinite calls to refresh if an API returns unauthorised status. Setting the header ensures that Vercel does not cache any of the auth API responses.

3) Use the login widget#

If you are now able to sign in or sign up, this means the backend setup is done correctly! If not, please feel free to ask questions on Discord

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI