3. Adding auth APIs

Add authentication APIs to your backend using SuperTokens for user sign-in and sign-up.

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

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) {
  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) => {
      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");
  }
}

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