Which UI do you use?

Custom UI

Pre built UI

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

To learn more about what these properties mean read here.

Your app's name:*

This is the name of your application

API Base Path:

SuperTokens will expose it's APIs scoped by this base API path.

Website Domain:*

This is the URL of your website.

Website Base Path:

The path where the login UI will be rendered

I am using NextJS' API route

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